Browser Technologies

Modern browser technologies have evolved into a comprehensive platform for building native-quality web applications. This skill covers HTML5, CSS (2025 standards), Progressive Web Apps, and Browser APIs.

Core Principles

• Progressive Enhancement: Build baseline experiences that work everywhere, then layer advanced features
• Feature Detection Over Browser Sniffing: Use 'feature' in navigator or @supports queries
• Secure Contexts: Most powerful features require HTTPS (or localhost for development)
• User Consent: Hardware and location APIs require explicit permission prompts
• Performance First: Use compositor-thread features (CSS animations, scroll-driven animations) over main-thread JavaScript
• Accessibility by Default: Semantic HTML + ARIA only when needed; never replace native elements
• Container Queries for Components: Use media queries for page layout, container queries for component responsiveness
• CSS Custom Properties as Bridges: Share state between JS and CSS via --custom-properties
• Offline-First for PWAs: Design for network failure; use Service Workers for resilient experiences
• Sandbox vs. System: OPFS for hidden app data, File System Access API for user files

Quick Reference

HTML5 Essentials

<!-- Popover API (native top-layer management) -->
<button popovertarget="menu">Open</button>
<div id="menu" popover>Content</div>

<!-- Dialog (modal & non-modal) -->
<dialog id="modal">
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<script>document.getElementById('modal').showModal()</script>

<!-- Native details/summary (accordion) -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>

CSS Modern Layout

/* Container Queries (component-aware) */
.wrapper {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 400px) {
  .card { flex-direction: row; }
}

/* Grid with auto-responsive columns */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Scroll-Driven Animation */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: scroll();
}

Progressive Web Apps

// Service Worker Registration
if ('serviceWorker' in navigator) {
  await navigator.serviceWorker.register('/sw.js');
}

// Install Prompt
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
});

// Web Push Notifications
const permission = await Notification.requestPermission();
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
});

Topics

Core Technologies

• HTML Standards - Semantic elements, ARIA, forms, media, Popover API
• CSS Modern Features - Grid, Flexbox, Container Queries, Animations, Cascade Layers
• Progressive Web Apps - Service Workers, Manifest, Installation, Offline capabilities

Browser APIs

• Web Storage - localStorage, sessionStorage, IndexedDB strategy
• File System Access - OPFS vs. device-level access, security model
• Canvas & Graphics - 2D context, WebGL, OffscreenCanvas
• Geolocation - getCurrentPosition, watchPosition, accuracy handling
• Web Share - Native share dialog integration
• Drag and Drop - DataTransfer API, accessibility considerations

Integration Patterns

• HTML-JavaScript Interaction - DOM manipulation, event handling
• CSS-JavaScript Interaction - Custom properties, View Transitions, Houdini

Common Patterns

Feature Detection Wrapper

const BrowserFeatures = {
  // Check for API support
  has(feature) {
    const checks = {
      serviceWorker: 'serviceWorker' in navigator,
      geolocation: 'geolocation' in navigator,
      fileSystemAccess: 'showOpenFilePicker' in window,
      webShare: 'share' in navigator,
      containerQueries: CSS.supports('container-type: inline-size'),
      viewTransitions: 'startViewTransition' in document
    };
    return checks[feature] ?? false;
  },

  // Graceful degradation
  async fileOperation(content) {
    if (this.has('fileSystemAccess')) {
      // Chromium: Direct file access
      const handle = await window.showSaveFilePicker();
      const writable = await handle.createWritable();
      await writable.write(content);
      await writable.close();
    } else {
      // Fallback: Blob download
      const blob = new Blob([content], {type: 'text/plain'});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'file.txt';
      a.click();
    }
  }
};

Responsive Component (Container Query)

/* Define container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Mobile-first base */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Container-based breakpoints */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

@container card (min-width: 600px) {
  .card {
    padding: 2cqi; /* Container query units */
  }
}

Browser Support Strategy

Baseline Features (98%+ support - 2025)

• Service Workers, Web App Manifest, Web Push
• CSS Grid, Flexbox, Custom Properties
• Container Queries (size-based)
• localStorage, sessionStorage
• Canvas 2D, Geolocation
• Popover API, Dialog element

Chromium-Exclusive (Chrome/Edge only)

• File System Access API (device-level)
• Web Bluetooth, Web USB, Web Serial
• Multi-Screen Window Placement
• Protocol Handlers (full integration)

Progressive Enhancement Pattern

// Always provide fallback
if (BrowserFeatures.has('webShare')) {
  button.onclick = async () => {
    await navigator.share({ title, text, url });
  };
} else {
  button.onclick = () => {
    navigator.clipboard.writeText(url);
    showToast('Link copied!');
  };
}

Resources

• WHATWG HTML Living Standard
• MDN Web Docs
• Can I Use
• W3C WAI-ARIA
• Web.dev
• Chrome Platform Status