Das inline-block whitespace-Problem
0 
Matthias Apsel
0 
molily
Das inline-block whitespace-Problem
Hallo erstmal,
ich habe in letzter Zeit einige Seiten zum Thema Webdesign gelesen, auf denen stand, dass das Verwenden von floats zum Aufbau der Seitenstruktur inzwischen ähnlich verpönt sei, wie damals die berüchtigten Tabellen-Layouts, oder das es zumindest auf gutem Weg dahin sei es in Zukunft zu werden.
Als Alternative wird immer empfohlen auf Inline-Blocks zu setzen, ohne dabei zu vergessen auf das bekannte Problem mit den Leerräumen zwischen diesen hinzuweisen. Zudem werden auch immer zahlreiche work-arounds erläutert, um das Problem zu umgehen.
Was ich mich jetzt jedoch frage: Ließe sich das Problem nicht auch einfach von vorneherein ausschalten, wenn man von Seiten des W3C für die CSS-Eigenschaft white-space einen zusätzlichen Parameter "none" (oder meinetwegen "remove") definieren würde, der dafür sorgt, dass sämtliche Whitespaces im betreffenden Element verschwinden?
Müsste man natürlich bei Texten ein wenig aufpassen, zumal white-space ja vererbbar ist, aber grundsätzlich wäre das doch (zumindest in meinen Augen) die sauberste Lösung ohne irgendwelche work-arounds.
-
Om nah hoo pez nyeetz, fnord2000!
Was ich mich jetzt jedoch frage: Ließe sich das Problem nicht auch einfach von vorneherein ausschalten, wenn man von Seiten des W3C für die CSS-Eigenschaft white-space einen zusätzlichen Parameter "none" (oder meinetwegen "remove") definieren würde, der dafür sorgt, dass sämtliche Whitespaces im betreffenden Element verschwinden?
EsistjanichtderWhitespaceimElement,derstört,sondernderWhitespacezwischendenElementen.Mitwhitespace:none;hättestdudiesesErgebnis.Daskannstdunichtwirklichwollen.
Aber du meinst sicher:
body {white-space: remove} main {white-space: normal}Wenn inline-block durch flexbox abgelöst werden wird, ist das auch hinfällig.
Matthias
-
Was ich mich jetzt jedoch frage: Ließe sich das Problem nicht auch einfach von vorneherein ausschalten, wenn man von Seiten des W3C für die CSS-Eigenschaft white-space einen zusätzlichen Parameter "none" (oder meinetwegen "remove") definieren würde, der dafür sorgt, dass sämtliche Whitespaces im betreffenden Element verschwinden?
EsistjanichtderWhitespaceimElement,derstört,sondernderWhitespacezwischendenElementen.
Sorry, da hatte ich mich unklar ausgedrückt: Ich meinte natürlich den schon den whitespace im Übergeordneten Element, also dem, dass die inline-boxen enthält.
Mitwhitespace:none;hättestdudiesesErgebnis.Daskannstdunichtwirklichwollen.
Das meinte ich mit "bei Texten muss man aufpassen". ;)
Aber es gibt mit text-transform ja schon einige Varianten um das Erscheinungsbild eines Textes zu ändern, ein Entfernen von white-spaces wäre da also auch nur eine weitere Variante.
Wenn inline-block durch flexbox abgelöst werden wird, ist das auch hinfällig.
Bleibt die Frage, wie lange es dauert, bis es sich umfassend durchgesetzt hat und die Browser, die es unterstützen überall verbreitet sind.
-
-
Hallo,
das Verwenden von floats zum Aufbau der Seitenstruktur [sei] inzwischen ähnlich verpönt, wie damals die berüchtigten Tabellen-Layouts, oder das es zumindest auf gutem Weg dahin sei es in Zukunft zu werden.
Das ist insofern richtig, dass Floats nie dafür gedacht waren, Spaltenlayout umzusetzen und nicht den Anforderungen genügen, die die meisten Layouts mit sich bringen.
Es stimmt allerdings nicht, dass sie »inzwischen ähnlich verpönt sind wie Tabellenlayouts«. Die allermeisten CSS-Layouts setzen immer noch auf Floats, es ist immer noch die robusteste Layouttechnik. Es ist ein großer Hack. Aber ein guter, funktionierender Hack.
Als Alternative wird immer empfohlen auf Inline-Blocks zu setzen, ohne dabei zu vergessen auf das bekannte Problem mit den Leerräumen zwischen diesen hinzuweisen.
display: inline-block ist keine generelle Alternative zu Floats. In manchen Fällen ist inline-block sinnvoller. Aber niemand setzt inline-block fürs allgemeine Layouting ein. Dafür hat inline-block zuviele Fallstricke.
Ließe sich das Problem nicht auch einfach von vorneherein ausschalten, wenn man von Seiten des W3C für die CSS-Eigenschaft white-space einen zusätzlichen Parameter "none" (oder meinetwegen "remove") definieren würde, der dafür sorgt, dass sämtliche Whitespaces im betreffenden Element verschwinden?
Das ließe sich schon machen, aber wieso? inline-block ist nicht zum Layouting gedacht. Dafür wird es genauso zweckentfremdet wie Floats. inline-block ist zum Positionieren von kleineren Elementen innerhalb einer Zeilenbox gedacht, nicht dafür, um riesige Spalten zu layouten. Daher führt man keine CSS-Eigenschaft ein, die die komplette Logik von Block- und Inline-Boxen auf den Kopf stellt. Die ist nämlich seit eh und je an Whitespace-Handling gekoppelt.
Müsste man natürlich bei Texten ein wenig aufpassen, zumal white-space ja vererbbar ist, aber grundsätzlich wäre das doch (zumindest in meinen Augen) die sauberste Lösung ohne irgendwelche work-arounds.
Die sauberste Lösung ist die Verwendung von CSS-Techniken, die explizit zum Layouting gedacht sind: Flexbox, Multicolumn Layout, Regions… Nicht umsonst laufen Artikel wie http://css-tricks.com/fighting-the-space-between-inline-block-elements/ auf »just use Flexbox« hinaus. Wobei bekanntermaßen noch ein Float-Fallback nötig ist.
Mathias
