Grundlegende Features, die Sie derzeit verwenden können

Hier erfahren Sie mehr über einige der Features, die Teil von Baseline sind.

Das Web entwickelt sich ständig weiter und Browser werden ständig aktualisiert, um Entwicklern neue Tools zur Verfügung zu stellen, mit denen sie die Plattform innovativ nutzen können. Dinge, für die zuvor Hilfsbibliotheken erforderlich waren, werden Teil der Webplattform und werden von allen Browsern unterstützt. Außerdem gibt es kürzere oder einfachere Möglichkeiten zum Codieren von Designelementen.

Diese ständige Weiterentwicklung und Anpassung ist zwar hilfreich, kann aber auch Verwirrung stiften. Es kann schwierig sein, sich durch all diese Neuerungen zurechtzufinden. Als Entwickler haben wir Fragen wie: „Wann unterstützen alle Browser-Engines diese neue Funktion?“ „Wann kann ich diese Funktionen tatsächlich in meinem Produktionscode verwenden?“ „Wie lange sollen ältere Browser unterstützt werden?“

Die richtige Antwort lautet: „Kommt darauf an.“ Was erforderlich ist und was nutzbar ist, hängt ganz von Ihrer Nutzerbasis, Ihrem Technology Stack, Ihrer Teamstruktur und den unterstützten Geräten ab. Eines sind wir uns jedoch alle einig, dass es aufgrund der aktuellen Situation im Web schwierig sein kann, solche Entscheidungen zu treffen.

Das Chrome-Team arbeitet mit anderen Browser-Engines und der Web-Community zusammen, um für mehr Klarheit zu sorgen. Dazu gehört auch unsere Arbeit an Projekten wie Interop 2023, die zur Verbesserung der Interoperabilität einiger wichtiger Funktionen beitragen. Aber was ist mit neuen Funktionen der letzten Jahre? Sind experimentelle Funktionen, die wir vor etwa zwei Jahren kennengelernt haben, einsatzbereit?

In diesem Post möchte ich einige Funktionen hervorheben, die jetzt allen großen Browser-Engines für die letzten beiden Hauptversionen zur Verfügung stehen. Ab diesem Punkt wird die Mehrheit der Entwickler der Meinung, dass eine Funktion sicher ist, und nennen diese Funktion „Baseline“. Weitere Informationen finden Sie in der Bekanntgabe von Baseline.

Das Dialogelement

Das <dialog>-Element ist ein neues HTML-Element zum Erstellen von Aufforderungen für Dialogfelder, z. B. Pop-ups und modale Fenster.

Definieren Sie das modale Element und öffnen Sie das Dialogfeld, indem Sie die Methode showModal() für das Dialogelement aufrufen, um es zu verwenden.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

Als natives HTML-Element sind Funktionen wie Fokusverwaltung, Tab-Tracking und das Einhalten des Stapelkontexts integriert. Weitere Informationen finden Sie unter Dialogfeldkomponente erstellen.

Einzelne CSS-Transformationsattribute

Mit CSS-Transformationen können Sie Ihrer Website eine Bewegung hinzufügen.
Vielleicht sind Sie mit dem Schreiben von CSS-Transformationen mit drei Eigenschaften in einer Zeile vertraut.
Mit einzelnen Transformationsattributen können Sie diese jetzt einzeln angeben. Dies ist praktisch, wenn Sie komplexe Keyframe-Animationen schreiben.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Eine ausführliche Erläuterung dieser Änderung finden Sie unter Detailgenaue Steuerung über CSS-Transformationen mit einzelnen Transformationseigenschaften.

Neue Einheiten für den Darstellungsbereich

Auf Mobilgeräten wird die Größe des Darstellungsbereichs davon beeinflusst, ob dynamische Symbolleisten vorhanden sind oder fehlen.
Manchmal sind eine URL- und eine Navigationssymbolleiste sichtbar, aber manchmal sind diese Symbolleisten vollständig geschlossen.
Die tatsächliche Größe des Darstellungsbereichs hängt davon ab, ob die Symbolleisten sichtbar sind oder nicht.
Dank neuer Einheiten für den Darstellungsbereich wie svh und lvh haben Webentwickler mehr Kontrolle beim Design für Mobilgeräte. Weitere Informationen finden Sie im Artikel Die großen, kleinen und dynamischen Einheiten für den Darstellungsbereich.

Deep Copy in JavaScript

Um eine Deep-Kopie eines Objekts ohne Verweis auf das ursprüngliche Objekt zu erstellen, wurde in der Vergangenheit ein beliebter Hack JSON.stringify in Kombination mit JSON.parse verwendet. Dies war ein so häufiger Hack, dass V8 (die JavaScript-Engine von Chrome) die Leistung dieses Tricks drastisch verbesserte. Mit structuredClone brauchst du diesen Hack aber nicht mehr.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Weitere Informationen finden Sie unter Deep-copying in JavaScript mit strukturierten Klon.

Die Pseudoklasse :focus-visible

Als Webentwickler sind wir alle mit diesem „Fokusring“ vertraut, der angezeigt wird, wenn Sie mit einer Tastatur auf einer Seite navigieren oder auf Eingabeelemente klicken. Sie ist eine notwendige Funktion für die Barrierefreiheit, aber manchmal beeinträchtigt sie das visuelle Design für verschiedene Nutzende. Die CSS-Pseudoklasse :focus-visible prüft, ob der Browser der Meinung ist, der Fokus sollte sichtbar sein. Sie können jetzt Stile nur dann angeben, wenn der Fokus sichtbar sein soll.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Weitere Informationen finden Sie im Bereich „Schwerpunkt“ auf „CSS lernen“.

Die TransformStream-Schnittstelle

Die TransformStream-Schnittstelle der Streams API ermöglicht es, Streams über eine Pipeline ineinander zu leiten.

Sie können beispielsweise Daten von einem Ort streamen und den Datenstream dann an einen anderen Speicherort komprimieren, wenn die Daten übertragen werden. Dieser Beispielanwendungsfall wird im Artikel Streaminganfragen mit der Fetch API beschrieben.

Zusammenfassung

Es gibt viele weitere Funktionen, die in letzter Zeit interoperabel und stabil auf der Webplattform verwendet werden konnten. Künftig arbeiten wir mit der WebDX Community Group zusammen, um mehr Klarheit über diese Baseline-Featuresets zu schaffen. Weitere Informationen findest du unter web.dev/baseline.

Unser Team veröffentlicht Artikel, wenn eine Funktion interoperabel wird, und monatliche Updates zur Entwicklung der Webplattform – von experimentellen bis neu interoperablen Funktionen.

Wir sind immer neugierig, ob wir dir mit unserer Hilfe weiterhelfen können oder ob du andere Arten von Support benötigst. Wende dich daher bitte an die WebDX Community Group.