In der dieswöchigen Zusammenfassung von Plattform-Nachrichten stellt Chrome ein neues Attribut für das Laden vor, Spezifikationen zur Barrierefreiheit für Webentwickler und die BBC verlagert Visualisierungen in den Shadow DOM.
Chrome liefert das Loading-Attribut
Das HTML-loading-Attribut zum verzögerten Laden von Bildern und Iframes wird nun in Chrome unterstützt. Sie können loading="lazy" hinzufügen, um das Laden von Bildern und Iframes, die sich *unterhalb* des Viewports befinden, zu verzögern, bis der Benutzer sich ihnen nähert.
Google schlägt vor, diese Funktion entweder als progressive Verbesserung zu behandeln oder sie über Ihre bestehende JavaScript-basierte Lösung zum verzögerten Laden zu verwenden.
Diese Funktion wurde noch nicht zum HTML-Standard hinzugefügt (aber es gibt eine offene Pull-Anfrage), und mehrere Links zur Dokumentation von Google sind auf der Chrome Status-Seite aufgeführt. (via web.dev)
Überblick über ARIA-Spezifikationen
Die wichtigsten Spezifikationen zur Barrierefreiheit für Webentwickler
| Name | Beschreibung |
|---|---|
| ARIA in HTML | Definiert, welche ARIA-Rollen-, Zustands- und Eigenschaftsattribute auf welchen HTML-Elementen zulässig sind (die impliziten ARIA-Semantiken sind hier definiert) |
| ARIA verwenden | Bietet praktische Ratschläge zur Verwendung von ARIA in HTML mit Schwerpunkt auf dynamischen Inhalten und erweiterten UI-Steuerelementen (hier sind die „fünf Regeln für die ARIA-Nutzung“ definiert) |
| ARIA (Accessible Rich Internet Applications) | Definiert die ARIA-Rollen, Zustände und Eigenschaften |
| ARIA Authoring Practices | Bietet allgemeine Richtlinien zur Verwendung von ARIA zur Erstellung zugänglicher Anwendungen (enthält ARIA-Implementierungsmuster für gängige Widgets) |
| HTML Accessibility API Mappings | Definiert, wie Browser HTML-Elemente und -Attribute auf die Barrierefreiheits-APIs des Betriebssystems abbilden |
| WCAG (Web Content Accessibility Guidelines) | Bietet Richtlinien zur besseren Zugänglichkeit von Webinhalten (hier sind Erfolgskriterien für die WCAG-Konformität definiert) |
Verwandt: „Beitrag zum ARIA Authoring Practices Guide“ von Simon Pieters und Valerie Young
Shadow DOM auf der BBC-Website
Die BBC ist für die eingebetteten interaktiven Visualisierungen auf ihrer Website von <iframe> auf Shadow DOM umgestiegen. Dies führte zu erheblichen Verbesserungen der Ladeleistung („mehr als 25 % schneller“).
Die verfügbaren Shadow DOM Polyfills verhinderten nicht zuverlässig, dass Stile über die Shadow DOM-Grenze hinauslecken, daher entschieden sie sich stattdessen, in Browsern, die Shadow DOM nicht unterstützen, auf <iframe> zurückzugreifen.
Shadow DOM [...] kann Inhalte auf eine ähnliche Weise wie Iframes in Bezug auf die Kapselung liefern, jedoch ohne die negativen Overhead-Kosten [...]. Wir wünschen uns eine Kapselung eines Elements, dessen Inhalt nahtlos als Teil der Seite erscheint. Shadow DOM bietet uns dies ohne die Notwendigkeit eines benutzerdefinierten Elements.
Ein wesentlicher Nachteil dieses neuen Ansatzes ist, dass CSS-Media-Queries nicht mehr verwendet werden können, um Stile bedingt basierend auf der Breite des Inhalts anzuwenden (da der Inhalt nicht mehr in einem separaten, eingebetteten Dokument geladen wird).
Mit Iframes lieferten uns Media Queries die Breite unserer Inhalte; mit Shadow DOM liefern uns Media Queries die Breite des Geräts selbst. Dies ist eine große Herausforderung für uns. Wir haben jetzt keine Möglichkeit zu wissen, wie groß unsere Inhalte sind, wenn sie ausgeliefert werden.
(via Toby Cox)
In anderen Nachrichten…
- Die nächste Version von Chrome wird die Leistungsmetrik **Largest Contentful Paint** einführen; diese neue Metrik ist ein genauerer Ersatz für First Meaningful Paint und misst, wann das größte Element im Viewport gerendert wird (normalerweise das größte Bild oder der größte Textabsatz) (via Phil Walton)
- Microsoft hat einen Prototyp eines neuen Tools zur Anzeige der **DOM einer Webseite in 3D** erstellt; dieses Tool ist jetzt experimentell in der Vorschauversion von Edge verfügbar (via Edge DevTools)
- **Tracking-Schutz** ist in den Vorschauversionen von Edge standardmäßig aktiviert; er ist standardmäßig auf „Ausgeglichen“ eingestellt, was „bösartige Tracker und einige Drittanbieter-Tracker blockiert“ (via Techdows)
Lesen Sie weitere Nachrichten in meiner neuen, wöchentlichen **Sonntagsausgabe**. Besuchen Sie webplatform.news für weitere Informationen.
Es wäre sehr schön zu sehen, dass natives Lazyload stabil ist. Ich freue mich darauf. Ich glaube, es wird beliebter werden, nachdem Google Chrome damit begonnen hat, es zu unterstützen.
Soweit ich das verstanden habe, ist loading=”lazy” eigentlich das Standardverhalten. Müssen Entwickler also gar nichts tun, es sei denn, sie wollen, dass es nicht passiert?
Ich wünschte. Der Artikel von Google ist dazu nicht sehr klar, aber Browser laden leider alle Bilder eifrig (Demo). Das ist der ganze Grund, warum das `loading`-Attribut überhaupt benötigt wurde, und Googles Artikel hätte das meiner Meinung nach besser erklären können.
Ich denke, der eigentliche Punkt ist, dass Chrome das eifrige Laden stoppen und standardmäßig verzögert laden wird.
Ich kann mich nicht erinnern, wo ich es gesehen habe (möglicherweise Addy auf Twitter), aber es gibt einige Artikel, die darauf hindeuten, dass es ab Version 75 standardmäßig sein sollte.
https://www.androidpolice.com/2019/04/08/google-chrome-to-support-lazy-loading-by-default-starting-with-version-75/
https://hexus.net/tech/news/software/129404-google-chrome-75-support-lazy-loading-default/
Siehe https://twitter.com/addyosmani/status/1161712160466034694.
Das ist eigentlich, was ich im Sinn hatte: https://addyosmani.com/blog/lazy-loading/
Der Standard ist 'auto', was normalerweise Bilder im Viewport lädt und alles darunter verzögert lädt.
Also scheint es mir, dass Entwickler tatsächlich gar nichts tun müssen und der Standard vielleicht die beste Option ist, anstatt alles verzögert zu laden, egal ob es sich im Viewport befindet oder nicht.
Das bedeutet, der Browser kann frei wählen, ob er standardmäßig verzögert laden möchte oder nicht.
Wenn Sie dem Link zu Twitter folgen, den ich oben gepostet habe, sehen Sie einen Tweet von Addy, in dem es heißt: „Der Standardwert ist eager“, was bedeutet, dass Chrome standardmäßig nicht verzögert lädt.