GizDevCraft Editor - CSS @supports

HTML

CSS

<main class="lesson-shell css-playground">
  <section class="demo-card">
    <span class="eyebrow">CSS @supports</span>
    <h1>CSS practice area</h1>
    <p>Change the CSS tab and watch how selectors, spacing, layout, color, and states affect this preview.</p>

    <nav class="css-nav" aria-label="CSS demo navigation">
      <a href="#cards">Cards</a>
      <a href="#form">Form</a>
      <a href="#table">Table</a>
    </nav>

    <div id="cards" class="demo-target">
      <article class="box featured">Featured</article>
      <article class="box">Lesson</article>
      <article class="box">Practice</article>
      <article class="box">Review</article>
    </div>

    <figure class="image-card">
      <div class="image-placeholder" role="img" aria-label="Gradient image placeholder">Image</div>
      <figcaption>Image styling target</figcaption>
    </figure>

    <form id="form" class="css-form">
      <label for="css-email">Email</label>
      <input id="css-email" type="email" placeholder="student@example.com">
      <button class="css-button" type="button">Try style</button>
    </form>

    <table id="table" class="css-table">
      <caption>Practice progress</caption>
      <tr><th scope="col">Topic</th><th scope="col">Status</th></tr>
      <tr><td>Selectors</td><td>Ready</td></tr>
      <tr><td>Layout</td><td>Practice</td></tr>
    </table>

    <div class="css-pagination" aria-label="Demo pages">
      <a href="#prev">Prev</a>
      <a class="active" href="#one">1</a>
      <a href="#two">2</a>
      <a href="#next">Next</a>
    </div>
  </section>
</main>

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  color: #111827;
}

.lesson-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.demo-card {
  width: min(760px, 100%);
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 18px 45px rgb(15 23 42 / .10);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  color: #4f46e5;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

p {
  color: #536471;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 8px;
  padding: .75rem 1rem;
  background: #4f46e5;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.demo-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.box {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 1.25rem;
  background: #f8fafc;
  font-weight: 800;
}

.featured {
  background: #eef2ff;
  color: #3730a3;
}

/* Lesson code: CSS @supports */
:root {
  --brand: #2563eb;
  --surface: #ffffff;
  --muted: #f1f5f9;
  --space-3: 1rem;
  --radius: 8px;
}

.box {
  background: var(--muted);
  border-radius: var(--radius);
  padding: var(--space-3);
}

@supports (color: color-mix(in srgb, red, white)) {
  .featured {
    background: color-mix(in srgb, var(--brand), white 82%);
  }
}

console.log('CSS editor starter loaded for ' + "CSS @supports");