Wöchentliche News-Plattform: HTML Laden-Attribut, das Haupt-ARIA-Spezifikationen, und Bewegt von iFrame-Shadow-DOM

0
23

In dieser Woche roundup der news-Plattform, Chrome führt ein neues Attribut für das laden, Zugänglichkeit Spezifikationen für web-Entwickler, und die BBC bewegt sich Visualisierungen auf die Shadow-DOM.

Chrom Schiffe, die be-Attribut

Die HTML-laden-Attribut lazy-laden von Bildern und iframes unterstützt jetzt in Chrome. Sie können hinzufügen, laden=”lazy” zu verschieben, das laden von Bildern und iframes, die sich unterhalb der Ansichtsfenster, bis der Benutzer führt einen Bildlauf in der Nähe von Ihnen.

Google schlägt vor, entweder die Behandlung dieser Funktion als eine progressive enhancement oder Verwendung oben auf Ihre vorhandenen JavaScript-basierte lazy loading-Lösung.

Dieses feature wurde noch nicht Hinzugefügt, um die HTML-Standard – (aber es ist ein offenes pull-Anforderung), und mehrere links zu Google Dokumentation sind aufgelistet in den Chrome Status-Seite.

(via web.dev)

Übersicht über die ARIA-Spezifikationen

Die wichtigsten accessibility-Spezifikationen für web-Entwickler:

Name
Beschreibung
ARIA in HTML Definiert die ARIA-Rolle, Status und Eigentum Attribute zulässig sind, auf welche HTML-Elemente (die implizite ARIA-Semantik, die hier definiert werden)
Mit ARIA Bietet praktische Ratschläge, wie ARIA in HTML, mit einem Schwerpunkt auf dynamischen Inhalten und erweiterte UI-Steuerelemente (die “fünf Regeln des ARIA verwenden” sind hier definiert)
ARIA (Accessible Rich Internet Applications) Definiert die ARIA-Rollen, Zustände und Eigenschaften
ARIA Authoring Practices Enthält Allgemeine Richtlinien zur Nutzung von ARIA zum erstellen Barrierefreier apps (enthält ARIA Implementierung der Muster für die gängigen widgets)
HTML Accessibility-API-Zuordnungen Definiert, wie Browser anzeigen HTML-Elemente und-Attribute, um das Betriebssystem die accessibility-APIs von
WCAG (Web Content Accessibility Guidelines) Bietet Richtlinien für web-Inhalte zugänglicher (Erfolgskriterien für die WCAG-Konformität sind hier definiert)

Im Zusammenhang: “Beitrag zu den ARIA-Authoring Practices Guide” von Simon Pieters und Valerie Young

Shadow DOM auf der BBC-website

Die BBC hat sich von <iframe> zu Shadow DOM für die eingebettete interaktive Visualisierungen auf Ihrer Webseite. Dies hat zu erheblichen Verbesserungen in der Auslastung (“mehr als 25% schneller”).

Die verfügbaren Shadow DOM polyfills nicht zuverlässig verhindern, dass Stile aus undichten über die Shadow-DOM-Grenze, so dass Sie beschlossen, stattdessen fallen Sie zurück zum <iframe> in Browsern, die keine Unterstützung für Shadow-DOM.

Shadow DOM […] können Inhalte in einer ähnlichen Weise zu iframes im Sinne der Kapselung, aber ohne die negativen Gemeinkosten […] Wir wollen, dass die Kapselung der ein-element, dessen Inhalte erscheinen nahtlos als Teil der Seite. Shadow DOM gibt uns, die ohne die Notwendigkeit für ein benutzerdefiniertes element.

Ein wesentlicher Nachteil dieses neuen Ansatzes ist, dass die CSS media queries können nicht mehr verwendet werden, bedingt anwenden von Formatvorlagen auf der Grundlage des Inhalts der Breite (da der Inhalt nicht mehr Lasten in eine separate, eingebettete Dokument).

Mit iframes, media queries die Breite unserer Inhalte; mit dem Schatten, DOM -, Medien-Anfragen geben Sie uns die Breite des Gerätes selbst. Dies ist eine riesige Herausforderung für uns. Wir haben jetzt keine Möglichkeit zu wissen, wie groß unser content ist, wenn es serviert wird.

(via Toby Cox)

In other news…

  • Die nächste version von Chrome einzuführen, die Größte Gehaltvoll Farbe Leistung Metrik; diese neue Metrik ist ein genauer Ersatz für die Erste Sinnvolle Farbe, und Maßnahmen, wenn das größte element gerendert wird in den viewport (in der Regel, das größte Bild oder Textabsatz) (über Phil Walton)
  • Microsoft hat einen Prototyp für ein neues tool zum anzeigen einer web-Seite den DOM in 3D; das tool ist nun experimentell verfügbar in der Vorschau-version von Edge (via Edge DevTools)
  • Tracking-Prävention aktiviert wurde, die standardmäßig in der preview-Versionen von Edge; es ist gesetzt, um eine ausgewogene “Standard”, “blockiert bösartige Tracker und einige third-party Tracker” (via Techdows)

Lesen Sie weitere news in meinem neuen, wöchentlichen Sonntagsausgabe. Besuchen Sie webplatform.news für mehr Informationen.