Defensive CSS (Gotchas)

Defensive CSS i praksis

Defensive CSS betyder, at du koder til virkelige data, ikke kun den pæne demo-tilstand.

Typiske fejl sker når:

• labels bliver længere end forventet
• tekst indeholder lange ord uden naturlige mellemrum
• billeder har uforudsigelige proportioner
• elementer antages at kunne krympe, men ikke må det i browserens default

De automatiske minimumsstørrelser hænger sammen med intrinsic sizing. Et element kan have brug for mere plads, end layoutet umiddelbart ser ud til at give det.

Gotcha 1: Rækker der ikke må bryde

Løsningen i Flex Wrap viser den mest klassiske defensive regel:

ul {
  display: flex;
  flex-wrap: wrap;
}

Wrapping lader elementer fortsætte på en ny række. Et enkelt element, der er bredere end containeren, kræver dog også en strategi for sin egen størrelse eller tekstombrydning.

Gotcha 2: Tekst + billede i flex-card

I Flex Image ligger det defensive i at undgå “mærkelig” vertikal strækning:

.flex-card {
  display: flex;
  gap: 1rem;
  align-items: start;
}

Det gør relationen mellem tekstblok og billede mere stabil, især når teksten bliver lang.

Gotcha 3: Grid-billeder med uens højde

I Grid Image stabiliseres billedet med:

.grid-card img {
  align-self: stretch;
  object-fit: cover;
}

Det giver et mere robust layout, hvor billedet fylder sit spor uden at ødelægge proportionerne visuelt.

Gotcha 4: Flex-items der nægter at krympe

I Flex Images er nøglegrebet:

.flex-card img {
  min-width: 0;
}

min-width: auto på flex-items giver ofte overraskelser. Med min-width: 0 tillader du faktisk shrink.

Gotcha 5: Grid med 1fr og lange ord

I Grid Fractions er løsningen eksplicit defensiv:

.grid-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  hyphens: auto;
}

minmax(0, 1fr) tillader kolonnerne at krympe under indholdets min-content-størrelse. Det gør ikke automatisk teksten smallere: tekstombrydning skal også håndteres. hyphens: auto kræver et passende lang på indholdet og understøttelse af sprogets orddeling.

Gotcha 6: Uforudsigelige labels (stress-test)

German Flex er en klassisk stress-case: korte labels bliver til meget lange ord.

Start med Flex på knap-containeren, tillad wrapping, og styr afstandene med gap. Skift derefter mellem engelsk og tysk i øvelsen.

Wrapping flytter hele knapper mellem rækker; det bryder ikke i sig selv et langt ord inde i en knap. Undersøg derfor både knappernes minimumsbredde og tekstens muligheder for ombrydning. min-width: 0 kan tillade krympning, og overflow-wrap: anywhere kan give lange ord flere brydepunkter. Vælg en løsning, hvor teksten stadig er læsbar og knapperne kan bruges.

Mini-checkliste til defensive layouts

1. Har alle fleksible rækker en bevidst wrapping-strategi?
2. Har flex/grid-items lov at krympe (min-width: 0 / minmax(0, 1fr))?
3. Er billeder styret af spor/kontekst (object-fit, stretch), ikke tilfældig intrinsic størrelse?
4. Har du testet med lange ord, lange labels og ekstra afsnit?