Defensive CSS (Gotchas)

Hvad betyder “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

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;
}

Når indholdet får lov at wrappe, undgår du clipping og horisontal overflow.

Gotcha 2: 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 3: 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 4: 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) forhindrer, at min-content størrelse presser kolonnerne ud over containeren.

Gotcha 5: 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 6: Uforudsigelige labels (stress-test)

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

Her er intent typisk:

• brug flex på knap-containeren
• tillad wrapping
• styr spacing med gap

Så layoutet overlever sprogskift uden hacks.

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?