Was sollte jemand über CSS lernen, wenn er sich zuletzt mit CSS3 beschäftigt hat?

html {
  --bgColor: #70f1d9;
  
  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

CSS Custom Properties

Custom properties sind ebenfalls aus mehreren Gründen wichtig. Sie können als zentrale Stelle für Design-Tokens in Ihrem Projekt dienen, wodurch ein Projekt leichter zu warten und konsistent zu halten ist. Farbthematisierung ist ein wichtiger Anwendungsfall, wie z.B. der Dark Mode.

Sie können mit Custom Properties sogar ganze Websites gestalten. Und in diesem Zusammenhang dürfen Sie Tailwind heutzutage nicht ignorieren. Der Ansatz, eine ganze Website mit Klassen in HTML zu stylen, spricht viele Leute an (und stößt viele Leute vor den Kopf, also keine Sorge, wenn es Ihnen nicht zusagt).

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

Präferenz-Queries

Präferenz-Queries sind im Allgemeinen @media-Queries, wie wir sie seit Jahren verwenden, um auf unterschiedliche Browsergrößen zu reagieren, aber sie enthalten jetzt Möglichkeiten, spezifische Benutzereinstellungen auf OS-Ebene zu erkennen. Zwei Beispiele sind prefers-reduced-motion und prefers-color-scheme. Diese ermöglichen es uns, Benutzeroberflächen zu erstellen, die die ideale Erfahrung eines Benutzers besser respektieren. Lesen Sie Unas Beitrag.

.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

Farbänderungen

Die Farbsyntax bewegt sich hin zu Funktionen, die Alpha (Transparenz) akzeptieren, ohne den Funktionsnamen ändern zu müssen. Wenn Sie zum Beispiel in den CSS3-Zeiten reines Blau wollten, könnten Sie rgb(0, 0, 255) verwenden. Heute können Sie es jedoch ohne Kommas (beides funktioniert) verwenden: rgb(0 0 255), und dann Alpha hinzufügen, ohne eine andere Funktion zu verwenden: rgb(0 0 255 / 0.5). Genauso bei hsl(). Nur eine kleine Nettigkeit, und so werden zukünftige Farbfunktionen nur funktionieren.

Apropos zukünftige Farbsynthesen

• P3-Farben oder „display-p3“ kommen über die color()-Funktion.
• lab()-Farbe ist ein weiterer neuer Farbraum. Er „repräsentiert den gesamten Farbbereich, den Menschen sehen können.“
• lch() ist ein weiterer neuer Farbraum.
• hwb() ist ein weiterer neuer Farbraum für Menschen.

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Variable Fonts

Web-Schriften wurden in CSS3 zu einem wichtigen Thema. Jetzt gibt es variable Fonts. Sie sollten wissen, dass sie existieren. Sie eröffnen coole Designmöglichkeiten und können manchmal gut für die Leistung sein (z. B. muss man nicht mehr verschiedene Schriftdateien für fette und kursive Versionen derselben Schrift laden). Es gibt auch Farbschriften, aber ich würde sagen, sie haben im Web noch keine große Popularität erlangt, trotz der Unterstützung.

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}

.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

Pfade

SVG ist seit CSS3 ebenfalls explodiert. Sie könnenbeliebige Elemente direkt in Formen zuschneiden, indem Sie clip-path verwenden und SVG-ähnliche Eigenschaften auf CSS übertragen. Nicht nur das, sondern Sie können Elemente entlang von Pfaden animieren, Elemente entlang von Pfaden fließen lassen und sogar die Pfade von SVG-Elementen aktualisieren.

Diese fühlen sich für mich alle irgendwie spirituell verbunden an

• clip-path – ermöglicht es uns, Elemente buchstäblich in Formen zu schneiden.
• masks – ähnlich wie Clipping, aber eine Maske kann andere Eigenschaften haben, wie z. B. die Basierung auf dem Alpha-Kanal der Maske.
• offset-path – bietet einen Pfad, auf dem ein Element platziert werden kann, im Allgemeinen zum Zweck, es entlang dieses Pfads zu animieren.
• shape-outside – bietet einen Pfad auf einem gefloateten Element, um den herum andere Elemente umbrechen.
• d – das d-Attribut eines SVG in einem <path> kann per CSS aktualisiert werden.

.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
} 

CSS-Filter

Es ist heutzutage viel Bildmanipulation (ganz zu schweigen von anderen DOM-Elementen) direkt in CSS möglich. Es gibt buchstäblich filter, aber es hat Freunde und sie haben alle unterschiedliche Verwendungszwecke.

Diese fühlen sich alle irgendwie spirituell verbunden an

• filter – alle möglichen nützlichen Photoshop-ähnlichen Effekte wie Helligkeit, Kontrast, Graustufen, Sättigung usw. Weichzeichnen ist eine wirklich einzigartige Fähigkeit.
• background-blend-mode – ebenfalls an Photoshop angelehnt, da man Ebenen mischen kann. Ebenen multiplizieren, um abzudunkeln und zu kombinieren. Überlagern, um Hintergrund und Farbe zu mischen. Aufhellen und abdunkeln sind klassische Effekte, die im Webdesign echten Nutzen haben, und man weiß nie, wann ein obskurerer Beleuchtungseffekt einen coolen Look erzeugt.
• backdrop-filter – die gleichen Fähigkeiten, die Sie mit filter haben, aber sie gelten nur für den Hintergrund und nicht für das gesamte Element. Nur den Hintergrund weichzuzeichnen ist ein besonders nützlicher Effekt.
• mix-blend-mode – die gleichen Fähigkeiten, die Sie mit background-blend-mode haben, aber für das gesamte Element anstatt nur auf Hintergründe beschränkt.

import "https://unpkg.com/extra.css/confetti.js";

body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

Houdini

Houdini ist eigentlich eine Sammlung von Technologien, die alle im Wesentlichen darauf basieren, CSS mit JavaScript zu erweitern, oder zumindest an der Schnittstelle von CSS und JavaScript.

• Paint API – gibt ein Bild zurück, das aus Canvas-APIs aufgebaut ist und durch benutzerdefinierte Eigenschaften gesteuert werden kann.
• Properties & Values API / Typed OM – weist Werten Typen zu (z. B. 10px), die sonst Zeichenketten gewesen wären.
• Layout API – erstellen Sie Ihre eigenen display-Eigenschaften.
• Animation API

Zusammengenommen ergeben diese einige wirklich beeindruckende Demos, obwohl die Browserunterstützung verstreut ist. Ein Teil der Magie von Houdini ist, dass es als Worklets geliefert wird, die ziemlich einfach zu importieren und zu verwenden sind, so dass es das Potenzial hat, leistungsstarke Funktionalität zu modularisieren und sie trivial einfach zu verwenden.

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

Shadow DOM

Das Shadow DOM kommt immer wieder mal vor, wenn Sie mit <svg> und dem <use>-Element gearbeitet haben. Das „geklonte“ Element, das durchkommt, hat ein Shadow DOM, das Einschränkungen hat, wie Sie „hindurch“ auswählen können. Dann, wenn Sie sich mit <web-components> beschäftigen, ist es dieselbe Leier.

Wenn Sie feststellen, dass Sie Web-Komponenten stylen müssen, wissen Sie, dass es von außen gesehen im Wesentlichen vier Optionen gibt. Und es könnte Sie interessieren, von nativen CSS-Modulen und konstruierbaren Stylesheets zu erfahren.