CSS Feature Detection

CSS Feature What?

  1. 🤷  Why CSS feature detection?

  2.  🛠️ How to do CSS feature detection?

  3. 🤖  What is the future of CSS feature detection?

Recent Events in CSS

CSS Fault Tolerance

  • Inconsistent CSS support among browsers.
     
  • Unknown rules are ignored.
     
  • Dealing with this trivial due to fault tolerance.
background-color: blue;
background-color: aqy8godf857wqe6igrf7i6dsgkv;
background-color: green;

Progressive Enhancement

  • Emphasizes core experience
     
  • Progressively adds additional layers of presentation
     
  • https://caniuse.com/

User Agent Detection

Cross Browser Testing

Problems with UAD

"It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!"

Mozilla Developer Network

  • Developers add UAD to their projects.
     
  • Browsers implements new features.
     
  • UADs not updated, and browsers spoof agent string.

CSS Feature Detection

"Feature detection (also feature testing) is a technique used in web development for handling differences between runtime environments (typically web browsers or user agents), by programmatically testing for clues that the environment may or may not offer certain functionality. This information is then used to make the application adapt in some way to suit the environment: to make use of certain APIs, or tailor for a better user experience."

 

Wikipedia

@supports

Limits of @supports

Modernizr

<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Modernizr 3.0

Emulate @supports logic

/* default */
.generatedcontent input { }

/* 'or' operator */
.csstransforms3d strong, .generatedcontent input { }

/* 'and' operator */
.csstransforms3d.generatedcontent input { }

/* 'not' operator */
.no-generatedcontent input { }

Why use @supports at all?

return !!(document.createElement('canvas').getContext && document.createElement('canvas').getContext('2d'));

Hybrid Approach

@supports in 2021?

CSS in JS

  • CSS in JS is very contentious.
     

  • Careful to not make claim on the validity of CSS in JS.
     

  • Regardless interesting to explore how CSS Feature detection might look in a world eaten by JavaScript, or even post-JavaScript world.
     

  • Showcases feature detection as a technique, as opposed to a tech specific tool.

Further Reading

Codebridge Shoutout

Suggestions?