Cross-Browser Compatibility — Complete Guide to Consistent Web Experiences

/* Vendor prefixes (less needed in 2026 but still) */
.example {
  -webkit-background-clip: text;   /* Safari/older Chrome */
  background-clip: text;           /* Standard */
  -webkit-appearance: none;        /* Safari */
  appearance: none;                /* Standard */
}

/* Safari-specific quirk: sticky positioning needs overflow */
.sticky-element {
  position: -webkit-sticky;  /* Safari < 13 */
  position: sticky;
}

/* Firefox scrollbar styling */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;
}

/* WebKit scrollbar styling (Chrome, Safari, Edge) */
.scrollable::-webkit-scrollbar {
  width: 8px;
}
.scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

// BAD: Browser detection (brittle, unreliable)
if (navigator.userAgent.includes('Chrome')) {
  // Chrome-specific code
}

// GOOD: Feature detection (robust, future-proof)
if ('serviceWorker' in navigator) {
  registerServiceWorker();
} else {
  console.log('Service workers not supported');
}

// Common feature detection patterns
const supports = {
  webp: () => {
    const canvas = document.createElement('canvas');
    return canvas.toDataURL('image/webp').startsWith('data:image/webp');
  },
  
  webgl: () => {
    try {
      const canvas = document.createElement('canvas');
      return !!canvas.getContext('webgl') || !!canvas.getContext('experimental-webgl');
    } catch {
      return false;
    }
  },
  
  intersectionObserver: 'IntersectionObserver' in window,
  
  cssGrid: CSS.supports('display', 'grid'),
  
  containerQueries: CSS.supports('container-type', 'inline-size'),
  
  viewTransitions: 'document' in window && 'startViewTransition' in document
};

// Usage
if (supports.webp) {
  document.querySelector('img').src = 'image.webp';
} else {
  document.querySelector('img').src = 'image.jpg';
}

if (!supports.intersectionObserver) {
  // Load polyfill for Intersection Observer
  loadScript('/polyfills/intersection-observer.js');
}

// Example: polyfill for Array.prototype.at()
if (!Array.prototype.at) {
  Array.prototype.at = function(index) {
    const length = this.length;
    const relativeIndex = Math.floor(index);
    const actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
    return actualIndex >= 0 && actualIndex < length ? this[actualIndex] : undefined;
  };
}

// Usage after polyfill
const arr = [10, 20, 30];
console.log(arr.at(-1)); // 30 (works in all browsers now)

<!-- Polyfill.io — serves only needed polyfills based on user agent -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at%2CIntersectionObserver%2Cfetch"></script>

<!-- Core-js for comprehensive ES6+ polyfills -->
<script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js"></script>

// Dynamic polyfill loading with feature detection
async function loadPolyfills() {
  const needed = [];
  
  if (!('fetch' in window)) needed.push('fetch');
  if (!('Promise' in window)) needed.push('promise');
  if (!('IntersectionObserver' in window)) needed.push('intersection-observer');
  if (!('ResizeObserver' in window)) needed.push('resize-observer');
  
  if (needed.length === 0) return;
  
  const script = document.createElement('script');
  script.src = `https://polyfill.io/v3/polyfill.min.js?features=${needed.join('%2C')}`;
  document.head.appendChild(script);
}

// Modern code you write:
const greet = (name = 'World') => `Hello, ${name}!`;

// What Babel transpiles to:
"use strict";
var greet = function greet() {
  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'World';
  return "Hello, " + name + "!";
};

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": [
          "> 0.5%",
          "last 2 versions",
          "not dead",
          "not ie 11"
        ]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

// vite.config.js — modern build tool with built-in transpilation
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'es2015',   // Transpile to ES2015
    polyfillModulePreload: true,
    cssTarget: 'safari14'  // Specific CSS targets
  },
  
  // Or use modern browser targeting
  build: {
    target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']
  }
});

<!-- Base: works in every browser -->
<form id="contact-form">
  <label for="name">Name</label>
  <input type="text" id="name" required>
  <button type="submit">Send</button>
</form>

// Enhancement: add AJAX submission in JS-enabled browsers
const form = document.getElementById('contact-form');

if (form) {
  form.addEventListener('submit', async (event) => {
    event.preventDefault(); // Keep from submitting normally
    
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: new FormData(form)
      });
      
      if (!response.ok) throw new Error('Network error');
      
      form.innerHTML = '<p class="success">Message sent successfully!</p>';
      
      if (supports.viewTransitions) {
        document.startViewTransition(() => { /* ... */ });
      }
    } catch (error) {
      form.querySelector('.error').textContent = 'Please try again.';
      // Fallback: if JS fails, the regular form submission still works
    }
  });
  
  // Enhancement: native form validation
  if (HTMLFormElement.prototype.requestSubmit) {
    form.noValidate = false;
  }
}

/* Graceful degradation for CSS Grid */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.gallery > * {
  flex: 1 1 200px;
}

/* Enhanced: Grid for supporting browsers */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .gallery > * {
    flex: none; /* Reset flex values */
    width: auto;
  }
}

/* Fallback for custom properties */
.card {
  background: #333;           /* Fallback */
  background: var(--card-bg); /* Modern */
  color: #fff;
  color: var(--card-text);
}

/* Autoprefixer handles most vendor prefixes automatically */
/* Input (PostCSS): */
.card {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* Output: */
.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

// Using BrowserStack or Sauce Labs for cloud testing
// Using Playwright for automated cross-browser tests
const { chromium, firefox, webkit } = require('playwright');

async function testCrossBrowser() {
  const browsers = [chromium, firefox, webkit];
  
  for (const browserType of browsers) {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    
    await page.goto('https://example.com');
    
    // Take screenshots
    await page.screenshot({ path: `screenshots/${browserType.name()}.png` });
    
    // Run assertions
    const title = await page.title();
    console.log(`${browserType.name()}: ${title}`);
    
    await browser.close();
  }
}