Feature Detection vs User-Agent Sniffing

Technical Deep Dive & Specifications

JavaScript Feature Detection Patterns

1. Checking Global Window Properties & APIs

// Test if the browser supports Custom Elements (Web Components)
if ('customElements' in window) {
  // Safe to define custom elements
  customElements.define('user-card', UserCard);
} else {
  // Fall back or load Web Components polyfill
}

// Test for Intersection Observer
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver(callback);
}

2. Checking HTML Element Prototype Attributes

To test if a native HTML element supports a specific attribute (e.g., loading="lazy" on images or inert on elements):

// Check native image lazy loading support
const supportsNativeLazyLoad = 'loading' in HTMLImageElement.prototype;

// Check inert attribute support
const supportsInert = 'inert' in HTMLElement.prototype;

3. The Getter Trap Pattern (Passive Event Listeners)

Some APIs take an options object where a boolean flag indicates support. To test if { passive: true } is supported in addEventListener without triggering side-effects:

let supportsPassive = false;

try {
  const opts = Object.defineProperty({}, 'passive', {
    get() {
      supportsPassive = true;
      return true;
    }
  });
  window.addEventListener('testPassive', null, opts);
  window.removeEventListener('testPassive', null, opts);
} catch (e) {
  supportsPassive = false;
}

CSS Feature Queries: @supports

The CSS Conditional Rules Level 3 & 4 specifications define the @supports at-rule, allowing CSS engines to conditionally apply styles only if the engine parses and renders the specified property-value pair:

                  CSS @supports Conditional Tree
                                |
        +-----------------------+-----------------------+
        |                                               |
        v                                               v
[ Property-Value Test ]                         [ Selector Test ]
@supports (display: subgrid) { ... }            @supports selector(:has(> img)) { ... }

Syntax & Boolean Combinations:

/* 1. Basic property-value test */
@supports (display: grid) {
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); }
}

/* 2. Negation fallback (NOT) */
@supports not (backdrop-filter: blur(10px)) {
  .modal-overlay { background: rgba(0, 0, 0, 0.85); /* Solid opaque fallback */ }
}

/* 3. Conjunction (AND) & Disjunction (OR) */
@supports (display: flex) and (backdrop-filter: blur(5px)) {
  .header { display: flex; backdrop-filter: blur(5px); }
}

@supports (background: -webkit-named-image(i)) or (background: paint(something)) {
  /* Either engine-specific or Houdini paint */
}

/* 4. Selector testing (@supports selector()) */
@supports selector(:has(p)) {
  .card:has(p.warning) { border-color: red; }
}

The JavaScript CSS.supports() API

You can execute CSS @supports queries dynamically in JavaScript using the CSS.supports static method:

// Method Signature 1: (property, value)
const supportsSubgrid = CSS.supports('grid-template-columns', 'subgrid');

// Method Signature 2: (conditionString)
const supportsBackdrop = CSS.supports('(backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))');

// Selector query support
const supportsHasSelector = CSS.supports('selector(:has(*))');

Modern User-Agent Client Hints (UA-CH)

To replace legacy User-Agent string sniffing with privacy-preserving, structured headers, modern browsers implement User-Agent Client Hints:

if (navigator.userAgentData) {
  console.log('Brands:', navigator.userAgentData.brands);
  console.log('Mobile:', navigator.userAgentData.mobile);

  // Request high-entropy details asynchronously (requires user permission / HTTPS)
  navigator.userAgentData.getHighEntropyValues(['architecture', 'model', 'platformVersion'])
    .then(ua => {
      console.log('Platform Version:', ua.platformVersion);
      console.log('Device Model:', ua.model);
    });
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 35–42 (@supports): The browser's CSS engine checks if it can parse and compute backdrop-filter. If true, the translucent glass styling overrides the solid background fallback.
• Lines 76–80 (IntersectionObserver): Tests for asynchronous viewport intersection observation by checking property existence on the global window object.
• Lines 81–84 (startViewTransition): Checks if the Document object implements the View Transitions API for seamless single-page app visual animations.
• Lines 91–94 (CSS.supports('selector(:has(*))')): Evaluates whether the CSS selector engine can parse the parent selector :has().

Expected Browser Render Output

+------------------------------------------------------------------------------+
| Feature Detection Lab                                                        |
| Testing runtime JavaScript APIs and CSS capabilities via standard interfaces.|
|                                                                              |
| JavaScript API Probe                                                         |
| +------------------------+------------------------------------+------------+ |
| | Feature / API Name     | Detection Mechanism                | Status     | |
| +------------------------+------------------------------------+------------+ |
| | Intersection Observer  | 'IntersectionObserver' in window   | ✓ Supported| |
| | View Transitions API   | 'startViewTransition' in document  | ✓ Supported| |
| | HTML Lazy Loading      | 'loading' in HTMLImageElement...   | ✓ Supported| |
| | CSS :has() Selector    | CSS.supports('selector(:has(*))')  | ✓ Supported| |
| | CSS Subgrid            | CSS.supports('grid-template-col..')| ✓ Supported| |
| | Web Locks API          | 'locks' in navigator               | ✓ Supported| |
| +------------------------+------------------------------------+------------+ |
+------------------------------------------------------------------------------+