Tilbage til Data og komponentkontekst

Kontekstdrevet UI

Typed attr(): fra HTML-data til CSS-værdi

Læs tal, længder, farver og afgrænsede keywords fra HTML uden at behandle alt som tekst.

Se undervisningsslides

Relevante links

TL;DR

  1. Klassisk attr() giver primært tekst til content; typed attr() kan levere værdier til almindelige CSS-properties.
  2. type() beskriver den tilladte CSS-syntaks, og fallbacken bruges ved manglende eller ugyldige attributter.
  3. HTML-data kan blive et input til CSS, men data med egentlig forretningslogik hører stadig hjemme i applikationen.

Fra streng til datatype

Et HTML-attribut er tekst. Med typed attr() kan browseren parse teksten som en bestemt CSS-type:

<h2 data-color="oklch(0.62 0.24 28)">Status</h2>
[data-color] {
  color: attr(data-color type(<color>), currentColor);
}

Hvis værdien mangler eller ikke kan parses som en farve, bruges fallbacken. Det gør kontrakten tydeligere end at indsætte en vilkårlig token-sekvens.

Data som CSS-input

Typed attr() er især nyttig, når markup eller JavaScript allerede ejer en lille præsentationsværdi:

<div class="bar" data-percent="70"></div>
.bar {
  block-size: attr(data-percent %, 0);
}

Her betyder % efter attributnavnet, at tallet skal fortolkes med den unit. Hvis attributten selv indeholder en komplet værdi som 5rem, kan du i stedet bruge type(<length>).

Det giver en enkel ansvarsdeling:

Keywords og progressiv forbedring

type() kan også beskrive et lukket sæt af keywords:

.notification {
  --variant:
    attr(data-variant type(info | success | danger), info);
}

Det minder om en string literal union i TypeScript:

type Variant = "info" | "success" | "danger";

Det er en nyttig kontrakt, men ikke en erstatning for validering af vigtig applikationsdata. Brug mønsteret til præsentationsinput og komponentvarianter.

Se mere