Advanced CSS Techniques

Master cutting-edge CSS features — container queries, has() selector, subgrid, view transitions, and the future of CSS.

45 min•By Priygop Team•Last updated: Feb 2026

Modern CSS Features

Container Queries: @container (min-width: 400px) { ... } — style based on parent container size, not viewport. True component-level responsive design
:has() Selector: div:has(> img) { ... } — parent selector! Style a parent based on its children. 'If this card has an image, make it a horizontal layout'
Subgrid: grid-template-rows: subgrid; — child grid inherits parent's track sizing. Perfect alignment of grid items across nested grids
View Transitions API: document.startViewTransition() — smooth page transitions with CSS animations. Cross-document transitions for MPA navigation
CSS Nesting: .card { .title { ... } &:hover { ... } } — native CSS nesting without preprocessors. Supported in all modern browsers since 2023
Scroll-Driven Animations: animation-timeline: scroll(); — trigger CSS animations based on scroll position. Parallax, progress indicators, reveal effects — all pure CSS

Try It Yourself: CSS Custom Properties

Try It Yourself: CSS Custom PropertiesCSS

CSS Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  : root { #9cdcfe">--primary: #7c3aed; #9cdcfe">--bg: #f8fafc; #9cdcfe">--card-bg: white; #9cdcfe">--text: #1e293b; #9cdcfe">--muted: #64748b; #9cdcfe">--radius: 10px; #9cdcfe">--shadow: 0 2px 8px rgba(0,0,0,0.1); }
  [data-theme="dark"] { #9cdcfe">--primary: #a78bfa; #9cdcfe">--bg: #0f172a; #9cdcfe">--card-bg: #1e293b; #9cdcfe">--text: #e2e8f0; #9cdcfe">--muted: #94a3b8; }
  body{ #9cdcfe">font-family: Arial, sans-serif; #9cdcfe">padding: 20px; #9cdcfe">background: var(--bg); #9cdcfe">color: var(--text); #9cdcfe">transition: all 0.3s; }
  .card{ #9cdcfe">background: var(--card-bg); #9cdcfe">padding: 20px; #9cdcfe">border-radius: var(--radius); #9cdcfe">box-shadow: var(--shadow); #9cdcfe">max-width: 500px; #9cdcfe">margin: 16px 0; }
  h2{ #9cdcfe">color: var(--primary); }
  p{ #9cdcfe">color: var(--muted); #9cdcfe">font-size: 14px; }
  button{ #9cdcfe">padding: 10px 20px; #9cdcfe">background: var(--primary); #9cdcfe">color: white; #9cdcfe">border: none; #9cdcfe">border-radius: var(--radius); #9cdcfe">cursor: pointer; #9cdcfe">font-weight: bold; #9cdcfe">margin: 4px; }
  .color-row{ #9cdcfe">display: flex; #9cdcfe">gap: 8px; #9cdcfe">align-items: center; #9cdcfe">margin: 8px 0; }
  input[type=color] { #9cdcfe">width: 40px; #9cdcfe">height: 40px; #9cdcfe">border: none; #9cdcfe">border-radius: 8px; #9cdcfe">cursor: pointer; }
  label{ #9cdcfe">font-size: 14px; #9cdcfe">font-weight: bold; }
</style>
</head>
<body>
<div class="card">
  <h2>🎨 CSS Custom Properties</h2>
  <p>Change the theme by modifying CSS #9cdcfe">variables:<;/p>
  <div class="color-row">
    <input type="color" value="#7c3aed" oninput="document.documentElement.style.setProperty('--primary',this.value)">
    <label>Primary Color</label>
  </div>
  <button onclick="document.documentElement.toggleAttribute('data-theme')||document.documentElement.setAttribute('data-theme',document.documentElement.getAttribute('data-theme')?'': 'dark')";>🌙 Toggle Dark Mode</button>
</div>
<div class="card">
  <h2>Benefits of CSS Variables</h2>
  <p>✅ Single source of truth for colors, spacing, and typography</p>
  <p>✅ Theme switching with one attribute change</p>
  <p>✅ No preprocessor needed — works natively in CSS</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  :root { --primary: #7c3aed; --bg: #f8fafc; --card-bg: white; --text: #1e293b; --muted: #64748b; --radius: 10px; --shadow: 0 2px 8px rgba(0,0,0,0.1); }
  [data-theme="dark"] { --primary: #a78bfa; --bg: #0f172a; --card-bg: #1e293b; --text: #e2e8f0; --muted: #94a3b8; }
  body { font-family: Arial, sans-serif; padding: 20px; background: var(--bg); color: var(--text); transition: all 0.3s; }
  .card { background: var(--card-bg); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 500px; margin: 16px 0; }
  h2 { color: var(--primary); }
  p { color: var(--muted); font-size: 14px; }
  button { padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-weight: bold; margin: 4px; }
  .color-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
  input[type=color] { width: 40px; height: 40px; border: none; border-radius: 8px; cursor: pointer; }
  label { font-size: 14px; font-weight: bold; }
</style>
</head>
<body>
<div class="card">
  <h2>🎨 CSS Custom Properties</h2>
  <p>Change the theme by modifying CSS variables:</p>
  <div class="color-row">
    <input type="color" value="#7c3aed" oninput="document.documentElement.style.setProperty('--primary',this.value)">
    <label>Primary Color</label>
  </div>
  <button onclick="document.documentElement.toggleAttribute('data-theme')||document.documentElement.setAttribute('data-theme',document.documentElement.getAttribute('data-theme')?'':'dark')">🌙 Toggle Dark Mode</button>
</div>
<div class="card">
  <h2>Benefits of CSS Variables</h2>
  <p>✅ Single source of truth for colors, spacing, and typography</p>
  <p>✅ Theme switching with one attribute change</p>
  <p>✅ No preprocessor needed — works natively in CSS</p>
</div>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

CSS|34 lines|1854 chars|✓ Valid syntax

UTF-8

Quick Quiz — CSS Architecture

Next Module →