Varje vecka Plattform Nyheter: HTML Laddar Attribut, de Viktigaste ARIA Specifikationer, och Flyttar från iFrame att Skugga DOM

0
25

I veckans roundup av plattform för nyheter, Chrome introducerar ett nytt attribut för lastning, tillgänglighet specifikationer för webbutvecklare, och BBC flyttar visualiseringar för att Skuggan DOM.

Chrome fartyg, lastning attribut

HTML-laddar-attributet för lat för laddning av bilder och iframes stöds nu i Chrome. Du kan lägga till lastning=”lata” för att skjuta upp inläsningen av bilder och iframes som är under vyport tills användaren förflyttar sig i närheten av dem.

Google föreslår antingen att behandla denna funktion som en progressiv förbättring eller för att använda det på toppen av din befintliga JavaScript-baserade lat laddning lösning.

Den här funktionen har ännu inte lagts till HTML-Standarden (men det är en öppen pull request), och flera länkar till Googles dokumentation är listade på sin Chrome-Status sida.

(via webben.dev)

Översikt av ARIA specifikationer

De viktigaste tillgänglighet specifikationer för webbutvecklare:

Namn
Beskrivning
ARIA i HTML Definierar som ARIA roll, stat, och egendom attribut är tillåtna HTML-element (implicit ARIA semantik definieras här)
Med ARIA Ger praktiska råd om hur man använder ARIA i HTML, med betoning på dynamiskt innehåll och avancerade UI-kontroller (“fem regler för ARIA använda” definieras här)
ARIA (Accessible Rich Internet Applications) Definierar ARIA roller, stater och egenskaper
ARIA Författande Praxis Ger allmänna riktlinjer om hur man använder ARIA för att skapa tillgängliga apps (inkluderar ARIA genomförandet mönster för gemensamma widgets)
HTML-Accessibility API-Mappningar Definierar hur webbläsare karta HTML-element och attribut operativsystemet tillgänglighet Api: er
WCAG (Web Content Accessibility Guidelines) Ger riktlinjer för att göra webbinnehåll mer tillgängligt (kriterier för framgång för WCAG överensstämmelse definieras här)

Relaterat: “Bidra till ARIA Författande Praxis Guide” av Simon Pieters och Valerie Unga

Shadow DOM på BBC webbplats

BBC har flyttat från <iframe> – att Skugga DOM för den inbyggda interaktiva visualiseringar på sin webbplats. Detta har resulterat i betydande förbättringar i lasten prestanda (“mer än 25% snabbare”).

Det finns Skugga DOM polyfills inte på ett tillförlitligt sätt förhindra stilar från att läcka över Skuggan DOM gränsen, så de bestämde sig för att i stället falla tillbaka till <iframe> i webbläsare som inte stöder Skugga DOM.

Shadow DOM […] kan leverera innehåll på ett liknande sätt som iframe i form av inkapsling, men utan de negativa omkostnader […] Vi vill inkapsling av ett element vars innehåll kommer att visas smidigt som en del av sidan. Shadow DOM ger oss att utan något behov av ett anpassat element.

En stor nackdel med detta nya synsätt är att CSS media queries kan inte längre användas för att villkorligt tillämpa format baserat på innehållets bredd (eftersom innehållet inte längre laddas i en separat, inbäddade dokument).

Med iframes, media frågor skulle ge oss den bredd av vårt innehåll; med Shadow DOM, media frågor och ge oss den bredd av själva enheten. Detta är en enorm utmaning för oss. Nu har vi inget sätt att veta hur stort vårt innehåll är när det serveras.

(via Toby Cox)

I andra nyheter…

  • Nästa version av Chrome kommer att införa den Största Contentful Måla prestandamått; detta nya mått är en mer korrekt ersättning för Första Meningsfull Måla, och det åtgärder när det största elementet är utförda i visningsområdet (vanligtvis den största bild eller en punkt i texten) (via Phil Walton)
  • Microsoft har skapat en prototyp av ett nytt verktyg för att visa en webbsida DOM i 3D; detta verktyg är nu experimentellt tillgängliga i den förhandsversion av Edge (via Edge DevTools)
  • Spårning förebyggande åtgärder har varit aktiverad som standard i preview-versioner av Kant; det är som att balanseras av standard, som “blockerar skadliga trackers och någon tredje part trackers” (via Techdows)

Läs fler nyheter på min nya, veckovis söndag frågan. Besök webplatform.nyheter för mer information.