Conference talk: Testing CSS support with JavaScript

At the jsunconf on April 27th, I gave a talk on “Testing CSS support with JavaScript”. After a quick introduction to the CSS object model which is the bridge between JavaScript and CSS, I presented different techniques to test the browser support of a specific CSS property and value.

Most of the time, it’s not recommended to set inline styles with JavaScript. It’s more maintainable to put all presentation information in a stylesheet. This basic rule is called separation of concerns. The easiest way to change the presentation via JavaScript is to toggle a class.

Sometimes though it is necessary to set or retrieve inline or computed styles, for example in custom animations. Websites that use progressive enhancement might need to test the support of CSS properties to load a polyfill or fallback for older browsers. Since several properties still require vendor prefixes, we need to detect the required prefix in order to read or write CSS properties using JavaScript.

My talk covers three approaches that will also be used in the upcoming version 3 of the popular Modernizr feature detection library:

  1. CSS.supports(property, value), a native JavaScript API from the CSS OM specification
  2. An @supports CSS rule created by JavaScript
  3. Check presences of object properties, check if values are accepted

Read the slides of the talk: Testing CSS support with JavaScript

I’d love to hear your feedback! Send an email to zapperlott@gmail.com or message me on Twitter: @molily.