Von wenig bekannten Funktionen zum Scroll-Snap bis hin zu beeindruckenden neuen Farbpaletten - hier sind sieben Aktualisierungen von Cascading Style Sheets, die Sie nicht verpassen sollten. [...]
Cascading Style Sheets (CSS) kamen erstmals 1996 in Umlauf und sind nach wie vor ein unverzichtbarer, sich ständig weiterentwickelnder Bestandteil der Webentwicklung. Wie andere lebende Sprachen führt auch CSS ständig neue Funktionen ein, die sich an der Praxis orientieren. Diese schnelle Entwicklung kann dazu führen, dass selbst engagierte Entwickler neue Funktionen übersehen. Im Folgenden finden Sie einen Überblick über die nützlichsten neuen und künftigen Funktionen in CSS.
Subgrid
Seit seinen Anfängen haben sich Entwickler über bestimmte monströse Unzulänglichkeiten von CSS beschwert. Einige alltägliche Aufgaben, wie das Zentrieren von Objekten in CSS, erfordern übermäßig komplexe Workarounds und Finessen. Ein weiteres großes Problem war die Erstellung eines vernünftigen Rasterlayouts, zumindest bis das CSS Grid Layout-Modul in die Bresche sprang.
Ein Grid-Layout wird mit der display: grid-Deklaration angegeben und ist eine Art Cousin von Flexbox, da es Ihnen ermöglicht, rechteckige Layouts zu definieren, aber auch Ihr Raster in zwei Dimensionen zu kontrollieren. Umfragen haben ergeben, dass die meisten Entwickler, die sich mit CSS beschäftigen, das Grid-Layout kennen, und viele von uns verwenden es auch. (Wenn Sie es noch nicht verwenden, sollten Sie es ausprobieren!)
Subgrid ist eine neue und sehr hilfreiche Funktion für das Grid-Layout-Modul. Mit der Subgrid-Funktion können Sie ein untergeordnetes Raster definieren, das das Layout des übergeordneten Rasters erbt. Dies unterscheidet sich von der Verschachtelung eines Rasters in einem anderen; in diesem Fall definiert das untergeordnete Raster seine eigenen Abmessungen und Abstände.
Bei einem Subgrid wird das Layout des übergeordneten Grids auf das Subgrid angewendet, aber das Subgrid kann immer noch Aspekte des Layouts überschreiben, wenn dies notwendig ist.
Zum Zeitpunkt der Erstellung dieses Artikels ist Subgrid nur in Firefox 71 oder höher implementiert, aber es ist auf der Roadmap für Safari WebKit, Google Chrome und Microsoft Edge. Subgrid wird in Zukunft definitiv eine sehr hilfreiche Layout-Funktion sein.
Akzentfarben
Einige Darstellungselemente sind traditionell schwierig zu gestalten, obwohl sie häufig verwendet werden. Kontrollkästchen und Optionsfelder werden beispielsweise häufig durch ein benutzerdefiniertes Widget ersetzt, das das Verhalten dieser Elemente nachahmt, während die Implementierung des Browsers verborgen bleibt. Mit der neuen CSS-Option „accent-color“ können Sie diese Elemente gezielt einsetzen.
So können Sie zum Beispiel allen Optionsfeldern auf Ihrer Seite eine magentafarbene Farbe zuweisen, wie in der folgenden Abbildung gezeigt wird
Abbildung 1. Kontrolle der Farben von Optionsfeldern in CSS
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>Scroll snap
CSS bietet eine Reihe praktischer Eigenschaften zur Steuerung des Einrastens beim Scrollen in einem Webbrowser. Einige Teile dieser Funktionalität gibt es schon seit einigen Jahren, während andere erst in neueren Browser-Versionen eingeführt werden.
Interessant ist, dass mehr als ein Drittel der CSS-Benutzer immer noch nichts von Scroll Snap wissen.
Der Eigenschaftsbefehl scroll-snap-* bietet eine Reihe von Möglichkeiten zur Feinabstimmung der Bildlaufposition in einem Container. Entwickler erhalten mehr Präzision, und Endbenutzer erhalten ein flüssigeres, kontrollierteres Benutzererlebnis.
Abbildung 2 zeigt ein simples Beispiel für die Steuerung des Scroll-Snaps bei einem div.
Abbildung 2. Einfaches Beispiel für Scroll Snap
<style>
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>Unabhängig davon, wo Sie die Bildlaufbewegung auslösen, wird die y-Bildlaufposition in der folgenden Abbildung 3 automatisch auf das untergeordnete Element verschoben. Das liegt daran, dass der Scroll-Container die Eigenschaft scroll-snap-type auf y mandatory eingestellt hat und die untergeordneten Elemente die Deklaration scroll-snap-align: start haben.
Sie können dieses Verhalten auch ändern. Sie könnten zum Beispiel die Eigenschaft scroll-snap-type auf y proximity setzen. Das funktioniert so, wie Sie es erwarten würden, und rastet nur ein, wenn sich der Bildlauf der Nähe des Elements nähert.
Nebenbei bemerkt können Sie mit der verwandten Eigenschaft overscroll-behavior festlegen, wie sich verschachtelte Scroll-Container verhalten.
CSS – Logical Properties
Wenn Sie jemals einen Containerrand links und rechts oder unten und oben festlegen wollten, haben Sie sich geärgert, dass Sie die Eigenschaften border-left und border-right bzw. border-top und border-bottom wortwörtlich ausschreiben mussten.
Das Problem ist, dass es keine Möglichkeit gibt, die Verknüpfungseigenschaft zu nutzen, ohne auch die Ränder zu beeinflussen, die Sie nicht manipulieren wollen. Diese Unannehmlichkeit gilt auch für Elemente wie padding und margins.
Mit dem Modul „Logical Properties“ von CSS können Sie die Schlüsselwörter „inline“ und „block“ verwenden, um auf abstrakte Weise auf Dinge zu verweisen. Wenn Sie sich auf links und rechts beziehen wollen, verwenden Sie inline; wenn Sie sich auf oben und unten beziehen wollen, verwenden Sie block.
Um beispielsweise einen Rahmen links und rechts von einem div zu setzen, könnten Sie z.B. den Code in Abbildung 3 verwenden.
Abbildung 3. Linkes und rechtes Padding mit logical inline
div {
border-inline: 10px dashed seagreen;
}Diese Abkürzungen sind für Rahmen nützlich, aber Sie können die logischen Schlüsselwörter inline und block auch in einer Vielzahl anderer Eigenschaften finden.
Die meisten Entwickler verwenden diese Abkürzungen, um die Textrichtung und den Schreibmodus zu beeinflussen. In diesen Fällen können Sie mit einer Eigenschaft wie padding-inline-end den hinteren Teil des Textes formatieren, unabhängig davon, welche Textrichtung aktiv ist. Grundsätzlich ermöglicht die Abstraktion von Inline und Block das Schreiben allgemeiner Stile, die für eine Vielzahl von Einstellungen gelten.
Abfragen von Containern
Container-Abfragen sind in CSS noch nicht vollständig stabilisiert, aber sie werden bald kommen. Sie werden einen großen Einfluss darauf haben, wie wir über Responsive Design denken. Die Grundidee ist, dass Sie einen Haltepunkt nicht nur auf der Grundlage von Viewport und Medien, sondern auch auf der Grundlage der Größe eines übergeordneten Containers setzen können.
Die Syntax ist noch nicht vollständig definiert, aber sie wird wahrscheinlich in etwa wie in Abbildung 4 aussehen.
Abbildung 4. @container
@container (max-width: 650px){ … }Stellen Sie sich vor, wie leistungsfähig die Feinabstimmung eines Layouts auf der Grundlage der Größe der verschiedenen Container sein wird, die sich in den verschachtelten Ebenen einer Benutzeroberfläche manifestieren. Dies ist eine ziemlich weitreichende Änderung, die wahrscheinlich eine Welle von Neuerungen auf der Benutzeroberfläche auslösen wird.
@when und @else
Während wir über die neue @container-Abfrage nachdenken, wussten Sie schon, dass die Unterstützung von bedingten @when- und @else-Abfragen ebenfalls am Horizont zu sehen ist? Sie wird noch von keinem der großen Browser unterstützt, aber diese Funktion wird in nicht allzu ferner Zukunft verfügbar sein.
Die @when- und @else-Abfragen ermöglichen einen bedingten, wenn/dann-ähnlichen Logikfluss beim Umgang mit Medien- und Support-Abfragen. Sie werden in zahlreichen komplexen CSS-Situationen und Layouts dazu beitragen, Sie zu entlasten.
Drei neue Farbpaletten
Seit jeher haben CSS-Anwender RGB-, HEX- und benannte Farben verwendet, um ihre Geräteanzeigen zu verschönern und zu beleben. In jüngerer Zeit wurde die Farbdeklaration im HSL-Stil eingeführt. Jetzt führt die CSS-Spezifikation neue Möglichkeiten zur Bezeichnung von Farben ein, nämlich hwb, lab und Lch.
HWB steht für Hue, Whiteness und Blackness. Es handelt sich dabei um eine nette Ergänzung, die sich durch ihre Lesbarkeit auszeichnet: Sie wählen eine Farbe und fügen dann Weiß und Schwarz hinzu.
Es wird von den aktuellen Versionen von Chrome, Firefox und Safari unterstützt. (Die Funktionsreferenz von Microsoft Edge schweigt seltsamerweise zu diesem Thema.) Wie RGB und HWL unterstützt es einen Alphakanal für Transparenz.
LCH, die Abkürzung für Lightness, Chroma und Hue (Helligkeit, Chroma und Farbton), zeichnet sich dadurch aus, dass es die Palette der verfügbaren Farben erweitert. Derzeit unterstützt nur Safari LCH.
LAB, abgeleitet von der CIE-LAB-Farbtheorie, ist der theoretischste der neuen Farbräume. Der Lab-Farbdeskriptor behauptet, den gesamten Bereich der vom Menschen wahrnehmbaren Farben zu umfassen, was eine ziemlich starke Aussage ist.
Wie LCH wird er derzeit nur von Safari unterstützt. Weitere Informationen über LAB für CSS finden Sie in der CSS-Dokumentation von Mozilla.
*Matthew Tyson ist Mitbegründer der Dark Horse Group, Inc. Er glaubt an Technologie, bei der der Mensch an erster Stelle steht. Wenn er nicht gerade Gitarre spielt, erkundet Matt das Hinterland und die philosophischen Gefilde. Er schreibt seit 2007 für JavaWorld.
Be the first to comment