Moderni CSS on lisännyt funktioita ja ominaisuuksia, jotka korvaavat kokonaisia media-query- ja JavaScript-hack-kategorioita. Tärkeimmät:
clamp() — nestemäiset, rajoitetut arvot
h1 { font-size: clamp(, , ); }
Moderni CSS on lisännyt funktioita ja ominaisuuksia, jotka korvaavat kokonaisia media-query- ja JavaScript-hack-kategorioita. Tärkeimmät:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) tarjoaa nestemäisen typografian/välistyksen, joka skaalautuu sujuvasti viewport-koon mukaan mutta pysyy rajoissa — korvaa useiden breakpointien font-size media-kyselyt yhdellä rivillä.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
Aiemmin responsive 16:9-boxi vaati pahamaineisen padding-bottom: 56.25% -tempun. Nyt se on yksi deklaraatio — ja se varaa tilaa (hyvä CLS:lle) ennen kuin kuvat latautuvat.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() valitsevat arvoista pienemmän/suuremman, jolloin ominaisuus voi olla responssiivinen ilman media-kyselyä (esim. "90% leveä, mutta ei koskaan yli 1200px").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid antaa sisäkkäisen ruudukon periä vanhemman raidasliniat, joten erillisten korttien kohteet (otsikot, sisällöt, painikkeet) tasaantuvat täydellisesti jaetuilla riveillä — aiemmin mahdotonta ilman kiinteitä korkuksia.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
Nämä ominaisuudet poistavat pitkäkestoisia temppuja: clamp()/min()/max() korvaavat media-kyselyjen pinoja nestemäiselle koon muutokselle, aspect-ratio korvaa padding-tempun ja suojaa asettelun siirtymiseltä, ja subgrid ratkaisee komponenttien välistä tasausta.
Ne tekevät responsiivisista, suhteellisista asetteluista huomattavasti yksinkertaisempia ja kestävämpiä — moderni CSS tekee deklaratiivisesti sen, mitä aiemmin vaati JS:ää tai epävakaita temppuja.