Flexbox und der IE 8 / 9

[Jnnbo]

Guten Morgen,

ich möchte gerne drei Spalten auf meiner Seite haben. Bis jetzt habe ich dafür immer ein <div> genommen. Durch Zufall bin ich auf "Flexbox“ gestoßen. Laut der Webseite caniuse.com sieht dieses sehr gut aus, was der Browser Support angeht. Nur der IE in der Version 9 und 8 spielen nicht mit.

Wenn ich meine Seite allerdings für zumindest den IE 9 noch optimieren möchte (ist dieses überhaupt noch sinnvoll?) was mache ich dann?

[Gunnar Bittersmann]

@@Jnnbo:

nuqneH

Wenn ich meine Seite allerdings für zumindest den IE 9 noch optimieren möchte (ist dieses überhaupt noch sinnvoll?)

Wohl nicht. “Instead of spending your time trying to make websites look the same in wildly varying browsers, you can spend your time making sure that the core functionality of what you’re building works everywhere, while providing the best possible experience for more capable browsers.” [adactio]

Und überhaupt.

was mache ich dann?

Progressive enhancement.

Qapla'

[MudGuard]

Hi,

ich möchte gerne drei Spalten auf meiner Seite haben. Bis jetzt habe ich dafür immer ein <div> genommen. Durch Zufall bin ich auf "Flexbox“ gestoßen.

Das liest sich so, als hättest Du <div></div> jetzt <flexbox></flexbox> genommen.
Ist das so?

cu,
Andreas

[Jnnbo]

Hallo Andreas,

Das liest sich so, als hättest Du <div></div> jetzt <flexbox></flexbox> genommen.
Ist das so?

jetzt willst du mich entweder testen oder einfach nur verarschen? xD Natürlich sind die <div> weiterhin vorhanden nur eben das CSS hat sich zum Teil geändert.

[MudGuard]

Hi,

jetzt willst du mich entweder testen oder einfach nur verarschen? xD Natürlich sind die <div> weiterhin vorhanden nur eben das CSS hat sich zum Teil geändert.

Naja, DU hast geschrieben, daß Du *bis* jetzt div genommen hast. Das klingt so, als würdest Du *ab* jetzt was anderes nehmen.
Da ich weder Dich noch Deinen Kenntnisstand kenne, hab ich halt nachgefragt.
In meiner Zeit als Entwickler hab ich schon so einiges erlebt, da wäre <flexbox> statt <div> noch eines der harmlosesten Beispiele ...

cu,
Andreas

[Jnnbo]

Hallo,

Naja, DU hast geschrieben, daß Du *bis* jetzt div genommen hast. Das klingt so, als würdest Du *ab* jetzt was anderes nehmen.
Da ich weder Dich noch Deinen Kenntnisstand kenne, hab ich halt nachgefragt.
In meiner Zeit als Entwickler hab ich schon so einiges erlebt, da wäre <flexbox> statt <div> noch eines der harmlosesten Beispiele ...

hab es jetzt so umgesetzt:

  
.container {  
  display: -webkit-flex;  
  display: flex;  
}  
.leistung {  
	padding-right:3%;  
	-webkit-flex: 1;  
    flex: 1;  
}  
  
.leistung:nth-of-type(3) {  
	padding-right:0%;  
}  

  
    <div class="container">  
        <article class="leistung">  
          <h2>Leistung 1</h2>  
          <figure>  
          <img src="http://placehold.it/350x150" alt="Bild 1">  
        </figure>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>  
        <p><a href="">... weiterlesen</a></p>  
        </article>  
        <article class="leistung">  
          <h2>Leistung 1</h2>  
          <figure>  
          <img src="http://placehold.it/350x150" alt="Bild 1">  
        </figure>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>  
        <p><a href="">... weiterlesen</a></p>  
        </article>  
        <article class="leistung">  
          <h2>Leistung 1</h2>  
          <figure>  
          <img src="http://placehold.it/350x150" alt="Bild 1">  
        </figure>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>  
        <p><a href="">... weiterlesen</a></p>  
        </article>  
  	</div>  

[Johannes B.]

Hallo!

IE 9 hat noch einen wichtigen Marktanteil, sollte aber nicht technologisch maßgeblich sein.

Wenn IE 9 sehr wichtig ist und du ihm möglichst das gleiche Layout geben willst, dann macht Flexbox keinen Sinn. Du müsstest sonst für alte IEs das Layout mit Floats, display:table, display:inline-block, position:absolute o.ä. aufwändig nachbauen. Das ist nicht ratsam und lohnt nicht. Dann könntest du es auch gleich für alle Browser z.B. mit Floats umsetzen und dir die doppelte Arbeit sparen.

Flexbox macht Sinn wenn du damit ein Layout umsetzt, daß mit den herkömmlichen Methoden nicht ohne weitres möglich ist. Mit Flexbox kann man Elrmente viel intelligenter und einfacher ausrichten und verteilen. Du kannst die Site in alten IEs mit wenig Aufwand gut aussehen lassen, und neuere Browser kommen in den vollen Flexbox Genuß.

Johannes