Baseline bald auf caniuse.com In diesem Beitrag erfahren Sie mehr über die Integration und einige der Features, die 2023 Teil von Baseline wurden.
Die neue Definition von Baseline gibt es in zwei Phasen im Lebenszyklus eines Features: wann es neu verfügbar wird und wann es nach 30 Monaten weit verfügbar wird. Ein Feature wird neu in Baseline aufgenommen, sobald es 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 Featureverfügbarkeit landet Baseline ab heute auf „Can I Use“. Wenn Sie einige Seiten zu „Can I Use“ (Can I Use) aufrufen, wird ein Kennzeichen angezeigt, das Ihnen mitteilt, ob das Feature in Baseline allgemein verfügbar ist.
Neu verfügbare Features, die in Baseline neu verfügbar sind, werden ebenfalls mit einem Logo und dem Jahr angezeigt, in dem sie verfügbar wurden. Alles, was in diesem Jahr in den wichtigsten Browsern interoperabel wurde, ist Teil von Baseline 2023.
Im weiteren Verlauf dieses Beitrags geht es um die Funktionen, mit denen dieser Meilenstein 2023 erreicht wurde. Alle diese Features 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 die Größe des Darstellungsbereichs. Sie erleichtern das Erstellen wiederverwendbarer Komponenten erheblich, da sie 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 (High Definition) 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);
}
Weitere Informationen zu color-mix()-Anweisungen
Die color()-Funktion
Die Funktion color() kann für jeden Farbraum verwendet werden, der Farben mit R-, G- und B-Kanälen angibt. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einige Alphawerte. Sie können Folgendes verwenden: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 und xyz-d65. 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);
}
Im High Definition-Farbleitfaden für CSS finden Sie 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. Anwendungen, die diese integrierte Komprimierung verwenden, müssen keine Komprimierungsbibliothek mehr enthalten.
Weitere Informationen finden Sie unter Komprimierungsstreams werden jetzt in allen Browsern unterstützt.
Nicht sichtbare Leinwand
Vor OffscreenCanvas waren die Canvas-Zeichenfunktionen mit dem Element <canvas> verknüpft, das heißt, es hing direkt vom DOM ab. OffscreenCanvas entkoppelt das DOM von der Canvas API, indem es aus dem Canvas entfernt wird.
Durch diese Entkopplung ist das Rendern von OffscreenCanvas vollständig vom DOM getrennt, sodass es im Vergleich zum regulären Canvas einige Geschwindigkeitsverbesserungen bietet, da die beiden Canvas nicht synchronisiert werden. Er kann auch verwendet werden, um Rendering-Arbeiten in einen Web Worker zu verschieben, obwohl 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ügen Sie dem Linkelement 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 unter 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
Wenn Sie ein DOM-Element als inert markieren, werden Bewegung oder Interaktion daraus entfernt. Das inert -Attribut bewirkt, dass der Browser das Element ignoriert:
- Das
click-Ereignis wird nicht ausgelöst, wenn ein Nutzer auf das Element klickt. - Das Element wird nicht mehr hervorgehoben.
- Das Element und sein Inhalt sind aus der Barrierefreiheitsstruktur ausgeschlossen.
Fügen Sie dieses Attribut zu Elementen hinzu, die nicht auf dem Bildschirm zu sehen sind oder anderweitig ausgeblendet 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 in separaten verschachtelten Rastern aneinander ausrichten können.
Unter CSS-Subraster finden Sie einige Beispiele und Links zu vielen anderen Beiträgen und Beispielen, die Anwendungsfälle für Subraster zeigen.
NumberFormat V3
Intl.NumberFormat V3 enthält eine Reihe neuer Features für Intl.NumberFormat, die 2023 Teil von Baseline wurden. Die zusätzlichen Funktionen sind:
- Drei neue Funktionen zum Formatieren von Zahlenbereichen:
formatRange,formatRangeToPartsundselectRange - 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 diese neuen Funktionen beschrieben.
Fullscreen API
Mit der Fullscreen API können Sie ein Element wie <video> durch Aufrufen der Methode requestFullscreen() in den Vollbildmodus versetzen. Sie bietet auch Methoden, mit denen Sie feststellen können, ob sich ein Element im Vollbildmodus befindet und ob sich das Dokument in einem Status befindet, bei dem Sie den Vollbildmodus anfordern können.
Weitere Informationen findest du in diesem Leitfaden zur Fullscreen API auf MDN.
CSS-Selektor :has()
Baseline 2023 ist nur 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
Weitere Funktionen, die in diesem Jahr Teil von Baseline sind:
- 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 einfügt.
- 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 erreichten die Interoperabilität durch die gemeinsame Arbeit an Interop 2023. 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 dann allgemein verfügbar sind. So können Sie besser entscheiden, wann Sie Features in Ihren eigenen Projekten verwenden sollten.