How-To

Flexibler als gedacht: Was du mit CSS inzwischen umsetzen kannst

Seite 2 / 2

Das folgende Beispiel verdeutlicht das Konzept. Es ist auch auf Codepen (t3n.me/subgrid) zu finden. Daher gibt es hier nur die relevanten Code-Stellen. Zuerst die HTML-Struktur:

<div class="container">
<div class="box-1">Abschnitt I</div>
<div class="box-2">Abschnitt II</div>
<div class="box-3">Abschnitt III</div>
<ul class="box-4">
 	<li>Listeneintrag Nr. 1</li>
 	<li>Listeneintrag Nr. 2</li>
 	<li>Listeneintrag Nr. 3</li>
 	<li>Listeneintrag Nr. 4</li>
</ul>
</div>

Das HTML besteht aus einem Elternelement mit dem class-Wert „container“. Dieses enthält vier weitere Kindelemente. Davon drei div-Abschnitte und eine Liste mit vier Einträgen. Und um die geht es uns gleich. Das CSS dazu lautet:

[...]
.box-1 {grid-column: 1; grid-row: 1;}
.box-2 {grid-column: 2 / 4; grid-row: 1;}
.box-3 {grid-column: 4; grid-row: 1;}
.box-4 {grid-column: 1 / -1; grid-row: 2;}

Wie das Ergebnis zeigt (siehe Grafik unten), orientieren sich die einzelnen Listeneinträge innerhalb dieser Liste nicht an der ­Gitternetzstruktur. Um die visuelle Ausrichtung der Abschnitte I bis III auf die vier Listeneinträge zu übertragen, müssen Webdesigner dank des Subgrid-Konzepts kein neues Raster anlegen. Sie können einfach das Vorherige übertragen. Dafür erweitern sie lediglich die letzte CSS-Regel um zwei Zeilen oder Deklarationen – und schon übernimmt die Liste das übergeordnete Raster:

.box-4 {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: subgrid;
}

Bislang sind Subgrids noch in keinem der populären Browser ­aktiv. Nur frühe Testversionen, wie „Nightly“ von Firefox (69.0a1), unterstützen die Technik.

Das geht alles mit CSS?

Dass sich mit CSS nur Farben, Abstände und einige andere ­Eigenschaften anpassen ließen, ist lange vorbei. So können Web­designer mit der CSS-Eigenschaft „backface-visbility“ Elemente dazu bringen, dass sie sich umdrehen und so ihre „Rückseite“ ­zeigen. Die kann etwa einen anderen Text als die Vorderseite ­enthalten. Das eignet sich beispielsweise für die Simulation von Frage- und Antwort-Karten.

Schicker Texteinstieg mit CSS: Mit „first-letter“ lassen sich ­In­itiale in Größe, Farbe und Schrift­art bauen. (Screenshot: Codepen)

Schicker Texteinstieg mit CSS: Mit „first-letter“ lassen sich ­In­itiale in Größe, Farbe und Schrift­art bauen. (Screenshot: Codepen)

Schmückende Anfangsbuchstaben für einen Text setzen? Mit „first-letter“ lassen sich Initiale in Größe, Farbe und Schriftart nach Wunsch bauen. Die Eigenschaft „shape-outside“ wiederum ermöglicht es, Text um ein beliebig geformtes grafisches Element fließen zu lassen. Apropros Grafik: Webdesigner können allein mit CSS Tortendiagramme bauen, indem sie „conic-gradient“ nutzen.

Alle sechs Ansichten zeigen ­dasselbe Bild, nur die CSS-Angaben unterscheiden sich. Bild 2 erhielt einen Graufilter von 90 Prozent, Bild 3 einen Sepia-Farbton, Bild 4 einen Schlagschatten und Bild 5 und 6 jeweils einen Filter, der erst aktiv wird, wenn ein Nutzer mit der Maus darüber fährt. Damit der Mouseover- oder Hover­Effekt nicht zu abrupt erscheint, sorgt die Eigenschaft „transition“ für eine Übergangszeit von einer Sekunde. Das Ergebnis der beiden oberen Code-Fragmente können Web­designer auch auf Codepen ­betrachten: t3n.me/cssfilter. (Abbildung: Codepen/t3n)

Alle sechs Ansichten zeigen ­dasselbe Bild, nur die CSS-Angaben unterscheiden sich. Bild 2 erhielt einen Graufilter von 90 Prozent, Bild 3 einen Sepia-Farbton, Bild 4 einen Schlagschatten und Bild 5 und 6 jeweils einen Filter, der erst aktiv wird, wenn ein Nutzer mit der Maus darüber fährt. Damit der Mouseover- oder Hover­Effekt nicht zu abrupt erscheint, sorgt die Eigenschaft „transition“ für eine Übergangszeit von einer Sekunde. Das Ergebnis der beiden oberen Code-Fragmente können Web­designer auch auf Codepen ­betrachten: t3n.me/cssfilter. (Abbildung: Codepen/t3n)

Fotos lassen sich mit Filtern versehen, sodass sie bei einem Mouseover ihre Helligkeit verändern oder von Schwarzweiß- zu Farbfotos wechseln und ähnliches. Dafür müssten Webdesigner sonst entweder viele Zeilen Javascript-Code einsetzen oder zusätzliche Grafiken verwenden – das ist kompliziert und verlangsamt eine Website unnötig. Deutlich einfacher und performanter kann hier CSS arbeiten. Das zeigen die CSS-Regeln im folgenden, recht simplen Beispiel, das auch in der Abbildung zu sehen ist:

[...]
.wrap {display: grid; grid-template-columns: 1fr 1fr
1fr; padding: 1rem; grid-gap: 1rem;}
.grau {filter: grayscale(90%);}
.sepia {filter: sepia(60%);}
.schlagschatten {filter: drop-shadow(5px 5px 5px
#444);}

.grau-hover:hover {filter: grayscale(.9);
transition: all 1s ease;}
.sepia-hover:hover {filter: sepia(.6);
transition: all 1s ease;}

Darüber hinaus sind etliche weitere nützliche CSS-­Eigenschaften in Arbeit. Zum Beispiel die Eigenschaften „scrollbar-width“ und ­„scrollbar-color“, mit denen sich die Farbe und Breite von ­Scrollbars festlegen lässt. Ein Entwurf beschäftigt sich mit der Möglichkeit, Seitenverhältnisse von Elementen direkt festzu­legen, was bislang nur über einen Workaround möglich war. ­Erwartet wird auch die Pseudo-Klasse :matches(), mit der ­Webdesigner eine Gruppe von Selektoren definieren können – etwa, um grundlegende Stylesheets zu bestimmen.

Fazit

Die Möglichkeiten des Webdesigns haben sich stark verändert und erweitert. Die Sprache CSS spielt dabei heute eine wichtige Rolle: Mit Flexbox und Grids verfügt CSS über ausgewachsene Techniken für flexible und responsive Layouts. Darüber hinaus entwickelt sich gerade das Subgrid-Konzept. Nach wie vor lässt so mancher Webentwickler CSS wegen seines alten Rufs links ­liegen. Das ist ein Fehler. Denn CSS wird ständig weiterent­wickelt und ist deshalb seit vielen Jahren komplexer und leistungs­fähiger, als einige das vielleicht wahrhaben wollen.

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