Browser Feature Detector

/**
 * Feature detection — generated by consolelog.tools
 * Detects 6 features at runtime.
 */

const features = {
  // Container queries — Style elements based on their container size instead of the viewport (@container).
  containerQueries: CSS.supports('container-type: inline-size'),
  // :has() relational selector — The "parent" selector — match elements that contain a given descendant.
  hasSelector: CSS.supports('selector(:has(*))'),
  // IntersectionObserver — Asynchronously observe when an element enters or leaves the viewport (lazy-loading, infinite scroll).
  intersectionObserver: 'IntersectionObserver' in window,
  // Service Worker — Background proxy worker powering offline support, caching and push (PWAs).
  serviceWorker: 'serviceWorker' in navigator,
  // View Transitions API — Animate between DOM states (and across documents) with a single API.
  viewTransitions: 'startViewTransition' in document,
  // localStorage — Synchronous key/value storage that persists across sessions (~5MB).
  localStorage: (() => { try { return typeof localStorage !== 'undefined'; } catch { return false; } })()
};

// Usage:
if (features.containerQueries) {
  // Container queries is supported.
}

export default features;

/* Feature detection — generated by consolelog.tools */

/* Container queries — Style elements based on their container size instead of the viewport (@container). */
@supports (container-type: inline-size) {
  /* Enhanced styles when Container queries is supported. */
}
@supports not (container-type: inline-size) {
  /* Fallback styles for browsers without Container queries. */
}

/* :has() relational selector — The "parent" selector — match elements that contain a given descendant. */
@supports (selector(:has(*))) {
  /* Enhanced styles when :has() relational selector is supported. */
}
@supports not (selector(:has(*))) {
  /* Fallback styles for browsers without :has() relational selector. */
}