Grundlegende Features, die Sie derzeit verwenden können

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

Mariko Kosaka

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 unterstützen alle Browser-Engines diese neue Funktion?“ „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. Wir sind uns jedoch alle einig, dass es aufgrund der aktuellen Situation im Web schwierig sein kann, diese 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ören unsere Arbeiten an Projekten wie Interop 2023, mit denen die Interoperabilität einer Reihe wichtiger Funktionen verbessert wird. 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. Ab diesem Grenzwert sind wir der Meinung, dass die Mehrheit der Entwickler eine Funktion als sicher empfindet. Diese Funktionen werden als Baseline bezeichnet. Weitere Informationen finden Sie in der Ankündigung von Baseline.

Das Dialogfeld-Element

Das <dialog>-Element ist ein neues HTML-Element zum Erstellen von Dialogaufforderungen wie Pop-ups und Modals.

Unterstützte Browser

• 37
• 79
• 98
• 15.4

Quelle

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

Mithilfe von CSS-Transformationen können Sie Ihrer Website Bewegung verleihen.
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;
}

Unterstützte Browser

• 104
• 104
• 72
• 14.1

Quelle

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 Große, kleine und dynamische Darstellungsfenster.

Unterstützte Browser

• 108
• 108
• 101
• 15.4

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. Dieser Hack war so weit verbreitet, dass V8 (die JavaScript-Engine von Chrome) die Leistung dieses Tricks drastisch verbesserte. Mit structuredClone ist dieser Hack jedoch nicht mehr erforderlich.

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

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

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

Unterstützte Browser

• 98
• 98
• 94
• 15.4

Quelle

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 für den Fall angeben, dass der Fokus sichtbar sein soll.

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

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

Unterstützte Browser

• 86
• 86
• 85
• 15.4

Quelle

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 den Datenstream dann bei der Weitergabe an einen anderen Speicherort komprimieren. Im Artikel Streaminganfragen mit der Fetch API wird dieser Beispielfall veranschaulicht.

Unterstützte Browser

• 67
• 79
• 102
• 14.1

Quelle

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. Aktuelle 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.