Hogyan biztosított a CSS keresztböngészős támogatása?

A CSS több böngésző közötti támogatását több módon biztosítják:

• Vendor prefixek használata olyan tulajdonságokhoz, amelyek még nem szabványosítottak vagy nem támogatottak minden böngészőben (pl. -webkit-, -moz-, -ms-).
• A tulajdonságok támogatásának ellenőrzése olyan eszközökkel, mint a Can I Use, hogy megértsük, mely tulajdonságokat támogatják a célzott böngészők.
• CSS reset vagy normalizerek (normalize.css) használata a különbségek kiküszöbölésére az alapértelmezett stílusokban.
• Progresszív fejlesztés és gracefully degradation alkalmazása — úgy írjuk a stílusokat, hogy régi böngészőkben is működjenek, még ha a dizájn egyszerűsödik is.
• Automatizálás preprocesszorok és postprocesszorok segítségével (pl. PostCSS autoprefixer plugin), amelyek automatikusan hozzáadják a szükséges prefixeket.

Példa az autoprefixer használatára PostCSS-ben:

/* Eredeti CSS */
.example {
  display: flex;
}

A feldolgozás után az autoprefixer hozzáadja a prefixeket:

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Így érhető el a kompatibilitás különböző böngészőkkel anélkül, hogy kézzel kellene prefixeket hozzáadni.