CSS-hacks? Zo vang je browserverschillen nu op

Als ik vroeger de statistieken van mijn blog bekeek, waren de artikelen met CSS-hacks voor Internet Explorer steevast het best bezocht. Selectorhacks als * html en *:first-child+html, en attribuuthacks met een sterretje of een underscore voor een eigenschap: ze waren nodig om elke browser zijn eigen opmaak te geven.

Die tijd is gelukkig voorbij. Microsoft heeft Internet Explorer in 2022 met pensioen gestuurd, en Chrome, Edge, Firefox en Safari volgen tegenwoordig netjes dezelfde standaarden. Hacks zijn dus niet meer nodig, en ook niet meer verstandig: ze maken je code onleesbaar en kunnen in een nieuwe browserversie zomaar breken. Toch zijn er nog verschillen, vooral bij nieuwe CSS-functies. Zo vang je die op.

Feature queries met @supports

In plaats van te kijken wélke browser iemand gebruikt, kijk je met @supports of de browser een bepaalde functie ondersteunt. Zo niet, dan krijgt de bezoeker gewoon de basisopmaak.

.galerij { display: flex; flex-wrap: wrap; }

@supports (display: grid) {
  .galerij {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

Je kunt ook testen of een selector wordt ondersteund, handig voor nieuwe selectors als :has():

@supports selector(:has(img)) {
  .kaart:has(img) { padding-top: 0; }
}

Progressive enhancement

Het principe daarachter heet progressive enhancement: je begint met een basis die overal werkt en voegt extra’s toe voor browsers die ze aankunnen. Wie een oudere browser gebruikt, krijgt een eenvoudigere, maar werkende pagina. Vaak hoef je daar niet eens @supports voor te gebruiken, want browsers negeren eigenschappen die ze niet kennen. Zet een veilige waarde dan gewoon vóór de nieuwe:

.blok {
  height: 100vh;   /* oudere browsers */
  height: 100dvh;  /* nieuwe browsers, houdt rekening met de adresbalk op telefoons */
}

Vendor-prefixes automatisch

Prefixes als -webkit- en -moz- schrijf je niet meer met de hand. Een tool als Autoprefixer, of de bundler die je toch al gebruikt, voegt ze automatisch toe voor de browsers die je wilt ondersteunen.

Controleer de ondersteuning

Op Can I use zie je per CSS-functie welke browsers die ondersteunen. Op MDN staat bij elke eigenschap ook de Baseline-status: is die “Widely available”, dan kun je de functie zonder zorgen gebruiken.