Neue CSS-Funktionen, auf die Sie sich 2022 freuen können

Hier sind einige Cascading Style Sheets-Updates, die Sie nicht verpassen sollten, von wenig bekannten Scroll-Snap-Eigenschaften bis hin zu atemberaubenden neuen Farbpaletten.

CSS (Cascading Style Sheets) wurde 1996 eingeführt und ist immer noch eine wichtige, sich entwickelnde Komponente des Webentwicklungs-Stacks. CSS fügt wie andere lebende Sprachen immer neue Funktionen als Reaktion auf praktische Praktiken hinzu. Aufgrund der schnellen Entwicklung können sogar engagierte Entwickler neue Funktionen verpassen. Sehen Sie sich einige der nützlichsten Funktionen an, die in naher Zukunft zu CSS kommen werden.

Untergitter

CSS wurde seit seiner Einführung für eine Reihe ungeheurer Fehler kritisiert. Einige einfache Aufgaben, wie z. B. das Zentrieren von etwas in CSS, erfordern übermäßig komplexe Problemumgehungen und Fummelei.
Ein weiteres wichtiges Problem war das Erreichen eines vernünftigen Rasterlayouts, zumindest bis das CSS-Grid-Layout-Modul eingriff.

Ein Grid-Layout wird durch die display: grid-Deklaration angezeigt und ähnelt Flexbox insofern, als es Ihnen ermöglicht, rechteckige Layouts zu definieren und gleichzeitig Ihr Grid in zwei Dimensionen zu steuern.
Untersuchungen zufolge kennen die meisten CSS-Entwickler das Grid-Layout, und viele von uns verwenden es. (Vergessen Sie nicht, es auszuprobieren, wenn Sie es noch nicht getan haben!)

Subgrid ist eine brandneue und äußerst nützliche Funktion für das Grid-Layout-Modul. Mit der Subgrid-Funktion können Sie ein untergeordnetes Grid erstellen, das das Layout seines übergeordneten Grids erbt.

Im Gegensatz zum Verschachteln einer Rasteranzeige in einer anderen definiert das untergeordnete Raster seine eigenen Abmessungen und Lücken. Das Layout des übergeordneten Elements wird auf das Subgrid angewendet, wenn das Subgrid verwendet wird, aber das Subgrid kann bei Bedarf immer noch Aspekte des Layouts überschreiben.

Subgrid ist derzeit nur in Firefox 71 und höher verfügbar, aber es ist für Safari WebKit, Google Chrome und Microsoft Edge geplant. Ein Subgrid wird in Zukunft ein sehr nützliches Layout-Feature sein.

Akzentfarbe

Trotz ihrer Beliebtheit sind einige Display-Elemente notorisch schwer zu stylen. Beispielsweise werden Kontrollkästchen und Optionsfelder häufig durch ein benutzerdefiniertes Widget ersetzt, das ihr Verhalten nachahmt, während die Implementierung des Browsers verborgen wird. Sie können diese Elemente mit der neuen CSS-Akzentfarbe-Option anvisieren.

Beispielsweise könnten Sie, wie in Listing 1 gezeigt, allen Optionsfeldern auf Ihrer Seite eine magentafarbene Farbe zuweisen (siehe auch dieses Live-Beispiel).

Listing 1: CSS-Farbsteuerung für Optionsfelder

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Scroll-Snap

CSS bietet einen praktischen Satz von Eigenschaften zum Steuern der Scroll-Snap-Aktion in einem Webbrowser. Viele dieser Funktionen sind bereits in neueren Browserversionen verfügbar, andere befinden sich noch im Rollout.

Es ist erwähnenswert, dass mehr als ein Drittel der CSS-Benutzer Scroll-Snap immer noch nicht kennen.

Der Befehl scroll-snap-* properties bietet mehrere Optionen zur Feinabstimmung, wie die Bildlaufposition in einem Container funktioniert. Entwickler profitieren von erhöhter Präzision, während Endbenutzer von einer reibungsloseren, kontrollierteren Benutzererfahrung profitieren.

Listing 2 zeigt ein einfaches Beispiel, wie man den Scroll-Snap auf einem div steuert (siehe auch dieses Live-Beispiel).

Listing 2 ist ein Beispiel für einen einfachen 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>

Die y-Scroll-Position in Listing 3 wandert automatisch zum untergeordneten Element, egal wo Sie die Scroll-Bewegung loslassen. Dies liegt daran, dass die Scroll-Snap-Type-Eigenschaft des Scroll-Containers auf y gesetzt ist und die untergeordneten Elemente die Scroll-Snap-Align: Start-Deklaration haben.

Auch dieses Verhalten kann geändert werden. Sie könnten beispielsweise die Eigenschaft scroll-snap-type auf y in der Nähe setzen. Das funktioniert wie erwartet und rastet nur ein, wenn sich die Schriftrolle in der Nähe des Elements befindet.

Darüber hinaus steuert die zugehörige overscroll-behavior-Eigenschaft, wie sich verschachtelte Scroll-Container verhalten.

Logische CSS-Eigenschaften

Sie haben wahrscheinlich schon einmal erlebt, wie lästig es ist, die Eigenschaften border-left und border-right oder border-top, border-bottom wortwörtlich ausschreiben zu müssen, wenn Sie jemals einen Containerrahmen links und rechts oder unten und festlegen wollten oben. Das Problem ist, dass es keine Möglichkeit gibt, die Verknüpfungseigenschaft zu verwenden, ohne die Grenzen zu beeinflussen, die Sie nicht ändern möchten. Dies gilt auch für Elemente wie Padding und Margins.

Mit dem CSS Logical Properties-Modul können Sie auf abstrakte Weise auf Dinge verweisen, indem Sie die Schlüsselwörter inline und block verwenden. Wenn Sie sich auf links und rechts beziehen, verwenden Sie inline; Wenn Sie sich auf oben und unten beziehen, verwenden Sie block. Um beispielsweise links und rechts von einem div einen Rahmen hinzuzufügen, verwenden Sie den Code in Listing 3. (Siehe auch ein Live-Beispiel hier).

Listing 3: Linkes und rechtes Padding mit Inline-Logik

 div { border- inline : 10px dashed seagreen; }

Dies sind nützliche Abkürzungen für Rahmen, aber die logischen Schlüsselwörter inline und block können auch in einer Vielzahl anderer Eigenschaften gefunden werden.

Die Mehrheit der Entwickler verwendet diese Verknüpfungen, um Probleme mit der Textrichtung und dem Schreibmodus zu lösen. In diesen Fällen können Sie mit einer Eigenschaft wie padding-inline-end unabhängig von der Textrichtung auf die nachfolgende Auffüllung abzielen.

Im Wesentlichen ermöglicht die Abstraktion zu Inline und Block die Erstellung allgemeiner Stile, die auf eine Vielzahl von Situationen angewendet werden können. Weitere Informationen finden Sie unter CSS Logical Properties and Values.

Containersuche

Containerabfragen sind in CSS noch nicht vollständig stabil, aber das wird bald der Fall sein. Sie werden einen erheblichen Einfluss darauf haben, wie wir über Responsive Design denken. Die Grundidee ist, dass Sie einen Haltepunkt basierend auf der Größe eines übergeordneten Containers und nicht nur auf dem Ansichtsfenster und den Medien festlegen können.

Es gibt keine klare Definition der Syntax, aber sie wird wahrscheinlich Listing 4 ähneln.

@container Listing 4.

 @container (max-width: 650px){ … }

Überlegen Sie, wie leistungsfähig es sein wird, ein Layout basierend auf der Größe verschiedener Container zu optimieren, die in den verschachtelten Ebenen einer Benutzeroberfläche angezeigt werden. Dies ist eine ziemlich bedeutende Änderung, die mit ziemlicher Sicherheit eine Welle von Schnittstelleninnovationen auslösen wird.

Drei neue Farbschemata

CSS-Anwender verwenden seit jeher RGB-, HEX- und benannte Farben, um Gerätedisplays zu verschönern und zu beleben. Die Farbdeklaration im HSL-Stil wurde kürzlich eingeführt. Die CSS-Spezifikation führt jetzt neue Farbdeskriptoren ein, nämlich hwb, lab und lch.

HWB ist eine Abkürzung für Hue, Whiteness und Blackness. Es ist eine nette Geste, die sich durch seine menschliche Lesbarkeit auszeichnet – Sie wählen eine Farbe und fügen dann Weiß und Schwarz hinzu. Es ist mit den neuesten Versionen von Chrome, Firefox und Safari kompatibel. (Die Funktionsreferenz von Microsoft Edge ist zu diesem Thema seltsamerweise ohrenbetäubend still.) Um mehr über HWB zu erfahren, siehe hwb() – eine Farbnotation für Menschen? Es hat wie RGB und HWL einen Alphakanal für Transparenz.

LCH, was für Helligkeit, Chroma und Farbton steht, zeichnet sich durch die Erweiterung der verfügbaren Farbpalette aus. Was, warum und wie werden LCH-Farben in CSS verwendet? Dies ist ein guter Überblick, der eine aufschlussreiche Diskussion der Farbtheorie in CSS enthält. LCH wird derzeit nur von Safari unterstützt.

Der theoretischste der neuen Farbräume ist LAB, der von der CIE-LAB-Farbtheorie abgeleitet ist. Der Laborfarbdeskriptor behauptet, das gesamte Spektrum der vom Menschen wahrnehmbaren Farben abzudecken, was eine gewagte Behauptung ist. Es wird wie LCH derzeit nur von Safari unterstützt. Weitere Informationen zu LAB für CSS finden Sie in der Mozilla CSS-Dokumentation.