Web-Styling-Funktionen von heute und morgen, wie auf der Google IO 2022 vorgestellt, sowie einige Extras.
2022 gehört zu den besten Jahren von Preisvergleichsportalen – sowohl bei der Veröffentlichung von Funktionen als auch bei der Veröffentlichung kooperativer Browserfunktionen – mit dem gemeinsamen Ziel, 14 Funktionen zu implementieren.
an.Überblick
Dieser Beitrag ist die Artikelform des Vortrags auf der Google I/O 2022. Es handelt sich nicht um einen detaillierten Leitfaden zu den einzelnen Funktionen, sondern um eine Einführung und einen kurzen Überblick, um Ihr Interesse zu wecken. Wenn Sie Interesse haben, finden Sie am Ende eines Abschnitts Links zu weiteren Informationen.
Inhaltsverzeichnis
Über die folgende Liste gelangen Sie zu den Themen, die Sie interessieren:
Browserkompatibilität
Einer der Hauptgründe dafür, dass so viele CSS-Funktionen auf eine gemeinsame Veröffentlichung festgelegt werden, ist auf die Bemühungen von Interop 2022 zurückzuführen. Bevor Sie sich mit den Interop-Initiativen befassen, sollten Sie sich die Initiativen von Compat 2021 ansehen.
Compat 2021
Die Ziele für das Jahr 2021, basierend auf dem Feedback von Entwicklern in Umfragen, waren es, aktuelle Funktionen zu stabilisieren, die Testsuite zu verbessern und die Mindestpunktzahl für die Prüfung der Browser für fünf Funktionen zu erhöhen:
sticky– Positionierung- Größe:
aspect-ratio - Layout:
flex - Layout:
grid transform– Positionierung und Animation
Die Testergebnisse wurden in allen Bereichen verbessert, was erhöhte Stabilität und Zuverlässigkeit unter Beweis stellte. Herzlichen Glückwunsch an die Teams!
Interop 2022
In diesem Jahr trafen sich Browser, um die Funktionen und Prioritäten zu erörtern, an denen sie arbeiten wollten und so ihre Bemühungen vereinen. Geplant war, die folgenden Webfunktionen für Entwickler zur Verfügung zu stellen:
@layer- Farbräume und Funktionen
- Eindämmung
<dialog>- Formularkompatibilität
- Scrollen
- Subgrid
- Typografie
- Einheiten des Darstellungsbereichs
- Webkompatibel
Dies ist eine spannende und ehrgeizige Liste, und ich kann es kaum erwarten, die Entwicklung zu sehen.
Neu für 2022
Wenig überraschend wird der Stand von CSS 2022 von der Interop-Initiative 2022 erheblich beeinflusst.
Ebenen übereinander weitergeben
Vor dem @layer war die erkannte Reihenfolge geladener Stylesheets sehr wichtig, da zuletzt geladene Stile überschrieben werden können. Dies führte zu akribisch verwalteten Stylesheets für Einträge, bei denen Entwickler zuerst weniger wichtige und später wichtigere Stile laden mussten. Es gibt ganze Methoden wie ITCSS, um Entwicklern dabei zu helfen, dieser Wichtigkeit entgegenzuwirken.
Mit @layer können in der Eintragsdatei Ebenen und ihre Reihenfolge im Voraus vordefiniert werden. Wenn Stile geladen, geladen oder definiert werden, können sie in einer Ebene platziert werden. So bleibt die Wichtigkeit der Stilüberschreibung erhalten, aber ohne die akribisch verwaltete Ladeorchestrierung.
Das Video zeigt, wie die definierten Kaskadenebenen einen freieren und Freestyle-Erstellungs- und Ladeprozess ermöglichen, während die Kaskade bei Bedarf beibehalten wird.
Mit den Chrome-Entwicklertools lässt sich visualisieren, welche Stile aus welchen Ebenen stammen:
Ressourcen
- CSS Cascade 5 – Spezifikation
- Erläuterung der Kaskadenebenen
- Ebenen über MDN kaskadieren
- Una Kravets: Kaskadenschichten
- Ahmad Shadeed: Hello, CSS Cascade Layers
Subgrid
Vor dem subgrid konnte ein Raster in einem anderen Raster nicht an den übergeordneten Zellen oder Rasterlinien ausgerichtet werden. Jedes Rasterlayout war einzigartig. Viele Designer platzieren ein einzelnes Raster über das gesamte Design und richten Elemente ständig darin aus, was in CSS nicht möglich wäre.
Nach subgrid kann ein untergeordnetes Raster die Spalten oder Zeilen seiner übergeordneten Elemente als eigene verwenden und sich selbst oder untergeordnete Elemente an ihnen ausrichten.
In der folgenden Demo erstellt das Textelement ein klassisches Raster aus drei Spalten: Die mittlere Spalte heißt main und die linke und rechte Spalte benennen ihre Linien
fullbleed. Dann übernimmt jedes Element im Textkörper (<nav> und <main>) die benannten Zeilen aus dem Textkörper, indem es grid-template-columns: subgrid festlegt.
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
Schließlich können untergeordnete Elemente von <nav> oder <main> sich mithilfe der Spalten und Linien fullbleed und main ausrichten oder ihre Größe anpassen.
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
Mit den Entwicklertools können Sie die Linien und Unterraster anzeigen (derzeit nur Firefox). In der folgenden Abbildung wurden das übergeordnete Raster und die Unterraster überlagert. Es ähnelt jetzt der Herangehensweise der Designschaffenden über das Layout.
Im Bereich „Elemente“ der Entwicklertools sehen Sie, welche Elemente Raster und Unterraster sind. Dies ist sehr hilfreich bei der Fehlerbehebung oder Validierung des Layouts.
Ressourcen
Containerabfragen
Vor dem @container konnten Elemente einer Webseite nur auf die Größe des gesamten Darstellungsbereichs reagieren. Das ist großartig für Makro-Layouts geeignet, aber bei Mikro-Layouts, bei denen der äußere Container nicht den gesamten Darstellungsbereich umfasst, ist es unmöglich, das Layout entsprechend anzupassen.
Nach dem @container können Elemente auf die Größe oder den Stil eines übergeordneten Containers reagieren.
Der einzige Nachteil besteht darin, dass die Container sich als mögliche Abfrageziele deklarieren müssen, was eine geringe Anforderung mit großem Nutzen ist.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
Diese Stile sorgen dafür, dass die Spalten Mo, Di, Wed, Do und Fr im folgenden Video von den Ereigniselementen abgefragt werden können.
Hier sehen Sie den CSS-Code, mit dem der calendar-day-Container bezüglich seiner Größe abgefragt wird, um anschließend das Layout und die Schriftgrößen anzupassen:
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}
Ein weiteres Beispiel: Eine Buchkomponente passt sich automatisch an den verfügbaren Platz in der Spalte an, in die sie gezogen wird:
Una hat die Situation korrekt als die neue responsive Website bewertet. Bei der Verwendung von @container müssen viele interessante und aussagekräftige Designentscheidungen getroffen werden.
Ressourcen
- Container-Abfragen-Spezifikation
- Erläuterung zu Containerabfragen
- Containerabfragen in MDN
- Das neue responsive auf web.dev
- Google Kalender-Demo von Una
- Attraktive Sammlung von Containerabfragen
- So haben wir Designcember auf web.dev entwickelt
- Ahmad Shadeed: Say Hallo zu CSS-Containerabfragen
accent-color
Wenn Sie vor accent-color ein Formular mit markenkonformen Farben wollten, wurden am Ende komplexe Bibliotheken oder CSS-Lösungen verwendet, die im Laufe der Zeit schwer zu verwalten waren. Sie boten Ihnen zwar alle Optionen und sollten hoffentlich auch Bedienungshilfen enthalten, die Entscheidung, die integrierten Komponenten zu verwenden oder eigene zu verwenden, wird jedoch mühsam und mühsam weiter.
Nach accent-color bringt eine Zeile CSS eine Markenfarbe in die integrierten Komponenten. Zusätzlich zur Färbung wählt der Browser auf intelligente Weise kontrastierende Farben für Zusatzteile der Komponente und passt sich an das Farbschema des Systems (hell oder dunkel) an.
/* tint everything */
:root {
accent-color: hotpink;
}
/* tint one element */
progress {
accent-color: indigo;
}
Weitere Informationen zu accent-color findest du in meinem Beitrag auf web.dev, in dem ich viele weitere Aspekte dieser nützlichen CSS-Property erläutere.
Ressourcen
- accent-color-Spezifikation
- accent-Farbe in der MDN
- accent-color auf web.dev
- Bramus: Tint User-Interface Controls with CSS accent-color
Farbstufe 4 und 5
sRGB war in den letzten Jahrzehnten dominiert, aber in einer wachsenden digitalen Welt mit hochauflösenden Bildschirmen und Mobilgeräten mit OLED- oder QLED-Bildschirmen reicht sRGB nicht aus. Darüber hinaus werden dynamische Seiten erwartet, die sich an die Präferenzen der Nutzer anpassen, und Farbmanagement ist ein zunehmendes Anliegen für Designer, Designsysteme und Code-Administrator.
Seit 2022 jedoch nicht. CSS hat eine Reihe neuer Farbfunktionen und -räume: – Farben, die den HD-Farbfunktionen von Displays entsprechen. – Farbräume, die einer Absicht entsprechen, z. B. einheitliche Wahrnehmung – Farbräume für Farbverläufe, die die Interpolationsergebnisse drastisch verändern. – Farbfunktionen zum Mischen und Kontrasten und zur Auswahl des Raums, in dem Sie arbeiten.
Vor all diesen Farbmerkmalen mussten Designsysteme entsprechende kontrastierende Farben im Voraus berechnen und für entsprechend lebendige Farben sorgen, während Präprozessoren oder JavaScript die Arbeit übernahmen.
Nach all diesen Farbfunktionen erledigen Browser und CSS die ganze Arbeit, dynamisch und gerade rechtzeitig. Anstatt viele CSS- und JavaScript-KB an Nutzer zu senden, um Designs und Farben für die Datenvisualisierung zu ermöglichen, kann CSS die Orchestrierung und die Berechnungen übernehmen. CSS ist auch besser in der Lage, vor der Nutzung zu überprüfen, ob Fallbacks unterstützt werden, oder um Fallbacks ordnungsgemäß zu verarbeiten.
@media (dynamic-range: high) {
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.neon-pink {
--neon-glow: lab(150% 160 0);
}
}
hwb()
HWB steht für „Hue“, „Whiteness“ und „Blackness“. Es präsentiert sich als menschenfreundliche Art, Farbe zu artikulieren, da nur ein Farbton und ein wenig Weiß oder Schwarz zum Aufhellen oder Abdunkeln verwendet werden. Künstler, die Farben mit Weiß oder Schwarz mischen, werden diese zusätzliche Farbsyntax schätzen besonders.
Mit dieser Farbfunktion werden Farben aus dem sRGB-Farbraum erzeugt, genau wie bei HSL und RGB. Für 2022 bedeutet das keine neuen Farben, aber Fans, die sich mit Syntax und mentalem Modell beschäftigen, können dadurch einige Aufgaben einfacher machen.
Ressourcen
Farbräume
Die Darstellung von Farben erfolgt durch einen Farbraum. Jeder Farbraum bietet verschiedene Funktionen und Vor- und Nachteile beim Arbeiten mit Farben. Einige bündeln möglicherweise alle hellen Farben, andere werden aufgrund ihrer Helligkeit zuerst ausgerichtet.
2022 wird CSS zehn neue Farbräume mit einzigartigen Funktionen anbieten, die Designer und Entwickler beim Anzeigen, Auswählen und Mischen von Farben unterstützen. Früher war sRGB die einzige Option für die Arbeit mit Farben, aber jetzt eröffnet CSS neue Möglichkeiten und einen neuen Standardfarbraum, LCH.
color-mix()
Vor dem color-mix() benötigten Entwickler und Designer Präprozessoren wie Sass, um die Farben zu mischen, bevor der Browser sie erkennt.
Bei den meisten Farbmischfunktionen war es auch nicht möglich anzugeben, welcher Farbraum für das Einmischen verwendet werden soll. Dies führte manchmal zu verwirrenden Ergebnissen.
Nach color-mix() können Entwickler und Designer Farben im Browser sowie alle anderen Stile mischen, ohne Build-Prozesse ausführen oder JavaScript verwenden zu müssen. Außerdem kann der Farbraum für das Einmischen angegeben oder der Standardfarbraum von LCH verwendet werden.
Oft wird eine Markenfarbe als Grundlage verwendet und daraus Varianten erstellt, z. B. hellere oder dunklere Farben für Hover-Stile. Mit color-mix() sieht das so aus:
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
Wenn Sie diese Farben in einem anderen Farbraum mischen möchten, z. B. srgb, ändern Sie ihn:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
Hier sehen Sie eine Themendemo mit color-mix(). Ändern Sie die Markenfarbe
und sehen Sie sich die Aktualisierung des Designs an:
Freuen Sie sich 2022 darauf, in Ihren Stylesheets Farben in verschiedenen Farbräumen zu mischen!
Ressourcen
- color-mix() – Spezifikation
- color-mix() in MDN
- Designdemo
- Eine weitere Themendemo
- Fabio Giolito: Farbdesign mit folgenden CSS-Funktionen erstellen
color-contrast()
Vor dem color-contrast() mussten Stylesheet-Autoren bereits im Voraus wissen, welche Farben barrierefrei sind. Häufig zeigt eine Palette schwarzen oder weißen Text auf einem Farbmuster, um einem Nutzer des Farbsystems zu zeigen, welche Textfarbe erforderlich ist, um einen angemessenen Kontrast zu diesem Muster zu erzielen.
Nach color-contrast() können Stylesheet-Autoren die Aufgabe vollständig in den Browser übertragen. Sie können den Browser nicht nur so einstellen, dass automatisch schwarze oder weiße Farben ausgewählt werden. Sie können ihm auch eine Liste mit vom Designsystem geeigneten Farben zur Verfügung stellen und ihn die erste auswählen lassen, die das gewünschte Kontrastverhältnis übergibt.
Hier ist ein Screenshot einer Demo des HWB-Farbpalettensatzes, in der die Textfarben automatisch vom Browser anhand der Musterfarbe ausgewählt werden:
Die Grundlagen der Syntax sehen so aus, wobei Grau an die Funktion übergeben wird und der Browser bestimmt, ob Schwarz oder Weiß den meisten Kontrast hat:
color: color-contrast(gray);
Die Funktion kann auch mit einer Liste von Farben angepasst werden, aus der dann die Farbe mit dem höchsten Kontrast ausgewählt wird:
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
Wenn Sie nicht die Farbe mit dem höchsten Kontrast aus der Liste auswählen möchten, kann ein Zielkontrastverhältnis angegeben werden. Die erste Farbe, die übergeben werden soll, wird ausgewählt:
color: color-contrast(
var(--bg-blue-1)
vs
var(--text-lightest), var(--text-light), var(--text-subdued)
to AA /* 4.5 could also be passed */
);
Diese Funktion kann nicht nur für die Textfarbe verwendet werden, obwohl ich schätze, dass dies der primäre Anwendungsfall sein wird. Überlegen Sie, wie viel einfacher es sein wird, barrierefreie und gut lesbare Oberflächen bereitzustellen, wenn die Auswahl der richtigen Kontrastfarben in die CSS-Sprache selbst integriert ist.
Ressourcen
Syntax für relative Farben
Vor der relativen Farbsyntax mussten die Farbkanäle einzeln in den benutzerdefinierten Eigenschaften platziert werden, um die Farbe zu berechnen und Anpassungen vorzunehmen. Durch diese Einschränkung wurde HSL auch zur primären Farbfunktion zur Anpassung von Farben, da der Farbton, die Sättigung oder die Helligkeit mit calc() einfach angepasst werden konnte.
Nach der relativen Farbsyntax kann jede Farbe in einem beliebigen Bereich in einer einzigen CSS-Zeile dekonstruiert, geändert und als Farbe zurückgegeben werden. Keine Einschränkungen mehr für HSL: Es können in jedem gewünschten Farbraum Änderungen vorgenommen werden und es müssen wesentlich weniger benutzerdefinierte Eigenschaften erstellt werden, um dies zu ermöglichen.
Im folgenden Syntaxbeispiel wird ein Basis-Hexadezimalwert angegeben und relativ dazu werden zwei neue Farben erstellt. Mit der ersten Farbe --absolute-change wird aus der Grundfarbe eine neue Farbe in LCH erstellt. Anschließend wird die Helligkeit der Grundfarbe durch 75% ersetzt. Dabei werden Chroma (c) und Farbton (h) beibehalten. Mit der zweiten Farbe --relative-change wird aus der Grundfarbe eine neue Farbe in LCH aus der Grundfarbe erstellt. Dies reduziert dieses Mal jedoch den Farbton (c) um 20%.
.relative-color-syntax {
--color: #0af;
--absolute-change: lch(from var(--color) 75% c h);
--relative-change: lch(from var(--color) l calc(c-20%) h);
}
Es ist vergleichbar mit dem Mischen von Farben, aber es ähnelt eher einer Änderung als einer Mischung. Sie können eine Farbe von einer anderen Farbe umwandeln und so auf die drei Kanalwerte zugreifen, die nach der verwendeten Farbfunktion benannt sind. Außerdem haben Sie die Möglichkeit, diese Kanäle anzupassen. Insgesamt ist dies eine sehr coole und leistungsstarke Syntax für Farben.
In der folgenden Demo habe ich die relative Farbsyntax verwendet, um hellere und dunklere Varianten einer Grundfarbe zu erstellen. Außerdem habe ich mit color-contrast() dafür gesorgt, dass die Labels den richtigen Kontrast haben:
Diese Funktion kann auch zum Generieren von Farbpaletten verwendet werden. In dieser Demo werden ganze Paletten anhand einer angegebenen Grundfarbe generiert. Dieser eine CSS-Satz unterstützt alle verschiedenen Paletten. Jede Palette stellt einfach eine andere Basis bereit. Ich habe LCH verwendet, aber ich sehe auch, wie wahrnehmbar sogar die Paletten sind. Dank des Farbraums sind keine heißen oder toten Flecken mehr zu sehen.
:root {
--_color-base: #339af0;
--color-0: lch(from var(--_color-base) 98% 10 h);
--color-1: lch(from var(--_color-base) 93% 20 h);
--color-2: lch(from var(--_color-base) 85% 40 h);
--color-3: lch(from var(--_color-base) 75% 46 h);
--color-4: lch(from var(--_color-base) 66% 51 h);
--color-5: lch(from var(--_color-base) 61% 52 h);
--color-6: lch(from var(--_color-base) 55% 57 h);
--color-7: lch(from var(--_color-base) 49% 58 h);
--color-8: lch(from var(--_color-base) 43% 55 h);
--color-9: lch(from var(--_color-base) 39% 52 h);
--color-10: lch(from var(--_color-base) 32% 48 h);
--color-11: lch(from var(--_color-base) 25% 45 h);
--color-12: lch(from var(--_color-base) 17% 40 h);
--color-13: lch(from var(--_color-base) 10% 30 h);
--color-14: lch(from var(--_color-base) 5% 20 h);
--color-15: lch(from var(--_color-base) 1% 5 h);
}
Hoffentlich können Sie nun sehen, wie Farbräume und verschiedene Farbfunktionen basierend auf ihren Stärken und Schwächen für unterschiedliche Zwecke verwendet werden können.
Ressourcen
- Spezifikation für die relative Farbsyntax
- Farbpaletten mit relativer Farbsyntax erstellen
- Farbvarianten mit relativer Farbsyntax erstellen
Farbräume des Farbverlaufs
Vor Farbräumen für Farbverlauf war sRGB der Standardfarbraum. sRGB ist im Allgemeinen zuverlässig, hat aber einige Schwächen wie die graue Totzone.
Teilen Sie dem Browser nach den Farbräumen des Farbverlaufs mit, welcher Farbraum für die Farbinterpolation verwendet werden soll. So können Entwickelnde und Designschaffende den von ihnen bevorzugten Farbverlauf auswählen. Der Standardfarbraum ändert sich ebenfalls in LCH anstelle von sRGB.
Die Syntaxergänzung folgt auf die Gradientenrichtung, verwendet die neue in-Syntax und ist optional:
background-image: linear-gradient(
to right in hsl,
black, white
);
background-image: linear-gradient(
to right in lch,
black, white
);
Hier sehen Sie einen grundlegenden und wesentlichen Farbverlauf von Schwarz nach Weiß. Sehen Sie sich den Ergebnisbereich in jedem Farbraum an. Einige erreichen dunkles Schwarz früher als andere, andere verblassen zu spät zu Weiß.
Im nächsten Beispiel wird Schwarz in Blau übergegangen, da dies ein bekannter Problembereich für Farbverläufe ist. Die meisten Farbräume kriechen bei der Farbinterpolation in Lila oder, wie ich es mir gerne vorstelle, wenn sich Farben innerhalb ihres Farbraums von Punkt A nach Punkt B bewegen. Da der Farbverlauf eine gerade Linie von Punkt A zu Punkt B nimmt, verändert die Form des Farbraums die Haltestellen auf dem Weg drastisch.
Ausführlichere Analysen, Beispiele und Kommentare finden Sie in diesem Twitter-Thread.
Ressourcen
- Spezifikation für die Gradienteninterpolation
- Demo zum Vergleich von Farbverläufen in Gruppenbereichen
- Beobachtbares Notebook, das Gradienten vergleicht
inert
Vor dem inert hat es sich bewährt, den Fokus des Nutzers auf Bereiche der Seite oder App zu lenken, die sofortige Aufmerksamkeit erfordern. Diese geführte Fokusstrategie wurde als „Focus Trapping“ bekannt, da Entwickler den Fokus auf einen interaktiven Bereich legen, auf Fokusänderungsereignisse warteten und, wenn der Fokus den interaktiven Bereich verlassen würde, wieder in diesen Bereich hineingezogen wurde. Nutzer mit Tastaturen oder Screenreadern werden zurück zum interaktiven Bereich geleitet, um sicherzustellen, dass die Aufgabe abgeschlossen ist, bevor sie fortfahren.
Nach dem inert ist kein Einsetzen mehr erforderlich, da Sie ganze Bereiche der Seite oder App einfrieren oder schützen können. Klicks und Versuche, den Fokus zu ändern, sind einfach nicht verfügbar, solange diese Teile eines Dokuments inaktiv sind. Das kann man sich auch als Wachen anstelle einer Falle vorstellen, bei der inert nicht daran interessiert ist, dass Sie irgendwo bleiben, sondern andere Orte nicht verfügbar machen.
Ein gutes Beispiel dafür ist die JavaScript-Funktion alert():
Im vorherigen Video wurde bereits per Maus und Tastatur auf die Seite zugegriffen, bis ein alert() aufgerufen wurde. Sobald das Pop-up des Dialogfelds für Benachrichtigungen angezeigt wurde, war der Rest der Seite eingefroren (inert). Der Fokus des Nutzers liegt innerhalb des Dialogfelds für Benachrichtigungen und kann nirgendwo sonst geöffnet werden. Sobald der Nutzer mit der Anfrage interagiert und die Benachrichtigungsfunktion abgeschlossen hat, ist die Seite wieder interaktiv. Mit inert können Entwickler ganz einfach diese geführte Fokussierung durchführen.
Hier ist ein kleines Codebeispiel, das die Funktionsweise veranschaulicht:
<body>
<div class="modal">
<h2>Modal Title</h2>
<p>...<p>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>
Ein Dialogfeld ist ein gutes Beispiel, aber inert ist auch hilfreich, beispielsweise für das ausblendbare seitliche Menü. Zieht ein Nutzer aus dem seitlichen Menü aus dem seitlichen Menü, können Maus oder Tastatur nicht mit der dahinter liegenden Seite interagieren. Das ist für Nutzer etwas kompliziert. Wenn das seitliche Menü angezeigt wird, wird die Seite stattdessen inaktiv. Jetzt müssen Nutzer dieses seitliche Menü schließen oder darin navigieren. Sie verlieren sich nicht an eine andere Stelle auf der Seite mit einem geöffneten Menü.
Ressourcen
COLRv1-Schriftarten
Vor COLRv1-Schriftarten gab es im Web OT-SVG-Schriftarten, ebenfalls ein offenes Format für Schriftarten mit Farbverläufen sowie integrierten Farben und Effekten. Diese können jedoch sehr groß werden, und obwohl sie den Text bearbeiten konnten, bot es nicht viel Spielraum für Anpassungen.
Nach COLRv1-Schriftarten hat das Web weniger Platz und ist vektor skalierbar, neu positionierbar, mit Farbverlauf und im Mischmodus gestützt. Diese Schriftarten akzeptieren Parameter für die Anpassung der Schriftart an einen Anwendungsfall oder an eine Marke.
Hier ist ein Beispiel aus dem Blogpost für Chrome-Entwickler über Emojis. Vielleicht haben Sie bemerkt, dass die Schriftgröße eines Emojis nicht mehr scharf bleibt, wenn Sie die Schriftgröße erhöhen. Es handelt sich um ein Bild und keine Vektorgrafik. In Anwendungen werden Emojis häufig gegen ein hochwertigeres Asset ausgetauscht. Mit COLRv1-Schriftarten sind die Emojis vektor und schön:
Symbolschriftarten können mit diesem Format erstaunliche Dinge bewirken, z. B. benutzerdefinierte Duoton-Farbpaletten. Das Laden einer COLRv1-Schriftart funktioniert wie bei jeder anderen Schriftdatei:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
Die Anpassung der COLRv1-Schriftart erfolgt mit @font-palette-values, einer speziellen CSS-Regel (at-Rule) zum Gruppieren und Benennen einer Reihe von Anpassungsoptionen in einem Bundle, um später darauf zurückgreifen zu können. Wie für ein benutzerdefiniertes Attribut geben Sie einen benutzerdefinierten Namen an, der mit -- beginnt:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
Wenn --colorized als Alias für die Anpassungen verwendet wird, wenden Sie im letzten Schritt die Palette auf ein Element an, das die Farbschriftfamilie verwendet:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}
Da immer mehr variable Schriftarten und Farbschriftarten verfügbar sind, befinden sich die Webtypografie auf einem sehr hervorragenden Weg, umfassende Anpassungsmöglichkeiten und kreative Ausdrucksmöglichkeiten zu erreichen.
Ressourcen
- Colrv1-Spezifikation auf GitHub
- Chrome-Entwickler: Colrv1-Schriftarten
- Erklärvideo für BlinkOn-Entwickler
Einheiten des Darstellungsbereichs
Vor den neuen Varianten des Darstellungsbereichs bot das Web physische Einheiten für die Anpassung der Darstellungsbereiche. Es gab eine für Höhe, Breite, kleinste Größe (vmin) und größte Seite (vmax). Sie funktionierten in vielen Dingen gut, aber mit mobilen Browsern wurde die Komplexität erhöht.
Auf Mobilgeräten wird beim Laden einer Seite die Statusleiste mit der URL angezeigt und belegt einen Teil des Darstellungsbereichs. Nach einigen Sekunden und einer gewissen Interaktion verschwindet die Statusleiste möglicherweise weg, sodass der Darstellungsbereich größer ist. Wenn dieser Balken jedoch verschwindet, hat sich die Höhe des Darstellungsbereichs geändert und alle vh-Einheiten verschieben und ihre Größe, wenn sich ihre Zielgröße ändert.
In späteren Jahren musste die Einheit vh insbesondere entscheiden, welche der beiden Größen des Darstellungsbereichs verwendet werden sollte, da sie auf Mobilgeräten zu irritierenden Problemen mit dem visuellen Layout führte. Dabei wurde festgestellt, dass vh immer den größten Darstellungsbereich repräsentieren würde.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
Nachdem die neuen Varianten des Darstellungsbereichs zur Verfügung gestellt wurden, stehen kleine, große und dynamische Einheiten für den Darstellungsbereich zusammen mit logischen Äquivalenten. Ziel ist es, Entwicklern und Designern die Möglichkeit zu geben, die Einheit auszuwählen, die sie für ihr jeweiliges Szenario verwenden möchten. Wenn die Statusleiste nicht mehr angezeigt wird, kann eine kleine Verzerrung des Layouts in Ordnung sein. Dann kann dvh (Höhe des dynamischen Darstellungsbereichs) verwendet werden.
Hier finden Sie eine vollständige Liste aller Optionen für Darstellungsbereichseinheiten, die mit den neuen Varianten für Darstellungsbereich verfügbar sind:
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
Hoffentlich gibt sie Entwicklern und Designern die erforderliche Flexibilität, um responsive Designs für den Darstellungsbereich zu erstellen.
Ressourcen
- Spezifikation der relativen Einheiten des Darstellungsbereichs
- Bramus: The Large, Small, and Dynamic Viewports
:has()
Vor :has() befand sich das Subjekt eines Selektors immer am Ende. Das Thema dieses Selektors ist beispielsweise ein Listenelement: ul > li. Pseudoselektoren können den Selektor ändern, ohne den Betreff zu ändern: ul > li:hover oder ul >
li:not(.selected).
Nach :has() kann ein Subjekt, das sich weiter oben in der Elementstruktur befindet, das Subjekt bleiben, während eine Abfrage über untergeordnete Elemente gesendet wird: ul:has(> li). Es ist leicht verständlich, dass :has() den allgemeinen Namen „Parent-Selektor“ erhalten hat, da das Subjekt des Selektors in diesem Fall jetzt das übergeordnete Element ist.
Hier ist ein grundlegendes Syntaxbeispiel, bei dem die Klasse .parent das Thema bleibt, aber nur ausgewählt wird, wenn ein untergeordnetes Element die Klasse .child hat:
.parent:has(.child) {...}
Hier ist ein Beispiel, bei dem ein <section>-Element das Thema ist. Der Selektor stimmt jedoch nur überein, wenn eines der untergeordneten Elemente :focus-visible hat:
section:has(*:focus-visible) {...}
Der :has()-Selektor entwickelt sich wieder zu einem fantastischen Dienstprogramm, sobald mehr praktische Anwendungsfälle deutlich werden. Beispielsweise ist es derzeit nicht möglich, <a>-Tags auszuwählen, wenn Bilder umschlossen werden. Das macht es schwierig, dem Anchor-Tag beizubringen, wie seine Stile in diesem Anwendungsfall geändert werden. Mit :has() ist das aber möglich:
a:has(> img) {...}
Dies waren alle Beispiele, bei denen :has() nur wie ein übergeordneter Selektor aussieht.
Betrachten Sie den Anwendungsfall von Bildern innerhalb von <figure>-Elementen und das Anpassen der Stile der Bilder, wenn die Abbildung eine <figcaption> hat. Im folgenden Beispiel werden Abbildungen mit figcaptions ausgewählt und dann Bilder in diesem Kontext. :has() wird verwendet und ändert nicht das Thema, da das Ziel, auf das wir die Anzeigen ausrichten, Bilder und keine Abbildungen sind:
figure:has(figcaption) img {...}
Die Kombinationsmöglichkeiten scheinen endlos zu sein. Kombinieren Sie :has() mit Mengenabfragen und passen Sie das CSS-Rasterlayout an die Anzahl der untergeordneten Elemente an. Kombinieren Sie :has() mit interaktiven Pseudoklassenstatus und erstellen Sie Anwendungen, die auf neue kreative Weise reagieren.
Die Überprüfung auf Unterstützung wird mit der Funktion @supports und der Funktion selector() erleichtert, die vor der Verwendung prüft, ob der Browser die Syntax versteht:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Ressourcen
- :has() – Spezifikation
- :has() bei MDN
- Der CSS-Selektor
:has()ist weit mehr als ein übergeordneter Selektor
2022 und darüber hinaus
Es gibt immer noch eine Reihe von Dingen, die schwer zu tun sein werden, nachdem all diese erstaunlichen Funktionen im Jahr 2022 eingeführt werden. Im nächsten Abschnitt werfen wir einen Blick auf einige der verbleibenden Probleme und die Lösungen, die aktiv zur Lösung dieser Probleme entwickelt werden. Diese Lösungen sind experimentell, obwohl sie in Browsern möglicherweise hinter Flags angegeben oder verfügbar sind.
Aus den folgenden Abschnitten geht hervor, dass viele Personen aus vielen Unternehmen bei den aufgeführten Problemen nach einer Lösung suchen – und nicht, dass diese Lösungen 2023 veröffentlicht werden.
Lose typisierte benutzerdefinierte Eigenschaften
Benutzerdefinierte CSS-Eigenschaften sind fantastisch. Sie ermöglichen die Speicherung aller möglichen Dinge innerhalb einer benannten Variablen, die dann erweitert, berechnet, gemeinsam genutzt werden können usw. Tatsächlich sind sie so flexibel, dass es schön wäre, einige weniger flexibel zu haben.
Stellen wir uns ein Szenario vor, in dem eine box-shadow benutzerdefinierte Eigenschaften für ihre Werte verwendet:
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
Dies funktioniert so lange, bis eine der Eigenschaften in einen Wert geändert wird, den CSS dort nicht akzeptiert, z. B. --x: red. Der gesamte Schatten geht um, wenn eine der verschachtelten Variablen fehlt oder auf einen ungültigen Werttyp festgelegt ist.
Hier kommt @property ins Spiel: --x kann eine typisierte benutzerdefinierte Eigenschaft werden, die nicht mehr locker und flexibel, aber sicher mit bestimmten Grenzen ist:
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
Wenn jetzt versucht wird, dass box-shadow var(--x) verwendet und später --x: red, wird red ignoriert, da es kein <length> ist. Das bedeutet, dass der Schatten weiter funktioniert, obwohl einer seiner benutzerdefinierten Eigenschaften ein ungültiger Wert zugewiesen wurde.
Anstatt einen Fehler zu beheben, wird der initial-value auf 0px zurückgesetzt.
Animation
Neben der Eingabesicherheit öffnet sie auch viele Türen für Animationen. Aufgrund der Flexibilität der CSS-Syntax ist das Animieren einiger Dinge, wie z. B. Gradienten, unmöglich. @property ist hier hilfreich, da die typisierte CSS-Eigenschaft den Browser über die Absicht eines Entwicklers innerhalb einer ansonsten übermäßig komplexen Interpolation informieren kann. Sie schränkt den Umfang der Möglichkeiten so ein, dass ein Browser Aspekte eines Stils animieren kann, die zuvor nicht möglich waren.
Im folgenden Demobeispiel wird ein radialer Farbverlauf verwendet, um einen Teil eines Overlays zu erstellen und so einen Spotlight-Fokus-Effekt zu erzeugen. In JavaScript werden die X- und Y-Werte der Maus festgelegt, wenn die Alt-/Opt-Taste gedrückt wird. Anschließend wird die Fokusgröße auf einen kleineren Wert wie z. B. 25 % gesetzt, wodurch der Fokuskreis an der Mausposition erstellt wird:
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
}
Farbverläufe können jedoch nicht animiert werden. Sie sind zu flexibel und zu komplex, als dass der Browser
animieren könnte. Mit @property kann jedoch ein Attribut isoliert eingegeben und animiert werden, sodass der Browser den Intent leicht nachvollziehen kann.
Bei Videospielen mit diesem Fokuseffekt wird der Kreis immer animiert – von einem großen Kreis bis zu einem Lochkreis. So verwenden Sie @property in unserer Demo, damit der Browser die Farbverlaufsmaske animiert:
@property --focal-size {
syntax: '<length-percentage>';
initial-value: 100%;
inherits: false;
}
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
transition: --focal-size .3s ease;
}
Der Browser kann jetzt die Größe des Farbverlaufs animieren, da wir den Oberflächenbereich der Änderung auf nur eine Eigenschaft reduziert und den Wert so eingegeben haben, dass der Browser die Längen intelligent interpolieren kann.
@property kann noch viel mehr, aber mit diesen kleinen Funktionen können Sie viel erreichen.
Ressourcen
- @property spezifikation
- @property auf MDN
- @property auf web.dev
- Demo für Zoomfokus
- CSS-Tricks: Kennenlernen von @property und seinen Animationsfunktionen
War in min-width oder max-width
Vor Medienabfragebereichen verwendet eine CSS-Medienabfrage min-width und max-width, um über und unter Bedingungen zu artikulieren. Dies kann so aussehen:
@media (min-width: 320px) {
…
}
Nach Bereichen für Medienabfragen könnte dieselbe Medienabfrage wie folgt aussehen:
@media (width >= 320px) {
…
}
Eine CSS-Medienabfrage mit min-width und max-width könnte so aussehen:
@media (min-width: 320px) and (max-width: 1280px) {
…
}
Nach Bereichen für Medienabfragen könnte dieselbe Medienabfrage wie folgt aussehen:
@media (320px <= width <= 1280px) {
…
}
Je nach Codierungshintergrund sieht eine dieser Versionen viel besser lesbar aus als die andere. Dank der Ergänzungen der Spezifikation können Entwickler auswählen, welche Version sie bevorzugen, oder sie sogar synonym verwenden.
Ressourcen
- Syntaxspezifikation für Medienabfragebereiche
- Syntax für Medienabfragebereiche in MDN
- PostCSS-Plug-in für die Syntax des Medienabfragebereichs
Keine Medienabfragevariablen
Vor dem @custom-media mussten Medienabfragen sich immer wieder wiederholen oder waren darauf angewiesen, dass während der Build-Erstellung die richtige Ausgabe basierend auf statischen Variablen von Präprozessoren generiert wird.
Nach @custom-media ermöglicht CSS das Aliasing von Medienabfragen und deren Verweisen, genau wie eine benutzerdefinierte Eigenschaft.
Es ist sehr wichtig, Elemente zu benennen, da sie den Zweck an die Syntax anpassen können, was die gemeinsame Nutzung und Nutzung in Teams vereinfacht. Hier sind einige benutzerdefinierte Medienabfragen, die mir zwischen Projekten folgen:
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);
Nachdem sie nun definiert sind, kann ich eine davon wie folgt verwenden:
@media (--OSdark) {
:root {
…
}
}
Hier finden Sie eine vollständige Liste der benutzerdefinierten Medienabfragen, die ich in meiner CSS-Bibliothek für benutzerdefinierte Attribute verwende, Open Props.
Ressourcen
- Spezifikation für benutzerdefinierte Medienabfragen
- PostCSS-Plug-in für benutzerdefinierte Medienabfragen
Verschachtelte Selektoren sind
Vor dem @nest wurden Stylesheets häufig wiederholt. Besonders schwer wurde es, wenn Selektoren lang waren und jeweils auf kleine Unterschiede ausgerichtet waren. Die Verschachtelung ist einer der häufigsten Gründe für die Verwendung eines Präprozessors.
Nach @nest ist die Wiederholung nicht mehr vorhanden. Nahezu alle Funktionen der Präprozessor-fähigen Verschachtelung werden in CSS integriert.
article {
color: darkgray;
}
article > a {
color: var(--link-color);
}
/* with @nest becomes */
article {
color: darkgray;
& > a {
color: var(--link-color);
}
}
Für mich ist das Wichtigste an der Verschachtelung. Abgesehen von der Wiederholung von article im verschachtelten Selektor bleibt der Stilkontext innerhalb eines Stilblocks erhalten.
Anstatt von einem Selektor und seinen Stilen zu einem anderen Selektor mit Stilen (Beispiel 1) zu wechseln, kann der Leser im Kontext eines Artikels bleiben und sehen, dass der Artikel die Links darin enthält. Die Beziehung und der Stil-Intent sind zusammengefasst, sodass article scheinbar eigene Stile hat.
Die Inhaberschaft kann auch als Zentralisierung betrachtet werden. Anstatt in einem Stylesheet nach relevanten Stilen umzugehen, sind sie alle in einem Kontext verschachtelt. Dies funktioniert bei Beziehungen, die über- oder untergeordnet sind, aber auch bei Beziehungen mit untergeordneten und übergeordneten Elementen.
Betrachten Sie ein untergeordnetes Element der Komponente, das sich selbst anpassen möchte, wenn es sich in einem anderen übergeordneten Kontext befindet, im Gegensatz zum übergeordneten Element, das den Stil besitzt und ein untergeordnetes Element ändert:
/* parent owns this, adjusting children */
section:focus-within > article {
border: 1px solid hotpink;
}
/* with @nest becomes */
/* article owns this, adjusting itself when inside a section:focus-within */
article {
@nest section:focus-within > & {
border: 1px solid hotpink;
}
}
@nest unterstützt insgesamt eine gesündere Stilorganisation, Zentralisierung und Eigenverantwortung. Komponenten können eigene Stile gruppieren und besitzen, anstatt sie auf andere Stilblöcke verteilt zu lassen. Es mag in diesen Beispielen klein erscheinen, kann aber aus Gründen der Übersichtlichkeit und Lesbarkeit sehr große Auswirkungen haben.
Ressourcen
Die Stile für den Umfang sind
Unterstützte Browser
- 118
- 118
- x
- 17,4
Vor dem @scope gab es viele Strategien, da Stile in CSS kaskadieren, übernehmen und standardmäßig global definiert sind. Diese CSS-Funktionen sind für viele Dinge sehr praktisch, aber bei komplexen Websites und Anwendungen mit potenziell vielen verschiedenen Komponentenstilen können der globale Raum und die Beschaffenheit der Kaskade dazu führen, dass Stile sich wie nachvollziehbar anfühlen.
Nach @scope können Stile nicht nur nur innerhalb eines Kontexts wie einer Klasse auf sie beschränkt werden, sie können auch artikulieren, wo die Stile enden und nicht weiter kaskadieren oder übernehmen.
Im folgenden Beispiel kann die Festlegung des Umfangs der BEM-Namenskonvention in den tatsächlichen Intent rückgängig gemacht werden. Der BEM-Selektor versucht, die Farbe eines header-Elements auf einen .card-Container mit Namenskonventionen zu beschränken. Dazu muss in der Kopfzeile dieser Klassenname stehen, um das Ziel zu erreichen. Bei @scope sind keine Namenskonventionen erforderlich, um dasselbe Ziel zu erreichen, ohne das Header-Element auszuzeichnen:
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
Hier ist ein weiteres Beispiel, das weniger komponentenspezifisch ist und mehr über den globalen Umfang von CSS geht. Dunkles und helles Design müssen innerhalb eines Stylesheets nebeneinander bestehen. Die Reihenfolge spielt in diesem Fall eine wichtige Rolle. Normalerweise bedeutet dies, dass die dunklen Designs nach dem hellen Design kommen. Dadurch wird „Hell“ als Standard und „Dunkel“ als optionaler Stil festgelegt. Vermeide es, mit @scope zu kämpfen mit Reihenfolge und Umfang:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
Zum Abschließen der Story kann mit @scope auch festgelegt werden, wo der Stilbereich endet. Dies kann nicht mit einer beliebigen Namenskonvention oder einem Präprozessor erreicht werden, sondern ist etwas Besonderes. Dies ist nur bei CSS möglich, die in den Browser integriert sind. Im folgenden Beispiel werden die Stile img und .content ausschließlich angewendet, wenn ein untergeordnetes Element von .media-block ein gleichgeordnetes oder übergeordnetes Element von .content ist:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Ressourcen
Keine CSS-Möglichkeit für ein Mauerwerk-Layout
Vor der Einführung von CSS-Mauerwerk mit Raster war JavaScript die beste Möglichkeit, ein Mauerwerk-Layout zu erstellen, da jede der CSS-Methoden mit Spalten oder Flexbox die Reihenfolge der Inhalte falsch darstellte.
Nach dem CSS-Masonry mit Raster sind keine JavaScript-Bibliotheken mehr erforderlich und die Reihenfolge der Inhalte ist korrekt.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
Die obige Demo wird mit folgendem CSS-Code umgesetzt:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
Es ist gut zu wissen, dass dies als fehlende Layout-Strategie auf dem Radar landet. Sie können es noch heute in Firefox ausprobieren.
Ressourcen
- Masonry-Layoutspezifikation
- Masonry-Layout auf MDN
- Smashing Magazine: Natives CSS-Mauerwerk-Layout mit CSS-Raster
Preisvergleichsportal kann Nutzern nicht beim Reduzieren der Datennutzung helfen
Vor der prefers-reduced-data-Medienabfrage konnten JavaScript und ein Server ihr Verhalten basierend auf dem Betriebssystem oder der Browseroption „Datensparmodus“ eines Nutzers ändern, CSS konnten dies jedoch nicht.
Nach der prefers-reduced-data-Medienabfrage kann CSS an der Verbesserung der Nutzererfahrung teilnehmen und seine Rolle beim Speichern von Daten spielen.
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
Der vorherige CSS-Code wird in dieser Medien-Scroll-Komponente verwendet, was enorme Einsparungen möglich ist. Je nachdem, wie groß der Darstellungsbereich ist, desto höher sind die Einsparungen beim Seitenaufbau. Die Einsparungen laufen weiter, während Nutzer mit den Scrollern in den Medien interagieren. Alle Bilder haben loading="lazy"-Attribute. In Kombination mit CSS wird das Element vollständig ausgeblendet. Dadurch wird nie eine Netzwerkanfrage für das Bild gestellt.
Bei meinen Tests wurden in einem mittelgroßen Darstellungsbereich anfangs 40 Anfragen und 700 KB an Ressourcen geladen. Wenn ein Nutzer durch die Medienauswahl scrollt, werden mehr Anfragen und Ressourcen geladen. Mit CSS und der reduzierten Datenmedienabfrage werden 10 Anfragen und 172 KB an Ressourcen geladen. Das sind ein halbes Megabyte an Einsparungen und der Nutzer hat nicht einmal durch die Medien gescrollt und es werden keine weiteren Anfragen gesendet.
Diese reduzierte Datenerfahrung bietet mehr Vorteile als nur die Dateneinsparung. Es sind mehr Titel sichtbar und es gibt keine ablenkenden Titelbilder, die die Aufmerksamkeit erregen könnten. Viele Nutzer surfen im Datensparmodus, weil sie pro Megabyte an Daten bezahlen. Es ist schön, dass CSS hier helfen kann.
Ressourcen
- bevorzugt-reduziert-reduzierte-Datenspezifikation
- bevorzugt-reduzierte-Daten auf MDN
- prefers-Reduced-data in a GUI Challenge
- Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Studie
Die Funktionen für das Scroll Snap sind zu eingeschränkt
Bevor diese Scroll-Snap-Vorschläge eingeführt wurden, konnte das Schreiben eines eigenen JavaScript-Codes zur Verwaltung eines Karussells, eines Schiebereglers oder einer Galerie schnell komplex werden. Außerdem könnten die natürlichen Scrollgeschwindigkeiten durch das Script normalisiert werden, sodass die Nutzerinteraktion etwas unnatürlich und möglicherweise schwerfällig wirkt.
Neue APIs
snapChanging()
Sobald der Browser ein Snap-Child-Element freigegeben hat, wird dieses Ereignis ausgelöst. Dadurch kann die Benutzeroberfläche das Fehlen eines Snap Child und den unbestimmten Andockstatus des Scrollers widerspiegeln, da er jetzt verwendet wird und an einem neuen Ort landet.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
Dieses Ereignis wird ausgelöst, sobald der Browser ein neues untergeordnetes Element ausgewählt hat und der Scroller inaktiv ist. Dadurch kann jede UI, die auf das untergeordnete Element angewiesen ist, aktualisiert und die Verbindung widerspiegeln.
document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
console.log('Snap changed', event.snappedTargetsList);
});
scroll-start
Das Scrollen beginnt nicht immer am Anfang. Verwenden Sie wischbare Komponenten, bei denen durch das Wischen nach links oder rechts verschiedene Ereignisse ausgelöst werden. Oder eine Suchleiste, die beim Laden der Seite anfangs ausgeblendet ist, wenn Sie nach oben scrollen. Mit dieser CSS-Eigenschaft können Entwickler angeben, dass ein Scroller an einem bestimmten Punkt beginnen soll.
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
Dieser CSS-Selektor gleicht Elemente in einem Container zum Scroll-Snap an, der aktuell vom Browser angedockt wird.
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
Nach diesen Vorschlägen für das Scrollen durch Klicken ist das Erstellen eines Schiebereglers, Karussells oder einer Galerie viel einfacher, da der Browser jetzt praktische Funktionen für diese Aufgabe bietet. Beobachter und Scroll-Orchestrierungscode werden durch die Verwendung integrierter APIs ersetzt.
Diese CSS- und JS-Funktionen stehen noch ganz am Anfang. Halte aber Ausschau nach Polyfills, die eine baldige Einführung und Tests unterstützen können.
Ressourcen
Wechseln zwischen bekannten Zuständen
Vor dem toggle() konnten nur im Browser integrierte Status für Stile und Interaktionen verwendet werden. Die Kästcheneingabe enthält beispielsweise :checked, einen intern verwalteten Browserstatus für die Eingabe, mit der CSS das Element visuell ändern kann.
Nach toggle() können für jedes Element benutzerdefinierte Zustände erstellt werden, die CSS ändern und für Stile verwenden können. Es ermöglicht Gruppen, Radfahren, direktes Ein-/Ausschalten und vieles mehr.
Im folgenden Beispiel wird der gleiche Effekt erzielt, wenn ein Listenelement am Ende durchgestrichen wird, jedoch ohne Kästchenelemente:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
Und die relevanten toggle()-CSS-Stile:
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
Wenn Sie mit Zustandsmaschinen vertraut sind, werden Sie möglicherweise feststellen, wie viele Crossover-Werte mit toggle() vorhanden sind. Mit dieser Funktion können Entwickler einen größeren Teil ihres Zustands in CSS einbauen, was hoffentlich auf klarere und semantischere Möglichkeiten zur Orchestrierung von Interaktion und Zustand führt.
Ressourcen
Ausgewählte Elemente anpassen
Vor dem <selectmenu> war es mit CSS nicht möglich, <option>-Elemente mit Rich HTML anzupassen oder große Änderungen an der Anzeige einer Liste von Optionen vorzunehmen.
Dies hat Entwickler dazu veranlasst, externe Bibliotheken zu laden, die einen Großteil der Funktionalität einer <select> neu erstellt haben, was letztendlich viel Arbeit war.
Nach <selectmenu> können Entwickler Rich-HTML-Code für Optionselemente bereitstellen und sie so gestalten, wie sie benötigen. Dabei erfüllen sie weiterhin die Anforderungen an die Barrierefreiheit und stellen semantischen HTML-Code bereit.
Im folgenden Beispiel wird auf der Erklärungsseite von <selectmenu> ein neues Auswahlmenü mit einigen grundlegenden Optionen erstellt:
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
Mit CSS können die Teile des Elements ausgerichtet und gestaltet werden:
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
Du kannst das Element <selectmenu> für Chromium in Canary verwenden, wobei das Flag für Webexperimente aktiviert ist. Achten Sie ab 2023 auf anpassbare Auswahlmenüelemente.
Ressourcen
Ein Element mit einem anderen verankern
Vor der anchor() waren die absoluten und relativen Positionsstrategien für Entwickler Positionsstrategien, mit denen untergeordnete Elemente innerhalb eines übergeordneten Elements verschoben werden konnten.
Nach anchor() können Entwickler Elemente bei anderen Elementen positionieren, unabhängig davon, ob sie untergeordnete Elemente sind oder nicht. Außerdem können Entwickler damit angeben, an welcher Kante positioniert werden soll, und andere Funktionalitäten zum Erstellen von Positionsbeziehungen zwischen Elementen bieten.
In der Erläuterung finden Sie einige gute Beispiele und Codebeispiele, falls Sie mehr erfahren möchten.