Preskoči na glavni sadržaj
← 🎨 CSS as a design system·Modul B9 · Lekcija 12
ZadatakQuick recap. Write CSS that uses all 4 B7-B9 modern features. Use @layer base, components. In base, set body color via light-dark(black, white). In components: .card { container-type: inline-size; padding: 12px; border: 1px solid #ccc; } and .card:has(img) { background: lemonchiffon; }. Add @container (min-width: 200px) { .card h3 { font-size: 20px; } }.

Recap: Animation, architecture, capstones

50 XP5 min
Teorija

Quick recap — Modules B7-B9

Modern CSS that didn't exist five years ago. The 4 features that signal "this stylesheet was written in 2026":

  1. `@container` — style based on the parent's width, not the viewport's.
  2. `:has()` — the "parent selector" that finally landed. .card:has(img) styles only the cards with an image.
  3. `light-dark()` — one declaration, two themes, no JS theme toggle wiring.
  4. `@layer` architecture — explicit cascade ordering. @layer base, components, utilities and you're done with specificity wars.

If any feels random, redo B6-08 / B8-04 / B5-09 / B8-01 then come back.

🔒

Registriraj se i počni kodirati

Teorija je otvorena svima. Editor, pregled uživo i provjera otključavaju se s 7-dnevnim besplatnim probnim periodom — potrebna kartica, otkaži kad god.

Registracija — besplatan probni period →

Prvih 10 lekcija u svakom smjeru je besplatno. Bez kartice.

← Prethodna✓ Modul završen

Jedan Python ili web savjet dnevno — emailom

Kratko, ručno pisano, bez spama. Odjavi se jednim klikom.