CSS Feature Detection

Feature detection determines browser capabilities at runtime, enabling progressive enhancement strategies.

Core Principle: Test for capability, not browser identity. “Can you do X?” not “Are you Browser Y?”

CSS @supports Rule:

@supports (display: grid) {
  .layout { display: grid; }
}
 
@supports not (display: grid) {
  .layout { display: flex; }
}

JavaScript Feature Detection:

if ('CSS' in window && CSS.supports('display', 'grid')) {
  // Use grid layout
}

Mental Model: Feature detection is like asking “Do you speak French?” before speaking French, rather than assuming based on someone’s appearance.

Common Patterns:

• Layer fallback styles first, enhancements after
• Use @supports for cutting-edge CSS features
• Test for API availability before using JavaScript features

Tools: Modernizr library for comprehensive feature detection

Related: Progressive Enhancement, CSS Custom Properties