Custom properties: Indstillinger og relationer

Mere end farvevariabler

Custom properties er navngivne værdier, som deltager i kaskaden og normalt arves. De kan beskrive et designs afstande, en komponents indstillinger eller et tal, der bruges i flere beregninger. Målet er, at en ændring ét sted får de rigtige konsekvenser flere steder.

Slides skelner mellem flere anvendelser:

--_ er kun en navnekonvention. Det gør ikke variablen privat og forhindrer hverken arv eller overskrivning.

Saml komponentens tilpasning

En card-wrapper er allerede en size-query-container i øvelsen. Kortet gentager den samme query for padding, overskrift og knapper. Saml beslutningen ét sted, og lad de enkelte regler læse værdierne:

.card {
  padding: var(--card-padding, 1rem);

  @container (width > 30ch) {
    --card-padding: 2rem;
    --card-heading: 2.5rem;
    --card-actions-direction: row;
  }

  h2 {
    font-size: var(--card-heading, 1.5rem);
  }

  .card-actions {
    flex-direction: var(--card-actions-direction, column);
  }
}

Prøv selv: Refaktorér den gentagne query, og kontrollér, at kortet stadig ændrer de tre ting ved samme bredde. En query nestet i .card gælder allerede i kortets kontekst. En ekstra .card inde i den vil vælge et efterkommer-kort, ikke det oprindelige kort.

Tokens og flow-space

En fælles spacing-skala giver et udgangspunkt. En lokal variabel kan derefter beskrive relationen mellem bestemte elementer:

:root {
  --space-sm: 1rlh;
  --space-lg: 2rlh;
}

.flow > * {
  margin-block: 0;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-sm));
}

.flow > h2 {
  --flow-space: var(--space-lg);
}

--flow-space sættes på det element, der skal have afstand før sig. Se også flow-space og spacing.

Fallback og lokale værdier

var(--value, 10px) bruger fallback, når variablen mangler eller har en ugyldig custom-property-værdi. Det er ikke generel typekontrol: --value: banana findes godt, men kan stadig gøre padding: var(--value, 10px) ugyldig uden at aktivere 10px.

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

@media (width > 40em) {
  .grid { --cols: 5; }
}

Vælg bevidst, hvor en værdi defineres. En deklaration direkte på komponenten vinder over en arvet værdi, uanset hvor specifik forælderens selector er. Brug fx padding: var(--card-padding, 1rem), hvis en forælder skal kunne levere indstillingen uden at komponenten nulstiller den.

Samme animation, forskellige værdier

En animation kan genbruges med et forskelligt mål pr. element:

.object-1 { --move-to: 100px; }
.object-2 { --move-to: 400px; }

[class|="object"] {
  animation: move 1s linear forwards;
}

@keyframes move {
  to { translate: var(--move-to); }
}

@media (prefers-reduced-motion: reduce) {
  [class|="object"] { animation: none; }
}

Her animeres translate; vi behøver ikke registrere custom property’en med @property for at bruge den som slutværdi.

Åbn animationseksemplet fra slides.

SVG som en dekorativ ressource

En custom property kan også indeholde en url() med en SVG-data-URL. Brug en korrekt URL-kodet SVG. Til ensfarvede ikoner er en mask nyttig: SVG’en bestemmer formen, mens background-color bestemmer farven.

Data-URL’en er en separat billedressource. CSS på siden kan ikke vælge dens interne paths som ved inline SVG i HTML. Behold betydningsbærende tekst og tilgængelige navne i HTML; brug dette mønster til dekorative ikoner.

Genbrug uden at skjule hensigten

DRY betyder at undgå unødig gentagelse. Det er nyttigt, når flere værdier skal følges ad, men en enkelt direkte CSS-regel kan være lettere at læse end et kompliceret variabelsystem. Undersøg i slidets eksempler, hvilke værdier der deles, og hvilke der ændres lokalt.

Læs mere om kategorier af custom properties. Fortsæt med tal og lineær mapping.