Feature Detection

ELI5 — The Vibe Check

Feature Detection checks if a browser supports a feature before trying to use it. Instead of guessing based on the browser name, you just ask 'hey, can you do this?' It's like checking if a restaurant has vegetarian options before ordering, rather than assuming based on the cuisine.

Real Talk

Feature detection is the practice of testing whether a browser supports a specific API or feature before using it. It's typically done with conditional checks like 'IntersectionObserver' in window or CSS @supports. It replaces unreliable user-agent sniffing with direct capability testing.

Show Me The Code

if ('IntersectionObserver' in window) {
  // Use Intersection Observer for lazy loading
} else {
  // Fallback: load all images immediately
}

/* CSS feature detection */
@supports (container-type: inline-size) {
  .card { container-type: inline-size; }
}

When You'll Hear This

"Always use feature detection instead of browser sniffing" / "@supports in CSS lets us use new features with automatic fallbacks"