Design system ten op zichte van CSS

all

all: revert kan de display property aanpassen, waardoor het hidden HTML attribute niet werkt. Lees onder onder display wat een oplossing is.

display

Het display attribuut overschrijft de browser stylesheet voor het hidden attribuut, waardoor je onverwacht gedrag hebt wanneer je hidden gebruikt op componenten.

Wanneer je display gebruikt, zorg dat het hidden HTML attribuut nog steeds werkt. Bijvoorbeeld:

.my-selector {
  display: flex;
}

.my-selector[hidden] {
  display: none;
}

Bij web components kun je het zo doen:

:host {
  display: contents;
}

:host[hidden] {
  display: none;
}

font-size

• Gebruik geen font-size kleiner dan 16px.
• Gebruik een

font-weight

• Let op wanneer je font-weight gebruikt bij states zoals hover, focus of aria-current, dat er geen layout shift ontstaat. Zie ook: Bold on Hover… Without the Layout Shift — CSS Tricks.
• Bij een font-weight lager dan 400 wordt het contrast met de achtergrond lager, kies eventueel een kleur met meer contrast.
• We gebruiken 400 en 700 in plaats van keywords zoals normal en bold, omdat ze als design token duidelijker zijn in andere platforms.

overflow: hidden

Let op dat de focus ring van componenten binnen zo’n element volledig zichtbaar is, bijvoorbeeld door padding te gebruiken die groter is dan calc(var(--utrecht-focus-outline-width, 0) + var(--utrecht-focus-outline-offset, 0)).

pointer-events: none

Gebruik pointer-events: none niet om een interactief element disabled te maken, want toetsenbord gebruikers kunnen dan nog wel het component activeren. Gebruik een HTML attribuut zoals disabled, of gebruik event.preventDefault() in een script.

top, right, bottom en left

• Gebruik in de meeste gevallen inset-inline-start in plaats van left.
• Gebruik in de meeste gevallen inset-inline-end in plaats van right.
• Gebruik in de meeste gevallen inset-block-start in plaats van top.
• Gebruik in de meeste gevallen inset-block-end in plaats van bottom.

user-select: none

Onder andere de volgende componenten moeten user-select: none; gebruiken:

• form controls zonder tekstinvoer:
  • checkbox
  • radio button
  • toggle button
• knoppen
  • button
  • button that looks like a link
• componenten die niet moeten reageren op interactie (inerte componenten)
  • backdrop