Referenz 2023

Die Referenzversion kommt bald auf caniuse.com. In diesem Beitrag erfahren Sie, zur Integration und lernen einige Funktionen kennen, die Teil des Baseline 2023.

Mit der neuen Definition von Baseline stellen zwei Phasen im Lebenszyklus einer Funktion dar: die Verfügbarkeit und wenn sie nach 30 Monaten allgemein verfügbar ist. Ein Feature wird Teil von Baseline neu verfügbar, wenn sie in folgenden Bereichen interoperabel wird: Browser:

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

Als nächsten Schritt zur Klärung der Verfügbarkeit von Funktionen beginnt Baseline, landen bei Can I Use ab heute. Auf einigen Seiten von Can I Use an dem Sie sehen, ob die Funktion in Baseline allgemein verfügbar ist.

Screenshot von „Can I Use“ (Kann ich mit dem Logo für übliche Verwendung im CSS-Rasterlayout) verwenden.

Neue Funktionen in Baseline werden ebenfalls mit einem Logo gekennzeichnet. in dem sie verfügbar waren. Alles, was interoperabel war, Der diesjährige Hauptbrowser ist Teil von Baseline 2023.

Screenshot von „Can I Use“ (Kann ich mit dem neuen Logo für Containerabfragen verwenden)

Im weiteren Verlauf dieses Beitrags erfährst du mehr über die Funktionen, mit denen du diesen Meilenstein erreicht hast. im Jahr 2023. All diese Funktionen sind Baseline 2023 – jetzt verfügbar.

Größe von Containerabfragen und Containerabfrageeinheiten

Größe von Containerabfragen können Sie die Größe eines Elements abfragen, ganz ähnlich wie bei Medienabfragen. können Sie die Größe des Darstellungsbereichs abfragen. Sie ermöglichen das Erstellen wiederverwendbarer Komponenten, Komponenten erstellen, die auf die Größe des Bereichs reagieren, wo sie platziert werden.

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

Das Design der folgenden Karte ändert sich je nach Breite der Komponente. Weitere Informationen

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 unterstützen können. alle Vielfalt.

Neue Farbmodelle

Jetzt in Baseline: die Farbfunktionen lch(), lab(), oklch() und oklab() Zugriff auf die Farbmodelle LCH, Lab, OKLCH und OKLab.

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

<ph type="x-smartling-placeholder">
</ph> Screenshot des Editors „Gradient.style“ mit einem Farbverlauf von rosa zu blau
Probieren Sie die neuen Farbräume mit gradient.style aus.

Die color-mix()-Funktion

Außerdem sind jetzt neue Farbfunktionen in Baseline enthalten. Das color-mix() -Funktion ermöglicht das Mischen einer Farbe in eine andere in einem der Farbräume. Im folgenden CSS wird im srgb-Farbraum 25% Blau in Weiß gemischt.

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

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen zu color-mix()-Anweisungen

Die color()-Funktion

Die color() kann für jeden Farbraum verwendet werden, der Farben mit R, G und B angibt. Kanäle. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerte für RGB und optional auch Alphawerte. Sie können eine der folgenden Optionen 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);
}

Farbleitfaden für CSS-High Definition enthält viele weitere Beispiele für die neuen Farbräume und Funktionen sowie welche Informationen wann verwendet werden sollen.

Komprimierungsstreams

Compression Streams API ist eine JavaScript-API zum Komprimieren und Dekomprimieren von Datenströmen. Apps Bei Verwendung dieser integrierten Komprimierung ist keine Komprimierungsbibliothek mehr erforderlich.

Unterstützte Browser

  • Chrome: 80 <ph type="x-smartling-placeholder">
  • Edge: 80. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 16.4 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen

Nicht sichtbare Leinwand

Vor OffscreenCanvas waren Canvas-Zeichenfunktionen mit <canvas> verbunden Das bedeutete, dass es direkt vom DOM abhängig war. OffscreenCanvas entkoppelt DOM aus der Canvas API erstellen, indem Sie das Canvas aus dem Bildschirm heraus verschieben.

Durch diese Entkopplung ist das Rendering von OffscreenCanvas vollständig von dem DOM und bietet im Vergleich zum normalen Canvas Geschwindigkeitsverbesserungen, dass keine Synchronisierung zwischen den beiden erfolgt. Es kann auch verwendet werden, um und rendern Arbeit in einem Web Worker, obwohl kein DOM verfügbar ist. Dadurch werden Hauptthread und die Anwendung reaktionsschneller machen.

Unterstützte Browser

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 105 <ph type="x-smartling-placeholder">
  • Safari: 16.4 <ph type="x-smartling-placeholder">

Quelle

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

Vorabladen des Moduls

Durch das Vorabladen von Modulen kann die Download- und Verarbeitungszeit reduziert werden. Hinzufügen rel="modulepreload" zum Link-Element hinzu, das auf ein JavaScript-Modul verweist, und der Browser -Modul, parst und kompiliert es und stellt die Ergebnisse in die Modulzuordnung ausgeführt werden soll.

Unterstützte Browser

  • Chrome: 66 <ph type="x-smartling-placeholder">
  • Rand: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen finden Sie unter Module vorab laden.

Trigonometrische Funktionen in CSS

Im Jahr 2023 trigonometrische Funktionen aus den CSS Values and Units Level 4 die Spezifikation interoperabel wurde. Die Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() sind Teil von Baseline 2023.

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 108 <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
In dieser Demo werden die trigonometrischen Funktionen verwendet, um Elemente auf einem kreisförmigen Pfad um einen zentralen Punkt zu verschieben.

Lernen Sie die Verwendung dieser Funktionen kennen und entdecken Sie einige Anwendungsfälle in Trigonometrische Funktionen in CSS

Das inerte Attribut

Wenn Sie ein DOM-Element als inert markieren, entfernen Sie die Bewegung oder Interaktion aus . 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 fokussiert.
  • Das Element und sein Inhalt werden aus der Baumstruktur für Barrierefreiheit ausgeschlossen.

Unterstützte Browser

  • Chrome: 102. <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: 112 <ph type="x-smartling-placeholder">
  • Safari: 15.5 <ph type="x-smartling-placeholder">

Quelle

Fügen Sie dieses Attribut zu nicht sichtbaren oder anderweitig ausgeblendeten Elementen hinzu. Weitere Informationen Informationen zum inaktiven Attribut

Subgrid im CSS-Rasterlayout

Mit dem Wert subgrid für grid-template-columns und grid-template-rows verwenden Sie die in einem übergeordneten Raster definierten Tracks in verschachtelten Rastern. Das bedeutet, dass Sie Elemente in separaten verschachtelten Rastern aneinander ausrichten.

Unterstützte Browser

  • Chrome: 117. <ph type="x-smartling-placeholder">
  • Edge: 117. <ph type="x-smartling-placeholder">
  • Firefox: 71. <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

Unter CSS-Subgrid finden Sie einige Beispiele und Links zu und viele weitere Beiträge und Beispiele zu Anwendungsfällen für Unternetze.

NumberFormat V3

„Intl.NumberFormat V3“ umfasst eine Reihe neuer Funktionen für „Intl.NumberFormat“, 2023 Teil von Baseline. Die zusätzlichen Funktionen sind:

  • Drei neue Funktionen zum Formatieren von Zahlenbereichen: formatRange, formatRangeToParts und selectRange
  • Gruppierungs-Enum
  • Neue Optionen für Rundung und Genauigkeit
  • Rundungspriorität
  • Strings als Dezimalzahlen interpretieren
  • Rundungsmodi
  • Vorzeichen: negativ

Unterstützte Browser

  • Chrome: 106 <ph type="x-smartling-placeholder">
  • Edge: 106. <ph type="x-smartling-placeholder">
  • Firefox: 116 <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

Das Angebot für NumberFormat V3 werden diese neuen Funktionen erläutert.

Die Fullscreen API

Mit der Fullscreen API können Sie ein Element wie <video> im Vollbildmodus platzieren durch Aufrufen der Methode requestFullscreen(). Sie bietet auch Methoden für Erkennen, ob sich ein Element im Vollbildmodus befindet und ob das Dokument dass der Vollbildmodus aktiviert werden kann.

Unterstützte Browser

  • Chrome: 71. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 64 <ph type="x-smartling-placeholder">
  • Safari: 16.4 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen findest du in diesem Leitfaden zur Fullscreen API auf MDN.

CSS-:has()-Selektor

Baseline 2023 reicht gerade für den :has()-Selektor, der in Firefox landen wird 121 am 19. Dezember. Dieser Selektor dient unter anderem Parent-Selektor (Auswahlmöglichkeit für übergeordnete Elemente), mit dem Sie ein Element basierend auf den Elementen auswählen können, die sich darin befinden . Sie können z. B. unterschiedliche Preisvergleichsportale anwenden, je nachdem, ein Bild innerhalb eines Elements.

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 121. <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen findest du unter :has(): der Familienauswahl.

Weitere Funktionen, die in diesem Jahr zu Baseline hinzugefügt wurden

Zu den weiteren Funktionen, die dieses Jahr in Baseline aufgenommen wurden, gehören:

Viele dieser Funktionen kamen aufgrund der Zusammenarbeit in Interop 2023. Es ist spannend zu sehen, kann durch diesen Prozess gebracht und in Baseline als neu verfügbar angezeigt werden. wodurch die Zeit für die Veröffentlichung eines breiten Publikums eingeleitet wird. Dadurch wird ein einfachere Entscheidungen darüber treffen, wann Funktionen in Ihren eigenen Projekten eingeführt werden sollten.