Moderne CSS-features og kompatibilitet

Nye features er ikke bare “bling”

Mange af de nyere CSS-features løser små, men reelle UI-problemer, som før krævede hacks eller ekstra wrappers. Pointen er ikke at bruge alt nyt bare fordi det er nyt, men at kende de features der faktisk gør komponenter enklere eller mere præcise.

text-box er et eksempel på netop det: en feature der løser et gammelt layout-problem meget mere direkte.

text-box: trim overskydende luft omkring tekst

text-box gør det muligt at trimme den ekstra plads, der normalt ligger over og under tekst. Det er især nyttigt, når en overskrift skal centreres mere visuelt i en card-, knap- eller badge-lignende UI-komponent.

h1 {
  text-box: trim-start cap alphabetic;
}

Det er et godt eksempel på en feature, der forbedrer præcisionen i UI’et, men som stadig bør tænkes sammen med kompatibilitet. Hvis browseren ikke understøtter den, skal komponenten stadig være brugbar.

margin-trim

margin-trim er en beslægtet idé: at kunne lade en container trimme ydermargenerne fra sit indhold mere direkte.

article {
  margin-trim: block;

  > * {
    margin-block: 1rlh;
  }
}

Det er værd at kende, fordi det viser retningen i moderne CSS: flere features der flytter klassiske “cleanup-hacks” ind i selve sproget. Men det er også en god påmindelse om, at ikke alle nye features er lige modne, så støtte og fallback skal tænkes med fra start.