dev-skills

Appearance

Multi-Page App Layout Stability ​

Prevent UI flicker during page navigation by marking persistent elements with view-transition-name so the browser preserves them across navigations.

When to use ​

Apply this pattern to any multi-page site where persistent UI elements — header, nav, sidebar — should stay visually stable while the content area changes between pages.

The pattern ​

Add view-transition-name to each persistent element. The browser uses these names to identify which elements should remain visually stable during page navigation:

css
@view-transition {
  navigation: auto;
}

header {
  view-transition-name: app-header;
}

nav {
  view-transition-name: app-nav;
}

.breadcrumbs {
  view-transition-name: breadcrumbs;
}

Full page example ​

This complete page shows the pattern applied to a layout with header, nav, and main content areas:

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      @view-transition {
        navigation: auto;
      }
      
      header {
        view-transition-name: app-header;
        background: #1a1a1a;
        color: white;
        padding: 1rem 2rem;
        position: sticky;
        top: 0;
      }
      
      nav {
        view-transition-name: app-nav;
        background: #f5f5f5;
        padding: 0.5rem 2rem;
      }
      
      main {
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>My App</h1>
    </header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
    <main>
      <!-- Content changes, shell stays stable -->
    </main>
  </body>
</html>

How it works ​

  1. Mark persistent elements with view-transition-name
  2. Browser keeps these elements visually stable during navigation
  3. Only content areas transition
  4. No JavaScript required

Browser support ​

View Transitions API is supported in Chrome 111+, Edge 111+. Browsers without support fall back to standard navigation automatically.

Trade-offs ​

  • Each view-transition-name must be unique on the page
  • Use consistent names across all pages
  • Don't apply to elements that should animate