Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

Browser compatibility (CSS)

Making sure your CSS works in different browsers

Eliminating inconsistencies

Problem: Different browsers use different defaults for how elements should look like

Solution: CSS reset stylesheet that overrides browser defaults by some sensible values and provides a "clean slate" for your CSS to build upon

Example: Normalize.css

Checking which browsers support certain functionality

Support queries

Can be used to conditionally apply CSS only if the browser supports certain functionality

Example:

@supports (display: grid) {
.container {
display: grid;
/* other grid properties */
}
}

Vendor prefixes

Different browsers implement new features differently and at different speeds

Vendor prefixes: browser-specific (or rendering-engine-specific) prefixes on properties or values that trigger a browser-specific (or rendering-engine-specific) version of the feature

Goals:

  • Allow developers to make use of new features before they are standardized
  • When the features become standardized, it is still possible to get the old non-standard behaviors by using the prefixes (don't break behavior for early adopters that depend on some specific non-standard behavior)
  • By including the vendor prefixes next to the normal properties/values for a standardized feature, you can still support older browser versions in which the feature was not yet standardized

Example:

.container {
/* last one supported by current browser wins */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

You can also automatically include vendor prefixes by using a tool like Autoprefixer

Polyfills

Polyfill = JavaScript that enables certain features in browsers that would not support them otherwise

Can be useful, but polyfills come at a cost (loading + execution time)

Also, it is pretty much impossible to create a CSS polyfill that is not either big, slow or doesn't behave the way it should in all cases. See The Dark Side of Polyfilling CSS .

Resources