0Pricing
HTML Academy · Lesson

Feature Detection vs Browser Sniffing

Use feature detection rather than user-agent sniffing.

Two Approaches to Compatibility

To know whether the current browser supports a feature, you can either detect the feature directly ("IntersectionObserver" in window) or sniff the user agent string (navigator.userAgent.includes("Chrome")). One is reliable; the other is a long-running source of bugs.

Why Sniffing Fails

User agent strings lie. Edge claims to be Chrome (and Safari and Firefox). Chrome on Android emits a different UA than Chrome on iOS. Browsers respect "freezing" of the UA string for privacy. Any logic based on UA strings breaks every few months.

All lessons in this course

  1. The PE Philosophy Start with HTML
  2. Feature Detection vs Browser Sniffing
  3. Graceful Degradation vs Progressive Enhancement
  4. Building a PE Accordion
← Back to HTML Academy