Grundlegende Features, die Sie derzeit verwenden können

Hier erfährst du mehr über einige der Features von Baseline.

Das Web entwickelt sich ständig weiter und Browser werden ständig aktualisiert, um Entwicklern neue Tools für Innovationen auf der Plattform an die Hand zu geben. Dinge, für die zuvor Hilfsbibliotheken erforderlich waren, werden in die Webplattform integriert und in allen Browsern unterstützt. Außerdem gibt es kürzere oder einfachere Möglichkeiten, Designelemente zu codieren.

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

Die richtige Antwort ist: „Das kommt darauf an.“ Was benötigt wird und was wirklich nutzbar ist, hängt von Ihrer Nutzerbasis, dem Technology Stack, der Teamstruktur und den unterstützten Geräten ab. Aber eines ist uns alle einig: Die aktuelle Situation im Web kann es schwierig machen, solche Entscheidungen zu treffen.

Das Chrome-Team arbeitet mit anderen Browser-Engines und der Web-Community zusammen, um für mehr Übersichtlichkeit zu sorgen. Dazu gehört auch, dass wir an Projekten wie Interop 2023 arbeiten, um die Interoperabilität einiger wichtiger Funktionen zu verbessern. Aber was ist mit den Funktionen, die in den letzten Jahren eingeführt wurden? Sind experimentelle Funktionen, die wir vor etwa zwei Jahren kennengelernt haben, einsatzbereit?

In diesem Post möchte ich auf einige Funktionen eingehen, die jetzt für alle gängigen Browser-Engines für die letzten beiden Hauptversionen verfügbar sind. Dies ist der Punkt, an dem wir der Meinung sind, dass die Mehrheit der Entwickler der Meinung ist, dass eine Funktion sicher verwendet werden kann. Dies ist der Funktionssatz, den wir als Baseline bezeichnen. Weitere Informationen finden Sie in der Referenz zu Baseline.

Das Dialogelement

Das <dialog>-Element ist ein neues HTML-Element zum Erstellen von Aufforderungen im Dialogfeld, z. B. Pop-ups und modale Fenster.

Definieren Sie dazu das modale Element und öffnen Sie dann das Dialogfeld, indem Sie die Methode showModal() für das Dialogelement aufrufen.

<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 die Beibehaltung des Stapelkontexts integriert. Weitere Informationen finden Sie unter Dialogkomponente erstellen.

Einzelne CSS-Transformationsattribute

CSS-Transformationen sind eine leistungsstarke Methode, um Ihrer Website eine Bewegung hinzuzufügen.
Vielleicht sind Sie mit dem Schreiben von CSS-Transformationen mit drei Eigenschaften in einer Zeile vertraut.
Mit einzelnen Transformationsattributen können Sie jetzt Transformationsattribute einzeln angeben. Dies ist nützlich, 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 Detaillierte Steuerung von 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 nicht.
Manchmal sind eine URL-Leiste und eine Navigationssymbolleiste sichtbar, manchmal werden diese Symbolleisten aber vollständig eingeblendet.
Die tatsächliche Größe des Darstellungsbereichs hängt davon ab, ob die Symbolleisten sichtbar sind oder nicht.
Mit neuen Darstellungsbereich-Einheiten wie svh und lvh haben Webentwickler beim Design für Mobilgeräte mehr Kontrolle. Weitere Informationen finden Sie im Artikel Die großen, kleinen und dynamischen Einheiten für den Darstellungsbereich.

Deep Copy in JavaScript

In der Vergangenheit wurde JSON.stringify mit JSON.parse kombiniert, um eine tiefe Kopie eines Objekts ohne Bezug auf das ursprüngliche Objekt zu erstellen. Dies war ein so häufiger Hack, dass V8, die JavaScript-Engine von Chrome, die Leistung dieses Trick deutlich verbessert hat. Diesen Hack brauchst du aber nicht mehr mit structuredClone.

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

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

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

Weitere Informationen

Die Pseudoklasse :focus-visible

Wir alle kennen diesen „Fokusring“ als Webentwickler wird angezeigt, 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, dass der Fokus sichtbar sein sollte. 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 Abschnitt zum Thema CSS lernen.

Die TransformStream-Schnittstelle

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

Sie können beispielsweise Daten von einem Ort streamen und dann den Datenstream bei der Übertragung an einem anderen Ort komprimieren. Im Artikel Streaminganfragen mit der Fetch API werden Sie Schritt für Schritt durch diesen Beispielanwendungsfall geführt.

Zusammenfassung

Es gibt viele weitere Funktionen, die seit Kurzem interoperabel und stabil sind und auf der Webplattform verwendet werden können. Künftig arbeiten wir mit der WebDX Community Group zusammen, um die Baseline-Funktionen noch klarer zu gestalten. Weitere Informationen finden Sie unter web.dev/baseline.

Wenn Sie auf dem Laufenden bleiben möchten, veröffentlicht unser Team Artikel, sobald eine Funktion interoperabel wird. Außerdem veröffentlicht unser Team monatliche Updates zu den aktuellen Entwicklungen auf der Webplattform – von experimentellen bis hin zu neuen interoperablen Funktionen.

Wir sind immer gefragt, ob unsere Maßnahmen für Sie hilfreich sind oder ob Sie andere Arten von Unterstützung benötigen. Bitte wenden Sie sich an uns über die WebDX Community Group.