CSS starter og input styling

Starteren begynder med at gøre elementernes box model ens og fjerne browserens standardafstande:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

box-sizing: border-box betyder, at et elements angivne bredde og højde også inkluderer padding og border. Det gør størrelser lettere at regne med. Pseudo-elementerne ::before og ::after får samme box model som almindelige elementer.

margin: 0 og padding: 0 er en bred reset. Den fjerner også nyttige browser-defaults fra fx fieldset, option og popovers. Derfor får de elementer kontrollerede værdier tilbage senere i starteren.

De første regler giver siden nogle mere rolige og forudsigelige tekst-defaults:

html {
  interpolate-size: allow-keywords;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  line-height: 1.25;
}

p,
li {
  text-wrap: pretty;
}

font-family og line-height gør teksten mere læsbar.
h1 og h2 får en lidt strammere linjehøjde, så overskrifter ikke virker for luftige.
text-wrap: pretty prøver at lave pænere linjeskift i brødtekst. interpolate-size: allow-keywords; gør det muligt at animere til og fra keyword-værdier som auto.

Billeder og SVG’er får nogle sikre defaults:

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

display: block fjerner noget af den luft, billeder ellers kan få som inline-elementer.
width: 100% og height: auto gør dem mere fleksible i layouts.

Her starter den del, som er mest relevant for forms:

label {
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background-color: transparent;
  font-size: max(1em, 16px);
  padding: 0;
  margin: 0;
}

label { display: block; } gør, at label og felt nemmere kan stå under hinanden.
font: inherit og color: inherit gør, at felterne bedre passer sammen med resten af siden.
padding: 0 og margin: 0 nulstiller browserens egne defaults, så du lettere selv kan style videre.

font-size: max(1em, 16px) er især smart på mobil, fordi meget små input-felter kan give mærkelig zoom.

Nogle form-controls opfører sig lidt anderledes og har derfor brug for ekstra regler:

input:where([type="checkbox"],[type="radio"]) {
  width: 1em;
  height: 1em;
}

textarea {
  resize: none;
  min-height: 4lh;
}

Checkboxes og radio buttons får en mere ens størrelse.
textarea får en minimumshøjde, så den ikke starter alt for lille.
resize: none fjerner browserens resize-håndtag, hvis man ikke ønsker det i designet.

Her får enkelte native elementer kontrollerede defaults tilbage efter den brede reset:

fieldset {
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
}

legend {
  padding: 0;
}

option {
  padding-inline: 8px;
}

[popover] {
  margin: revert;
}

select,
::picker(select) {
  appearance: base-select;
}

fieldset og option får noget af den luft tilbage, som reset-reglen fjernede, mens legend fortsat nulstilles. margin: revert giver popovers browserens native margin tilbage, så deres standardplacering bevares. appearance: base-select gør det lettere at style select og den tilhørende picker mere ensartet i browsere, der understøtter funktionen.

Den sidste regel er en klassisk utility class:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
  clip-path: inset(50%);
}

Den bruges, når noget skal være skjult visuelt, men stadig kunne læses af fx en skærmlæser. margin: -1px trækker den 1×1 pixel store boks væk fra en mulig scrollkant, mens clip-path skjuler selve indholdet.