How-To

Flexibler als gedacht: Was du mit CSS inzwischen umsetzen kannst

(Abbildung: Shutterstock / Lemberg Vector studio)

CSS hat sich längst zu einem mächtigen Werkzeug gemausert. Doch das scheint noch nicht bei jedem Webdesigner angekommen zu sein. Ein Blick auf neue Entwicklungen und einige Tricks.

Es stimmt ja, dass Frontend-Designer früher nicht viel zu ­lachen hatten. Um die Jahrtausendwende mussten sie zum Beispiel Frames einsetzen, um eine Fußzeile oder Seitenleiste zu ­posi­tionieren. Ab 2003 setzten sich schließlich CSS-basierte Layouts durch, die zunächst einiges vereinfachten. Entwickler arbeiteten mit der CSS-Eigenschaft position, um die einzelnen Elemente zu platzieren, mit float ließen sich Elemente anlegen, etwa eine Seitenleiste links oder rechts.

Leider boten diese Techniken auch Stolperstellen. Beispiel Frames: Sie bildeten nur optisch eine gemeinsame Website, technisch ist jedes Frame eine eigene Website. Erst der HTML-Befehl frameset verband sie. Wer die Verweise nicht mit dem ­richtigen Wert für das target-Attribut ausstattete, erlebte wunder­same Dinge: Texte aus dem Inhaltsbereich tauchten plötzlich im ­Navigationsframe auf. Tabellen für Layoutzwecke zu nutzen war wiederum semantisch falsch, denn sie sollen Daten tabellarisch darstellen. Zudem ließen sie sich nur schwer responsiv umsetzen und waren damit nicht zur Darstellung auf mobilen Geräten gerüstet. Auch wer Boxen mittels der CSS-Eigenschaft position absolut positionieren wollte, erlebte unangenehme Überraschungen bei diversen Auflösungen: Die Boxen sprangen einfach aus dem Textfluss heraus. Behelfslösungen gab es (zum Beispiel mit der CSS-Eigenschaft clear), waren aber mühsam, zeitaufwändig und auch nicht wirklich sicher.

Kein Wunder, dass CSS bei vielen Entwicklern einen schlechten Ruf hat. CSS sei keine richtige Sprache, heißt es oft. Manche haben die grundlegenden Konzepte von CSS – etwa die Kaskade – nicht wirklich verstanden. Das führt automatisch zu Fehlern und damit zu Frust. Die CSS-Verächter ignorieren außerdem oft, wie sehr sich die ​Style­sheet-Sprache​​ in den letzten Jahren gewandelt hat. CSS kann nun auch Grafiken animieren und mit Filtern versehen, Inhalte transformieren, vollwertige Layoutraster umsetzen und mehr.

Endlich: Grids und Subgrids

Um 2012 setzte der nötige Modernisierungsschub für CSS ein: Das Flexbox-Konzept war der erste Baustein, um einfache, ­wartungsarme, aber leistungsfähige Werkzeuge für responsive und flexible Layouts an der Hand zu haben. Der zweite Baustein folgte Anfang 2017 mit dem Grid-Modul von CSS3. Seitdem ­erfreut sich CSS wachsender Popularität und einer breiten Unterstützung durch Browser.

Die Kindelemente der Listeneinträge orientieren sich bei ­normalen Grids nicht an der übergeordneten Gitternetzstruktur. Mit Subgrids übernehmen sie ­hingegen das Raster des Eltern­elements. (Abbildung: t3n)

Die Kindelemente der Listeneinträge orientieren sich bei ­normalen Grids nicht an der übergeordneten Gitternetzstruktur. Mit Subgrids übernehmen sie ­hingegen das Raster des Elternelements. (Abbildung: t3n)

Im Gegensatz zum Flexbox-Konzept können Grids nicht nur linear, sondern auch zweidimensional wirken. Indem das CSS3-Grid-Modul Spalten und Zeilen eines Layouts gezielt anspricht, sind auch sehr anspruchsvolle Gestaltungsraster möglich. Grids verfolgen den Ansatz „Layout First“, während bei Flexbox ­„Content First“ gilt. Die Grids sind deshalb mittlerweile deutlich populärer, was sich auch in der Zahl der Artikel und ­Tutorials im Netz und der stetigen Weiterentwicklung widerspiegelt. ­Allerdings muss sich auch niemand für das eine oder gegen das andere Konzept entscheiden. Beide Layoutmodelle lassen sich ­miteinander kombinieren. Wichtig dabei: einen Flexbox-­Container können Entwickler problemlos in einem CSS-Grid-Konstrukt verwenden. Umgekehrt funktioniert das aber nicht.

Eine der zukunftsträchtigsten und besonders hilfreichen Erweiterungen der CSS-Grid-Spezifikation sind Subgrids. Dabei handelt es sich um neue Keyword-Werte für die Eigenschaften „grid-template-columns“ und „grid-template-rows“. Diese ­beiden Eigenschaften beinhalten üblicherweise eine Auflistung der ­Größe von Abschnitten, die in der jeweiligen Deklaration definiert sind. Hier ein Beispiel:

grid-template-columns: 2.5fr 1fr 1fr 1fr;

In diesem Beispiel gibt es vier Abschnitte: Der erste hat 2,5 ­Anteile im Spaltenraster und die drei folgenden Abschnitte jeweils ­einen. Wer die Gitternetz-Struktur auch in einem Kindelement ­abbilden will, kann bis jetzt nur dem Kindelement eine weitere Gitter­netzstruktur geben. Dann nähert sich die Ausgabe visuell der übergeordneten Struktur. Allerdings geht das mit dem neuen Subgrid grid-template-columns: subgrid; deutlich einfacher.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Thomas Anders

Was benutzen denn die, die CSS nicht nutzen?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung