Modern CSS Features

Explore cutting-edge CSS features including Custom Properties (CSS Variables), Container Queries, CSS Nesting, and View Transitions. Master the latest specifications that are shaping the future of web styling.

CSS Custom Properties Level 1

CSS Custom Properties (CSS Variables) enable dynamic styling with reusable values and theming capabilities.

Advanced CSS Custom Properties

Dynamic theming and variable usage patterns

<!-- CSS Custom Properties Demo -->
<div class="theme-demo">
  <header>
    <h1>CSS Custom Properties Demo</h1>
    <div class="theme-switcher">
      <button onclick="document.documentElement.style.setProperty('--primary-hue', '210')">Blue Theme</button>
      <button onclick="document.documentElement.style.setProperty('--primary-hue', '120')">Green Theme</button>
      <button onclick="document.documentElement.style.setProperty('--primary-hue', '0')">Red Theme</button>
    </div>
  </header>

  <!-- Cards with different themes -->
  <section class="card-grid">
    <article class="card" data-theme="light">
      <h2>Light Theme Card</h2>
      <p>This card uses light theme variables for consistent styling.</p>
      <button class="button">Primary Button</button>
      <button class="button filled">Filled Button</button>
    </article>

    <article class="card" data-theme="dark">
      <h2>Dark Theme Card</h2>
      <p>This card automatically switches to dark theme variables.</p>
      <button class="button">Primary Button</button>
      <button class="button filled">Filled Button</button>
    </article>
  </section>

  <!-- Color system demonstration -->
  <section class="color-system">
    <h2>Dynamic Color System</h2>
    <div class="color-palette">
      <div class="color-swatch" style="background: var(--color-primary-50)">50</div>
      <div class="color-swatch" style="background: var(--color-primary-100)">100</div>
      <div class="color-swatch" style="background: var(--color-primary-200)">200</div>
      <div class="color-swatch" style="background: var(--color-primary-300)">300</div>
      <div class="color-swatch" style="background: var(--color-primary-400)">400</div>
      <div class="color-swatch" style="background: var(--color-primary-500)">500</div>
      <div class="color-swatch" style="background: var(--color-primary-600)">600</div>
      <div class="color-swatch" style="background: var(--color-primary-700)">700</div>
      <div class="color-swatch" style="background: var(--color-primary-800)">800</div>
      <div class="color-swatch" style="background: var(--color-primary-900)">900</div>
    </div>
  </section>

  <!-- Fallback examples -->
  <section class="fallback-example">
    <h2>Fallback Values</h2>
    <p>This section demonstrates fallback values for unsupported properties.</p>
  </section>

  <!-- Responsive grid with variables -->
  <section class="responsive-grid">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
    <div class="grid-item">Grid Item 5</div>
    <div class="grid-item">Grid Item 6</div>
  </section>

  <!-- Animation with custom properties -->
  <section class="animation-demo">
    <h2>Custom Property Animations</h2>
    <div class="pulse-animation">
      <p>This element uses custom properties in its animation.</p>
    </div>
  </section>

  <!-- Button variations -->
  <section class="button-variations">
    <h2>Context-Aware Buttons</h2>
    <div class="button-group">
      <button class="button">Default</button>
      <button class="button filled">Filled</button>
      <button class="button danger">Danger</button>
      <button class="button danger filled">Danger Filled</button>
    </div>
  </section>
</div>

Explanation:

CSS Custom Properties provide a powerful way to create maintainable, themeable CSS with dynamic values that can be modified at runtime.

Accessibility Tips:

Use custom properties for consistent spacing and typography scales
Create theme systems that work with user preferences
Provide meaningful fallback values for better browser support
Test custom property inheritance in complex component structures

CSS Container Queries Level 1

Container Queries enable responsive design based on the size of containing elements, not just the viewport.

Container-Based Responsive Design

Style components based on their container size

<!-- Container Query Examples -->
<div class="page-layout">
  <!-- Main content area -->
  <main class="main-content">
    <h1>Container Queries Demo</h1>
    
    <!-- Card container that changes layout based on its size -->
    <div class="card-container">
      <article class="responsive-card">
        <img src="card-image.jpg" alt="Card image" class="card-image">
        <div class="card-content">
          <h2>Responsive Card Title</h2>
          <p>This card layout changes based on the container width, not the viewport width.</p>
          <button class="card-button">Learn More</button>
        </div>
      </article>
      
      <article class="responsive-card">
        <img src="card-image2.jpg" alt="Card image" class="card-image">
        <div class="card-content">
          <h2>Another Card</h2>
          <p>When the container is narrow, cards stack vertically. When wider, they display horizontally.</p>
          <button class="card-button">Read More</button>
        </div>
      </article>
    </div>
  </main>

  <!-- Sidebar with different container size -->
  <aside class="sidebar">
    <h2>Sidebar Content</h2>
    
    <!-- Same card component, different container -->
    <div class="sidebar-card-container">
      <article class="responsive-card">
        <img src="sidebar-card.jpg" alt="Sidebar card" class="card-image">
        <div class="card-content">
          <h3>Sidebar Card</h3>
          <p>This uses the same component but adapts to the sidebar's narrower width.</p>
          <button class="card-button">View</button>
        </div>
      </article>
    </div>

    <!-- Widget container -->
    <div class="widget-container">
      <div class="widget">
        <h3>Weather Widget</h3>
        <div class="widget-content">
          <div class="temperature">72°F</div>
          <div class="condition">Sunny</div>
          <div class="details">Humidity: 45%</div>
        </div>
      </div>
    </div>
  </aside>

  <!-- Navigation that adapts to container -->
  <nav class="adaptive-nav">
    <div class="nav-container">
      <ul class="nav-list">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>

  <!-- Product grid that adapts -->
  <section class="product-section">
    <div class="product-grid">
      <div class="product-item">
        <img src="product1.jpg" alt="Product 1">
        <h3>Product 1</h3>
        <p class="price">$29.99</p>
      </div>
      <div class="product-item">
        <img src="product2.jpg" alt="Product 2">
        <h3>Product 2</h3>
        <p class="price">$39.99</p>
      </div>
      <div class="product-item">
        <img src="product3.jpg" alt="Product 3">
        <h3>Product 3</h3>
        <p class="price">$19.99</p>
      </div>
    </div>
  </section>
</div>

Explanation:

Container Queries revolutionize responsive design by allowing components to respond to their container size rather than the viewport, enabling truly modular responsive components.

Accessibility Tips:

Ensure content remains readable at all container sizes
Test container queries with zoom levels up to 200%
Provide fallback styles for browsers without container query support
Consider keyboard navigation flow when layouts change

CSS Nesting

CSS Nesting allows writing nested CSS rules for better organization and maintainability, similar to preprocessors like Sass.

Native CSS Nesting

Organize CSS with nested rules and selectors

<!-- CSS Nesting Examples -->
<div class="app">
  <!-- Navigation component -->
  <nav class="navigation">
    <div class="nav-brand">
      <a href="#" class="brand-link">MyApp</a>
    </div>
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link">Services</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">Web Design</a></li>
          <li><a href="#" class="dropdown-link">Development</a></li>
          <li><a href="#" class="dropdown-link">Consulting</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
  </nav>

  <!-- Card components -->
  <main class="content">
    <section class="card-section">
      <article class="card">
        <header class="card-header">
          <h2>Featured Article</h2>
          <span class="badge primary">New</span>
        </header>
        <div class="card-body">
          <p>This demonstrates CSS nesting with component organization.</p>
          <div class="card-actions">
            <button class="btn primary">Read More</button>
            <button class="btn secondary">Share</button>
          </div>
        </div>
      </article>

      <article class="card featured">
        <header class="card-header">
          <h2>Premium Content</h2>
          <span class="badge premium">Pro</span>
        </header>
        <div class="card-body">
          <p>Featured cards have special styling through nested selectors.</p>
          <div class="card-actions">
            <button class="btn primary">Upgrade</button>
            <button class="btn secondary">Learn More</button>
          </div>
        </div>
      </article>
    </section>

    <!-- Form with nested styling -->
    <section class="form-section">
      <form class="form">
        <h2>Contact Form</h2>
        
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="4" required></textarea>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn primary">Send Message</button>
          <button type="reset" class="btn secondary">Reset</button>
        </div>
      </form>
    </section>

    <!-- Complex component with deep nesting -->
    <section class="dashboard">
      <div class="dashboard-header">
        <h2>Dashboard</h2>
        <div class="header-actions">
          <button class="btn icon">⚙️</button>
          <button class="btn icon">📊</button>
        </div>
      </div>

      <div class="dashboard-grid">
        <div class="widget analytics">
          <div class="widget-header">
            <h3>Analytics</h3>
            <span class="widget-status active">Live</span>
          </div>
          <div class="widget-content">
            <div class="metric">
              <span class="metric-value">1,234</span>
              <span class="metric-label">Visitors</span>
            </div>
          </div>
        </div>

        <div class="widget sales">
          <div class="widget-header">
            <h3>Sales</h3>
            <span class="widget-status">Updated</span>
          </div>
          <div class="widget-content">
            <div class="metric">
              <span class="metric-value">$5,678</span>
              <span class="metric-label">Revenue</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>

Explanation:

CSS Nesting provides a more organized way to write CSS by allowing nested rules, reducing repetition and improving maintainability.

Accessibility Tips:

Keep nesting levels reasonable (max 3-4 levels) for maintainability
Ensure nested selectors don't become overly specific
Test that nested styles don't interfere with component reusability
Use nesting to organize related styles logically

CSS View Transitions Level 1

View Transitions provide smooth animations when content changes or pages navigate, creating seamless user experiences.

Smooth View Transitions

Create seamless transitions when content or pages change

<!-- View Transitions Demo -->
<div class="app-container">
  <!-- Navigation for page transitions -->
  <nav class="main-nav">
    <h1 class="app-title">View Transitions Demo</h1>
    <ul class="nav-list">
      <li><a href="#page1" class="nav-link" onclick="transitionToPage('page1')">Home</a></li>
      <li><a href="#page2" class="nav-link" onclick="transitionToPage('page2')">Gallery</a></li>
      <li><a href="#page3" class="nav-link" onclick="transitionToPage('page3')">About</a></li>
    </ul>
  </nav>

  <!-- Page 1 - Home -->
  <main id="page1" class="page active">
    <header class="page-header">
      <h2 class="page-title">Welcome Home</h2>
      <p class="page-subtitle">Experience smooth view transitions</p>
    </header>

    <section class="hero">
      <div class="hero-content">
        <h3>Featured Content</h3>
        <p>This content smoothly transitions between views.</p>
        <button class="cta-button" onclick="transitionToPage('page2')">View Gallery</button>
      </div>
      <div class="hero-image">
        <img src="hero.jpg" alt="Hero image" class="shared-image">
      </div>
    </section>

    <section class="cards">
      <div class="card">
        <h4>Card 1</h4>
        <p>Content that animates during transitions.</p>
      </div>
      <div class="card">
        <h4>Card 2</h4>
        <p>Smooth morphing between states.</p>
      </div>
    </section>
  </main>

  <!-- Page 2 - Gallery -->
  <main id="page2" class="page">
    <header class="page-header">
      <h2 class="page-title">Image Gallery</h2>
      <p class="page-subtitle">Beautiful transitions between images</p>
    </header>

    <section class="gallery">
      <div class="gallery-grid">
        <div class="gallery-item" onclick="openModal('img1')">
          <img src="gallery1.jpg" alt="Gallery image 1" class="gallery-image">
        </div>
        <div class="gallery-item" onclick="openModal('img2')">
          <img src="gallery2.jpg" alt="Gallery image 2" class="gallery-image">
        </div>
        <div class="gallery-item" onclick="openModal('img3')">
          <img src="gallery3.jpg" alt="Gallery image 3" class="gallery-image">
        </div>
        <div class="gallery-item" onclick="openModal('img4')">
          <img src="gallery4.jpg" alt="Gallery image 4" class="gallery-image">
        </div>
      </div>
    </section>

    <button class="back-button" onclick="transitionToPage('page1')">Back to Home</button>
  </main>

  <!-- Page 3 - About -->
  <main id="page3" class="page">
    <header class="page-header">
      <h2 class="page-title">About Us</h2>
      <p class="page-subtitle">Learn about view transitions</p>
    </header>

    <section class="about-content">
      <div class="about-text">
        <h3>View Transitions API</h3>
        <p>The View Transitions API enables smooth, animated transitions between different views or states in a web application.</p>
        
        <div class="feature-list">
          <div class="feature">
            <h4>Smooth Animations</h4>
            <p>Automatic morphing between elements</p>
          </div>
          <div class="feature">
            <h4>Better UX</h4>
            <p>Maintains user context during navigation</p>
          </div>
        </div>
      </div>
      
      <div class="about-sidebar">
        <div class="stats">
          <div class="stat">
            <span class="stat-number">100%</span>
            <span class="stat-label">Smooth</span>
          </div>
          <div class="stat">
            <span class="stat-number">60fps</span>
            <span class="stat-label">Performance</span>
          </div>
        </div>
      </div>
    </section>

    <button class="back-button" onclick="transitionToPage('page1')">Back to Home</button>
  </main>

  <!-- Modal for gallery -->
  <div id="image-modal" class="modal">
    <div class="modal-content">
      <span class="close-button" onclick="closeModal()">&times;</span>
      <img id="modal-image" src="" alt="Modal image" class="modal-image">
    </div>
  </div>
</div>

Explanation:

CSS View Transitions create smooth, automatic animations when DOM content changes, providing a native solution for page and content transitions.

Accessibility Tips:

Always respect prefers-reduced-motion preferences
Keep transition durations reasonable (under 500ms)
Ensure transitions don't interfere with screen reader navigation
Provide fallback experiences for browsers without View Transitions support

Modern CSS Best Practices

Feature Adoption

• Use progressive enhancement for modern CSS features
• Provide fallbacks for browsers without support
• Test container queries across different screen sizes
• Check View Transitions API support before implementation
• Use CSS custom properties for maintainable theming

Performance & Accessibility

• Keep CSS nesting levels reasonable (3-4 max)
• Respect user motion preferences in all animations
• Optimize container query performance on complex layouts
• Test modern features with assistive technologies
• Consider battery impact of frequent transitions