CSS modern wis nambah fungsi lan properti sing ngganti kategori lengkap saka media-query lan JavaScript hack. Sing paling penting:
clamp() — nilai fluida lan terbatas
h1 { font-size: clamp(, , ); }
CSS modern wis nambah fungsi lan properti sing ngganti kategori lengkap saka media-query lan JavaScript hack. Sing paling penting:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) menehi tipografi/spasi fluida sing skalane lancar karo viewport nanging tetep ing batas — ngganti sawetara breakpoint saka font-size media query nganggo siji baris.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
Sadhèn iki, njaga kotak responsive 16:9 butuh hack terkenal padding-bottom: 56.25%. Saiki cuma siji deklarasi — lan ngganti ruang (apik kanggo CLS) sadurunge gambar dimuat.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() milih nilai cilik/gedhe, nglakokake siji properti responsif tanpa media query (conto "90% lebar, nanging ora luwih saka 1200px").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid nglakokake grid sing nesting ngrusakake baris track orangtua, supaya item ing kartu terpisah (judul, isi, tobol) selaras sempurna ing baris sing dibagi — biasane ora mungkin tanpa tinggi tetep.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
Fitur iki ngilangake hack jangka panjang: clamp()/min()/max() ngganti tumpukan media query kanggo ukuran fluida, aspect-ratio ngganti hack padding lan nglindungi owah layout, lan subgrid ngatasi selarasan cross-component.
Nggawe layout responsif lan proporsional luwih gampang lan kuat — CSS modern nglakokake secara deklaratif apa sing dulu butuh JS utawa trik rapuh.