Baseline bald auf caniuse.com In diesem Beitrag erfährst du mehr über die Integration und welche Features 2023 Teil von Baseline wurden.
Bei der neuen Definition von Baseline gibt es im Lebenszyklus eines Features zwei Phasen. Erstens, wenn sie neu verfügbar sind, und dann, wenn sie nach 30 Monaten weit verfügbar ist. Eine Funktion wird neu in Baseline aufgenommen, sobald sie in den folgenden Browsern interoperabel wird:
- Safari (macOS und iOS)
- Firefox (Desktop und Android)
- Chrome (Desktop und Android)
- Edge (Computer)
Baseline landet auf „Kann ich verwenden“
Im nächsten Schritt zur Klärung der Verfügbarkeit der Funktionen landet Baseline ab heute auf „Can I Use“. Wenn Sie einige Seiten von Can I Use besuchen, wird ein Kennzeichen angezeigt, das Ihnen mitteilt, ob die Funktion in Baseline allgemein verfügbar ist.
Funktionen, die in Baseline neu verfügbar sind, werden ebenfalls mit einem Logo und dem Jahr angezeigt, in dem sie verfügbar sind. Alles, was in diesem Jahr in den wichtigsten Browsern interoperabel war, ist Teil von Baseline 2023.
Im Folgenden erfährst du mehr über die Funktionen, mit denen dieser Meilenstein im Jahr 2023 erreicht wurde. Alle diese Funktionen sind jetzt in Baseline 2023 verfügbar.
Größe von Containerabfragen und Containerabfrageeinheiten
Mit Containerabfragen können Sie die Größe eines Elements abfragen, ähnlich wie bei Medienabfragen, mit denen Sie die Größe des Darstellungsbereichs abfragen können. Sie erleichtern das Erstellen wiederverwendbarer Komponenten, da Sie Komponenten erstellen können, die auf die Größe des Bereichs reagieren, in dem sie platziert werden.
Das Design der folgenden Karte ändert sich je nach Breite der Komponente. Weitere Informationen finden Sie unter Containerabfragen in stabilen Browsern landen.
Neue Farbräume und Funktionen
CSS unterstützt jetzt Farbräume, mit denen Sie auf Farben außerhalb des sRGB-Gamuts zugreifen können. Das bedeutet, dass HD-Bildschirme mit Farben aus HD-Gamuts unterstützt werden können.
Neue Farbmodelle
Die Farbfunktionen lch(), lab(), oklch() und oklab() in Baseline ermöglichen den Zugriff auf die Farbmodelle LCH, Lab, OKLCH und OKLab.
Die color-mix()-Funktion
Darüber hinaus wurden neue Farbfunktionen Teil von Baseline. Die Funktion color-mix() ermöglicht das Mischen einer Farbe in eine andere in einem beliebigen Farbraum. Im folgenden CSS werden 25% des Blaus im Farbraum srgb gemischt zu Weiß.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Die color()-Funktion
Die Funktion color() kann für jeden Farbraum verwendet werden, der Farben mit den R-, G- und B-Kanälen definiert. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einen Alphawert. Du kannst srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 und xyz-d65 verwenden. Beispiel:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
Der High Definition-Farbleitfaden für CSS enthält viele weitere Beispiele für die neuen Farbräume und -funktionen sowie Informationen dazu, welche Sie wann verwenden sollten.
Komprimierungsstreams
Die Compression Streams API ist eine JavaScript API zum Komprimieren und Dekomprimieren von Datenstreams. Bei Verwendung dieser integrierten Komprimierung ist für Anwendungen keine Komprimierungsbibliothek mehr erforderlich.
Weitere Informationen finden Sie unter Komprimierungsstreams werden jetzt in allen Browsern unterstützt.
Nicht sichtbare Leinwand
Vor OffscreenCanvas waren die Funktionen zum Zeichnen von Canvas an das <canvas>-Element gebunden, was bedeutete, dass es direkt vom DOM abhängig war. Wie der Name schon sagt, entkoppelt „OffscreenCanvas“ das DOM und die Canvas API, indem es aus dem Bildschirm herausgenommen wird.
Durch diese Entkopplung ist das Rendering von OffscreenCanvas vollständig vom DOM getrennt und bietet daher einige Geschwindigkeitsverbesserungen im Vergleich zum regulären Canvas, da die beiden Canvas nicht synchronisiert werden. Darüber hinaus kann damit Rendering-Arbeit in einen Web Worker verschoben werden, auch wenn kein DOM verfügbar ist. Dadurch wird der Hauptthread freigegeben und die Anwendung reaktionsschneller.
Vorabladen des Moduls
Das Vorabladen von Modulen kann die Download- und Verarbeitungszeit reduzieren. Füge dem Link-Element rel="modulepreload" hinzu, das auf ein JavaScript-Modul verweist. Der Browser ruft dann das Modul ab, parst und kompiliert es und fügt die Ergebnisse in die Modulzuordnung ein, sodass sie ausgeführt werden können.
Weitere Informationen finden Sie im Artikel Module vorab laden.
Trigonometrische Funktionen in CSS
2023 wurden die trigonometrischen Funktionen aus der Spezifikation „CSS Values and Units Level 4“ interoperabel. Das bedeutet, dass die Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() Teil von Baseline 2023 sind.
Weitere Informationen zur Verwendung dieser Funktionen und einige Anwendungsfälle finden Sie unter Trigonometrische Funktionen in CSS.
Inert-Attribut
Inert bedeutet, dass es nicht möglich ist, sich zu bewegen. Wenn Sie also ein inaktives Element markieren, werden die Bewegung oder Interaktion von diesen DOM-Elementen entfernt. Das inert-Attribut führt dazu, dass der Browser das Element ignoriert.
- Das Ereignis
clickwird nicht ausgelöst, wenn ein Nutzer auf das Element klickt. - Das Element wird nicht mehr hervorgehoben.
- Das Element und sein Inhalt werden aus der Barrierefreiheitsstruktur ausgeschlossen.
Dieses Attribut sollte zu Elementen hinzugefügt werden, die sich außerhalb des sichtbaren Bereichs befinden oder anderweitig verborgen sind. Weitere Informationen finden Sie unter Das inert-Attribut.
Subgrid im CSS-Rasterlayout
Mit dem Wert subgrid für grid-template-columns und grid-template-rows können Sie die Tracks verwenden, die in einem übergeordneten Raster in verschachtelten Rastern definiert wurden. Das bedeutet, dass Sie Elemente innerhalb dieser verschachtelten Raster aneinander ausrichten können.
Im Artikel CSS-Subraster finden Sie einige Beispiele und Links zu vielen anderen Beiträgen und Beispielen, in denen Anwendungsfälle für Subraster vorgestellt werden.
NumberFormat V3
Intl.NumberFormat V3 ist eine Reihe neuer Funktionen für Intl.NumberFormat, die 2023 Teil von Baseline wurden. Die zusätzlichen Funktionen sind:
- Drei neue Funktionen zum Formatieren von Zahlenbereichen: formatRange, formatRangeToParts und selectRange.
- Aufzählung für Gruppierung
- Neue Rundungs- und Genauigkeitsoptionen
- Rundungspriorität
- Strings als Dezimalzahlen interpretieren
- Rundungsmodi
- Vorzeichen – auszuschließendes Display
Im Angebot für NumberFormat V3 werden alle neuen Funktionen im Detail beschrieben.
Fullscreen API
Mit der Fullscreen API können Sie ein Element, z. B. ein <video>, in den Vollbildmodus verschieben, indem Sie die Methode requestFullscreen() aufrufen. Sie bietet auch Methoden, um zu ermitteln, ob sich ein Element im Vollbildmodus befindet und ob sich das Dokument in einem Zustand befindet, in dem Sie den Vollbildmodus anfordern können.
Weitere Informationen findest du in diesem Leitfaden zur Fullscreen API auf MDN.
Der CSS-Selektor „:has()“
Baseline 2023 ist jetzt die :has()-Auswahl, die am 19. Dezember in Firefox 121 verfügbar sein wird. Dieser Selektor dient unter anderem als übergeordneter Selektor, sodass Sie ein Element basierend auf den darin enthaltenen Elementen auswählen können. Sie können beispielsweise unterschiedliche CSS anwenden, je nachdem, ob sich in einem Element ein Bild befindet oder nicht.
Weitere Informationen finden Sie unter :has(): the family selector.
Weitere Features, die in diesem Jahr zu Baseline hinzugefügt wurden
In diesem Beitrag werden einige der wichtigsten Funktionen vorgestellt, die in diesem Jahr Teil von Baseline wurden. Aber es gibt noch mehr.
- Erstellenbare Stylesheets
- Komplexe nth-child-Selektoren in CSS
- Die Bereichssyntax für Medienabfragen
- Karten importieren
- Mehrere Werte für CSS-Display
- @counter-Stil
- Die Preisvergleichsportal-Property
counter-set - Die Easing-Funktion
linear() - Origin Private File System (OPFS)
- CSS-Verschachtelung, einschließlich der Änderung, die ein entspanntes Parsing ermöglicht
- CSS-
:dir()-Pseudoklassenselektor - CSS-Längeneinheit
cap - CSS-Maskierung
- Unterstützung von Medienabfragen für HTML-Video-
<source>-Elemente - Das HTML-Element
<search> - Lazy Loading von
<iframe>-Elementen (ab dem 19. Dezember in Firefox 121 verfügbar) - Die CSS-Zeilenhöheneinheiten
lhundrlh
Viele dieser Funktionen wurden durch die gemeinsame Arbeit an Interop 2023 Interoperabilität erreicht. Es ist spannend zu sehen, wie Features diesen Prozess durchlaufen und in Baseline als neu verfügbar landen. Dann ist es so weit, dass sie bald allgemein verfügbar sind. So können Sie besser entscheiden, wann Sie Funktionen in Ihren eigenen Projekten verwenden sollten.