Grundlegende Features, die Sie derzeit verwenden können

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

Das Web entwickelt sich ständig und Browser werden ständig aktualisiert, um Entwicklern neue Tools für Innovationen auf der Plattform zur Verfügung zu stellen. Funktionen, für die bisher Hilfsbibliotheken erforderlich waren, werden Teil der Webplattform 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 in all diesen Updates zurechtzufinden. Als Entwickler stellen wir uns Fragen wie: „Wann werden alle Browser-Engines diese neue Funktion unterstützen?“ „Ab wann kann ich diese Funktionen in meinem Produktionscode verwenden?“ „Wie lange sollten wir ältere Browser unterstützen?“

Die richtige Antwort lautet „Es kommt darauf an“. Was erforderlich und was nutzbar ist, hängt von Ihrer Nutzerbasis, Ihrem Tech-Stack, Ihrer 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 Klarheit 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 die experimentellen Funktionen, die wir vor zwei Jahren kennengelernt haben, einsatzbereit?

In diesem Beitrag möchte ich einige Funktionen hervorheben, die jetzt für alle gängigen Browser-Engines in den 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 Dialogaufforderungen wie Pop-ups und Modals.

Definieren Sie dazu das modale Element und öffnen Sie das Dialogfeld, indem Sie die Methode showModal() auf das Dialogfeldelement 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 Beibehalten des Stapelns integriert. Weitere Informationen finden Sie unter Dialogkomponente erstellen.

Einzelne CSS-Transformationseigenschaften

CSS-Transformationen sind eine leistungsstarke Methode, um Ihrer Website eine Bewegung hinzuzufügen.
Vielleicht kennen Sie CSS-Transformierungen mit drei Eigenschaften in einer Zeile.
Mit individuellen Transformationseigenschaften können Sie jetzt Transformationseigenschaften einzeln angeben. Das ist praktisch, wenn Sie komplexe Keyframe-Animationen schreiben.

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

Eine ausführliche Erklärung dieser Änderung finden Sie im Hilfeartikel Detailliertere Steuerung von CSS-Transformationen mit einzelnen Transformationseigenschaften.

Neue Darstellungsbereichseinheiten

Auf Mobilgeräten wird die Größe des Darstellungsbereichs durch das Vorhandensein oder Fehlen dynamischer Symbolleisten beeinflusst.
Manchmal sind die URL-Leiste und die Navigationsleiste sichtbar, manchmal aber auch vollständig ausgeblendet.
Die tatsächliche Größe des Darstellungsbereichs hängt davon ab, ob die Symbolleisten sichtbar sind oder nicht.
Mit neuen Darstellungseinheiten wie svh und lvh haben Webentwickler mehr Kontrolle beim Entwerfen 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

In der Vergangenheit wurde häufig JSON.stringify mit JSON.parse kombiniert, um eine Deep Copy eines Objekts ohne Verweis auf das Originalobjekt 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 finden Sie unter Deep-Copy in JavaScript mit structuredClone.

Die Pseudoklasse :focus-visible

Als Webentwickler kennen wir alle diesen „Fokusring“, der angezeigt wird, wenn Sie mit der Tastatur auf einer Seite navigieren oder auf Eingabeelemente klicken. Es ist eine notwendige Funktion für die Barrierefreiheit, aber manchmal beeinträchtigt es das visuelle Design für verschiedene Nutzer. Mit der CSS-Pseudoklasse :focus-visible wird geprü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 Fokusbereich „CSS lernen“.

Die TransformStream-Schnittstelle

Mit der TransformStream-Schnittstelle der Streams API können Streams ineinander geleitet werden.

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 wird dieser Beispielfall veranschaulicht.

Zusammenfassung

Es gibt viele weitere Funktionen, die vor Kurzem interoperabel und stabil auf der Webplattform nutzbar wurden. In Zukunft werden wir mit der WebDX Community Group zusammenarbeiten, um diese Baseline-Funktionen klarer zu definieren. Weitere Informationen finden Sie unter web.dev/baseline.

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

Wir sind immer daran interessiert, ob wir Ihnen helfen können oder ob Sie andere Arten von Unterstützung benötigen. Wenden Sie sich dazu bitte an die WebDX-Community-Gruppe.