Referenz 2023

Baseline kommt zu caniuse.com! In diesem Beitrag erfahren Sie mehr über die Integration und einige der Funktionen, die 2023 Teil von Baseline wurden.

Mit der neuen Definition der Baseline gibt es zwei Phasen im Lebenszyklus einer Funktion: die neue Verfügbarkeit und die allgemeine Verfügbarkeit nach 30 Monaten. Eine Funktion wird Teil von Baseline, wenn sie in den folgenden Browsern interoperabel ist:

  • Safari (macOS und iOS)
  • Firefox (Computer und Android)
  • Chrome (Computer und Android)
  • Edge (Computer)

Als nächsten Schritt zur Klärung der Verfügbarkeit von Funktionen wird ab heute der Grundsatz „Kann ich verwenden?“ auf der Seite „Grundlagen“ angezeigt. Wenn Sie einige Seiten auf Can I Use aufrufen, sehen Sie ein Symbol, das angibt, ob die Funktion in Baseline weithin verfügbar ist.

Screenshot von Can I Use mit dem weit verbreiteten Logo für das CSS-Grid-Layout

Funktionen, die in der Baseline neu verfügbar sind, werden ebenfalls mit einem Symbol und dem Jahr angezeigt, in dem sie eingeführt wurden. Alles, was in diesem Jahr plattformübergreifend für die wichtigsten Browser verfügbar wurde, ist Teil der Baseline 2023.

Screenshot von „Kann ich verwenden?“ mit dem neu verfügbaren Symbol für Containerabfragen

Im Rest dieses Beitrags erfahren Sie mehr über die Funktionen, die 2023 diesen Meilenstein erreicht haben. Alle diese Funktionen sind neu in Baseline 2023 verfügbar.

Größe von Containerabfragen und Containerabfrageeinheiten

Mit Containerabfragen für die Größe können Sie die Größe eines Elements abfragen, ähnlich wie mit Medienabfragen die Größe des Darstellungsbereichs. Sie erleichtern das Erstellen wiederverwendbarer Komponenten, da Sie damit Komponenten erstellen können, die auf die Größe des Bereichs reagieren, in dem sie platziert werden.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

Das Design der folgenden Karte ändert sich je nach Breite der Komponente. Weitere Informationen finden Sie unter Containerabfragen in stabilen Browsern.

Neue Farbräume und Funktionen

CSS unterstützt jetzt Farbräume, mit denen Sie auf Farben außerhalb des sRGB-Farbraums zugreifen können. Das bedeutet, dass Sie HD-Displays (High Definition) mit Farben aus HD-Gamuts unterstützen können.

Neue Farbmodelle

In Baseline bieten die Farbfunktionen lch(), lab(), oklch() und oklab() jetzt Zugriff auf die Farbmodelle LCH, Lab, OKLCH und OKLab.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Ein Screenshot des Editors „gradient.style“ mit einem leuchtenden Farbverlauf von Rosa nach Blau
Probieren Sie die neuen Farbräume mit gradient.style aus.

Die color-mix()-Funktion

Außerdem wurden neue Farbfunktionen in Baseline aufgenommen. Mit der Funktion color-mix() können Sie in jedem Farbraum eine Farbe mit einer anderen mischen. Im folgenden CSS-Code wird im sRGB-Farbraum 25% Blau in Weiß gemischt.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Weitere Informationen zu color-mix()-Anweisungen

Die color()-Funktion

Die Funktion color() kann für jeden Farbraum verwendet werden, in dem Farben mit R-, G- und B-Kanälen angegeben werden. color() nimmt zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einige Alphawerte entgegen. Sie können einen der folgenden Werte 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);
}

Der CSS-Leitfaden für High-Definition-Farben enthält viele weitere Beispiele für die neuen Farbräume und Funktionen sowie Informationen dazu, wann welche verwendet werden sollten.

Komprimierungsstreams

Die Compression Streams API ist eine JavaScript API zum Komprimieren und Dekomprimieren von Datenstreams. Apps, die diese integrierte Komprimierung verwenden, müssen keine Komprimierungsbibliothek mehr enthalten.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

Weitere Informationen finden Sie unter Komprimierte Streams werden jetzt in allen Browsern unterstützt.

Nicht sichtbarer Canvas

Vor OffscreenCanvas waren Canvas-Zeichnenfunktionen an das <canvas>-Element gebunden, was bedeutete, dass sie direkt vom DOM abhängig waren. Mit OffscreenCanvas wird das DOM von der Canvas API getrennt, indem der Canvas außerhalb des Bildschirms bewegt wird.

Dank dieser Entkopplung ist das Rendering von OffscreenCanvas vollständig vom DOM getrennt. Dadurch ist es im Vergleich zum regulären Canvas etwas schneller, da es keine Synchronisierung zwischen den beiden gibt. Es kann auch verwendet werden, um Rendering-Arbeiten an einen Webworker zu übergeben, auch wenn kein DOM verfügbar ist. Dadurch wird der Hauptthread freigegeben und die Anwendung reaktionsschneller.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

Weitere Informationen finden Sie unter OffscreenCanvas – Canvas-Vorgänge mit einem Webworker beschleunigen.

Modulvorab-Laden

Durch das Vorladen von Modulen können die Download- und Verarbeitungszeit verkürzt werden. Wenn Sie dem Link-Element, das auf ein JavaScript-Modul verweist, rel="modulepreload" hinzufügen, ruft der Browser das Modul ab, analysiert und kompiliert es und fügt die Ergebnisse in die Modulkarte ein, damit sie ausgeführt werden kann.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

Weitere Informationen zum Vorabladen von Modulen

Trigonometrische Funktionen in CSS

2023 wurden trigonometrische Funktionen aus der CSS-Spezifikation „Werte und Einheiten – Level 4“ interoperabel. Das bedeutet, dass die Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() Teil der Baseline 2023 sind.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

In dieser Demo werden die trigonometrischen Funktionen verwendet, um Elemente auf einem Kreis um einen Mittelpunkt zu bewegen.

Informationen zur Verwendung dieser Funktionen und einige Anwendungsfälle finden Sie unter Trigonometrische Funktionen in CSS.

Das inert-Attribut

Wenn Sie ein DOM-Element als inert markieren, entfernen Sie Bewegungen oder Interaktionen daraus. Das inert-Attribut führt dazu, dass das Element vom Browser ignoriert wird:

  • Das Ereignis click wird nicht ausgelöst, wenn ein Nutzer auf das Element klickt.
  • Das Element wird nicht fokussiert.
  • Das Element und sein Inhalt sind aus dem Bedienungshilfen-Baum ausgeschlossen.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

Fügen Sie dieses Attribut Elementen hinzu, die nicht auf dem Bildschirm oder anderweitig ausgeblendet sind. Weitere Informationen finden Sie unter Das Attribut inert.

Unterraster im CSS-Rasterlayout

Mit dem Wert subgrid für grid-template-columns und grid-template-rows können Sie die in einem übergeordneten Raster definierten Tracks in verschachtelten Rastern verwenden. So können Sie Elemente in separaten verschachtelten Rastern miteinander ausrichten.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Unter CSS-Subgrid finden Sie einige Beispiele und Links zu vielen anderen Beiträgen und Beispielen, in denen Anwendungsfälle für Subgrids hervorgehoben werden.

NumberFormat V3

Intl.NumberFormat V3 umfasst eine Reihe neuer Funktionen für Intl.NumberFormat, die im Laufe des Jahres 2023 in die Baseline aufgenommen wurden. Die zusätzlichen Funktionen sind:

  • Drei neue Funktionen zum Formatieren von Zahlenbereichen: formatRange, formatRangeToParts und selectRange
  • Enum für Gruppierung
  • Neue Optionen für Rundung und Genauigkeit
  • Priorität der Rundung
  • Strings als Dezimalzahlen interpretieren
  • Rundungsmodi
  • Schild zeigt negativen Wert an

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

Im Vorschlag für NumberFormat V3 werden diese neuen Funktionen ausführlich beschrieben.

Die Fullscreen API

Mit der Fullscreen API kannst du ein Element wie eine <video> im Vollbildmodus anzeigen lassen, indem du die Methode requestFullscreen() aufrufst. Außerdem bietet es Methoden, um zu erkennen, ob sich ein Element im Vollbildmodus befindet und ob das Dokument sich in einem Zustand befindet, in dem Sie den Vollbildmodus anfordern können.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

Weitere Informationen finden Sie in diesem Leitfaden zur Vollbild-API auf MDN.

Der CSS-Selektor :has()

Für Baseline 2023 wird nur die :has()-Auswahl verwendet, die am 19. Dezember in Firefox 121 eingeführt wird. Dieser Selektor dient unter anderem als Elternselektor, mit dem Sie ein Element anhand der Elemente auswählen können, die sich darin befinden. So können Sie beispielsweise unterschiedliche CSS-Stile anwenden, je nachdem, ob sich in einem Element ein Bild befindet oder nicht.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

Weitere Informationen finden Sie unter :has(): die Familienauswahl.

Weitere Funktionen, die in diesem Jahr zu Baseline hinzugekommen sind

Weitere Funktionen, die in diesem Jahr Teil von Baseline wurden:

Viele dieser Funktionen wurden durch die Zusammenarbeit bei der Interop 2023 interoperabel. Es ist spannend zu sehen, wie Funktionen diesen Prozess durchlaufen und in Baseline als neu verfügbar angezeigt werden. Dadurch wird der Timer gestartet, der die allgemeine Verfügbarkeit der Funktionen angibt. So können Sie leichter entscheiden, wann Sie Funktionen in Ihren eigenen Projekten verwenden sollten.