New to the web platform in March

CSS Container Queries Level 2

Container queries have received major enhancements in March 2026, introducing style queries that allow developers to query the computed styles of container elements. This powerful addition enables more sophisticated responsive designs based on container properties beyond just size.

The new @container style() syntax allows you to apply styles based on the computed values of CSS properties:

@container style(background-color: blue) {
  .card {
    color: white;
    border: 2px solid white;
  }
}

@container style(--theme: dark) {
  .content {
    background: var(--dark-bg);
    color: var(--dark-text);
  }
}

This feature is particularly useful for theming systems and component libraries where styling decisions need to be made based on the current state of container elements. Developers can now create more intelligent components that adapt not just to size constraints but also to styling context.

Enhanced View Transitions API

The View Transitions API has been expanded with new capabilities for cross-document transitions and improved animation controls. These updates make it easier to create smooth, app-like navigation experiences in multi-page applications.

The new document.startViewTransition() method now supports cross-document transitions:

// Trigger a cross-document transition
document.startViewTransition({
  from: document,
  to: '/new-page',
  types: ['slide-left']
});

// Custom animation timing
document.startViewTransition({
  duration: '500ms',
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transform: 'slideInFromRight'
});

Developers can now define custom transition types in CSS to create more sophisticated animations:

@view-transition {
  navigation: auto;
}

::view-transition-old(slide-left) {
  animation: slide-out-left 0.3s ease-out;
}

::view-transition-new(slide-left) {
  animation: slide-in-right 0.3s ease-out;
}

WebAssembly SIMD Optimizations

WebAssembly has received significant performance improvements with enhanced SIMD (Single Instruction, Multiple Data) support. These optimizations provide substantial speed improvements for computationally intensive applications like image processing, scientific computing, and gaming.

The updated SIMD instructions now support:

• 128-bit vector operations with improved performance
• Advanced mathematical functions for complex calculations
• Better memory alignment for faster data access
• Enhanced debugging capabilities for WASM modules

Here’s an example of utilizing the new SIMD capabilities:

// Load and instantiate WebAssembly module with SIMD
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('optimized-math.wasm'),
  {
    env: {
      memory: new WebAssembly.Memory({ initial: 256 }),
      enableSIMD: true
    }
  }
);

// Use SIMD-optimized functions
const result = wasmModule.instance.exports.processImageData(
  imageBuffer,
  width,
  height
);

Performance benchmarks show 2-4x speed improvements for vector operations and mathematical computations compared to previous implementations.

Progressive Web App Enhancements

Progressive Web Apps have gained new capabilities with the introduction of the App Shortcuts API v2 and improved background synchronization features. These updates help PWAs achieve more native-like functionality and user experiences.

The updated Web App Manifest now supports dynamic shortcuts that can be programmatically updated:

{
  "name": "My PWA",
  "shortcuts": [
    {
      "name": "New Document",
      "url": "/new",
      "icons": [{"src": "/icons/new.png", "sizes": "192x192"}],
      "dynamic": true
    }
  ],
  "background_sync": {
    "enabled": true,
    "max_sync_attempts": 3
  }
}

JavaScript APIs for managing shortcuts dynamically:

// Update app shortcuts programmatically
navigator.serviceWorker.ready.then(registration => {
  registration.updateShortcuts([
    {
      name: 'Recent Files',
      url: '/recent',
      badge: recentFilesCount
    }
  ]);
});

// Enhanced background sync
self.addEventListener('sync', event => {
  if (event.tag === 'upload-data') {
    event.waitUntil(
      uploadPendingData()
        .then(() => updateSyncStatus('completed'))
        .catch(() => updateSyncStatus('failed'))
    );
  }
});

Browser Compatibility and Migration

These new features are now available in Chrome 125+, Firefox 124+, and Safari 17.4+. Developers should implement progressive enhancement strategies to ensure graceful degradation in older browsers.

Feature detection is crucial for implementing these new APIs:

// Check for Container Query support
if (CSS.supports('container-type', 'inline-size')) {
  // Use container queries
  document.body.classList.add('supports-container-queries');
}

// Check for View Transitions API
if ('startViewTransition' in document) {
  // Implement view transitions
  enableViewTransitions();
}

// Check for enhanced PWA features
if ('updateShortcuts' in navigator.serviceWorker) {
  // Use dynamic shortcuts
  setupDynamicShortcuts();
}

Developers should update their build tools and polyfills to take advantage of these features while maintaining backward compatibility. Consider using CSS @supports rules and JavaScript feature detection to provide appropriate fallbacks for unsupported browsers.