TarefaQuick 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
Teoria
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":
- `@container` β style based on the parent's width, not the viewport's.
- `:has()` β the "parent selector" that finally landed.
.card:has(img)styles only the cards with an image. - `light-dark()` β one declaration, two themes, no JS theme toggle wiring.
- `@layer` architecture β explicit cascade ordering.
@layer base, components, utilitiesand you're done with specificity wars.
If any feels random, redo B6-08 / B8-04 / B5-09 / B8-01 then come back.
π
Regista-te para começar a programar
A teoria estΓ‘ aberta a todos. O editor, a prΓ©-visualização e o check desbloqueiam-se com um teste gratuito de 7 dias β cartΓ£o obrigatΓ³rio, cancelΓ‘vel a qualquer momento.
Registar β teste grΓ‘tis βAs primeiras 10 liçáes de cada trilha sΓ£o grΓ‘tis. Sem cartΓ£o necessΓ‘rio.