Interop 2026: The Complete Guide to Cross-Browser Compatibility

/* Parent component */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Query container styles */
@container style(theme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}

@container style(emphasis: primary) {
  .card {
    border-color: blue;
    box-shadow: 0 0 10px blue;
  }
}

<div class="card-container" style="--theme: dark">
  <div class="card">Dark theme card</div>
</div>

/* Progress bar tied to scroll */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: blue;
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* View-timeline for element visibility */
.card {
  animation: fade-in linear;
  animation-timeline: view();
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Define anchor */
.trigger {
  anchor-name: --my-anchor;
}

/* Position relative to anchor */
.popup {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: block-end;
}

/* Fallback positioning */
@supports not (position-anchor: --my-anchor) {
  .popup {
    top: 100%;
    left: 0;
  }
}

<button class="trigger" popovertarget="my-popup">
  Open Menu
</button>
<div popover id="my-popup" class="popup">
  Menu content here
</div>

/* Custom highlight styling */
::selection {
  background: blue;
  color: white;
}

::highlight(search-results) {
  background: yellow;
  color: black;
}

// Highlight search results
const range = new Range();
range.setStart(textNode, startOffset);
range.setEnd(textNode, endOffset);

const highlight = new Highlight(range);
CSS.highlights.set('search-results', highlight);

// Intercept navigation
navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url);
  
  if (url.pathname.startsWith('/app/')) {
    // Handle app navigation
    event.intercept({
      async handler() {
        const content = await loadContent(url.pathname);
        document.getElementById('app').innerHTML = content;
      },
    });
  }
});

// Programmatic navigation
navigation.navigate('/new-page', { history: 'replace' });

// Start view transition
document.startViewTransition(() => {
  // Update DOM
  updateContent();
});

// With custom animations
const transition = document.startViewTransition(() => {
  updateContent();
});

transition.ready.then(() => {
  document.animate(
    [
      { transform: 'rotate(0deg)', transformOrigin: 'center' },
      { transform: 'rotate(360deg)', transformOrigin: 'center' }
    ],
    { duration: 500, easing: 'ease-in-out' }
  );
});

/* Customize view transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

// Scroll-driven animations polyfill
if (!CSS.supports('animation-timeline', 'scroll()')) {
  await import('scroll-driven-animations-polyfill');
}

// View transitions polyfill
if (!document.startViewTransition) {
  await import('view-transition-polyfill');
}

/* Start with baseline */
.card {
  display: block;
  padding: 1rem;
}

/* Enhance with container queries */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

/* Enhance with scroll-driven animations */
@supports (animation-timeline: scroll()) {
  .card {
    animation: slide-in linear;
    animation-timeline: view();
  }
}

// Check for CSS features
const supportsScrollTimeline = CSS.supports(
  'animation-timeline',
  'scroll()'
);

const supportsAnchorPosition = CSS.supports('position-anchor', '--anchor');

// Check for JS APIs
const supportsNavigation = 'navigation' in window;
const supportsViewTransition = 'startViewTransition' in document;

/* Anchor positioning fallback */
.popup {
  /* Base styles for all browsers */
  position: absolute;
  top: 100%;
  left: 0;
}

/* Enhanced with anchor positioning */
@supports (position-anchor: --anchor) {
  .popup {
    position-anchor: --anchor;
    position-area: block-end;
  }
}

// Use @web/test-runner for cross-browser testing
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

export default {
  files: 'test/**/*.test.js',
  browsers: [
    chrome(),
    firefox(),
    safari(),
    microsoftEdge(),
  ],
};

# GitHub Actions
name: Cross-browser Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chrome, firefox, safari, edge]
    steps:
      - uses: actions/checkout@v4
      - name: Run tests on ${{ matrix.browser }}
        run: |
          npx web-test-runner \
            --browsers ${{ matrix.browser }} \
            --playwright \
            true