Interest Invokers og Command-attributten

Det første sæt dækker almindelige mønstre i brugergrænseflader: visning og skjulning af dialoger (det indbyggede <dialog>), skift af popovers (Popover API) og flere kommandoer over tid. Brugerdefinerede elementer kan angive, hvilke kommandoer de accepterer, via oncommand-hændelseshåndterere.

Ud over de indbyggede kommandoer tillader specifikationen brugerdefinerede kommandostreng, der begynder med "--". Mål-elementet modtager en command-hændelse, som du kan håndtere i JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Attributten interesttarget markerer et elements "interesse"-mål — typisk et værktøjstip, der vises, når markøren holdes over elementet, eller når det får fokus. Browseren håndterer automatisk timingen (300 ms forsinkelse ved hensigt om at holde markøren over elementet), placeringen (med ankerpositionering) og lukningen.

Popover-tilstanden hint er beregnet til værktøjstip-lignende popovers, der vises ved interesse. De er ikke-modale, stjæler ikke fokus og lukkes, når interessen ophører. Kombinationen af interesttarget + popover="hint" giver dig et indbygget værktøjstip med to HTML-attributter.

Indbyggede dialoger håndterer fastholdelse af fokus; indbyggede popovers håndterer stabling; og indbyggede interesseudløsere håndterer tidsforsinkelsen ved hensigt om at holde markøren over elementet samt annoncerer relationer til skærmlæsere. Når du erstatter brugerdefinerede JS-implementeringer med disse deklarative grundelementer, forbedres tilgængeligheden pålideligt.

Disse funktioner er stadig under standardisering. De nøjagtige attributnavne og kommandosættet kan ændre sig. Browserimplementeringer kommer først i Chromium. Brug i produktion bør vente, indtil navngivningen er stabil, og mindst to browsere understøtter funktionerne — sandsynligvis inden for det næste år eller to.

Hver af disse funktioner erstatter JavaScript, som er blevet skrevet og omskrevet millioner af gange: dialoghåndtering, popoverudløsere og værktøjstip-adfærd. Når disse mønstre flyttes ind i HTML, bliver siderne mindre, konsistensen forbedres, og browseren kan anvende optimeringer.

Open UI-fællesskabsgruppen (open-ui.org) driver en stor del af dette arbejde — den foreslår, laver prototyper af og fører nye HTML-elementer og -attributter gennem standardiseringsprocessen. Følg deres blog for de nyeste forslag.

command, interesttarget, popover, dialog, anchor positioning, view transitions og tilpasningsbare select-elementer er alle del af den samme sammenhængende indsats for at flytte mønstre fra komponentbiblioteker ind i platformen. Hver funktion er lille i sig selv; tilsammen udgør de den største udvidelse af HTML's ordforråd for brugergrænseflader i årevis.

Følg forslagene på open-ui.org, eksperimentér i Chromium med aktiverede funktionsflag, og planlæg at tage funktionerne i brug, efterhånden som de bliver stabile. Gennemgå din eksisterende kodebase, og opgør, hvor meget JS der bruges til understøttelse af dialoger, popovers og værktøjstip. Den kode er målrettet til udskiftning inden for få udgivelser.

To nye funktioner udvider HTML's deklarative ordforråd for brugergrænseflader: command + commandfor til klikudløste handlinger (vis modal, skift popover) og interesttarget + popover="hint" til hover- eller fokusudløste værktøjstip. Begge erstatter almindelige JavaScript-mønstre med HTML-attributter, hvilket forbedrer tilgængeligheden og reducerer pakkestørrelsen. Funktionerne er stadig under udvikling; følg Open UI, mens de stabiliseres, og tag dem i brug, efterhånden som browserunderstøttelsen kommer.