O CSS moderno adicionou funções e propriedades que substituem categorias inteiras de media-query e hacks JavaScript. Os destaques:
clamp() — valores fluidos e limitados
h1 { font-size: clamp(, , ); }
O CSS moderno adicionou funções e propriedades que substituem categorias inteiras de media-query e hacks JavaScript. Os destaques:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) fornece tipografia/espaçamento fluido que se dimensiona suavemente com a viewport, mas permanece dentro dos limites — substituindo várias media queries font-size por uma linha.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
Antes disso, manter uma caixa responsiva 16:9 exigia o infame hack padding-bottom: 56.25%. Agora é uma declaração — e reserva espaço (bom para CLS) antes das imagens carregarem.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() escolhem o menor/maior valor, permitindo que uma propriedade seja responsiva sem media query (por exemplo, "90% de largura, mas nunca mais de 1200px").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid permite que uma grade aninhada herde as linhas de trilha de seu pai, de modo que itens em cartões separados (títulos, corpos, botões) se alinhem perfeitamente em linhas compartilhadas — anteriormente impossível sem alturas fixas.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
Esses recursos eliminam hacks antigos: clamp()/min()/max() substituem pilhas de media queries para dimensionamento fluido, aspect-ratio substitui o hack de padding e protege contra mudanças de layout, e subgrid resolve o alinhamento entre componentes.
Eles tornam layouts responsivos e proporcionais dramaticamente mais simples e robustos — o CSS moderno faz declarativamente o que costumava exigir JS ou truques frágeis.