CSS-i modern ka shtuar funksione dhe veti që zëvendësojnë kategori të plota të pyetjeve të medias dhe trick-eve JavaScript. Të veçantë:
clamp() — vlera të rrjedhshme, të kufizuara
h1 { font-size: clamp(, , ); }
CSS-i modern ka shtuar funksione dhe veti që zëvendësojnë kategori të plota të pyetjeve të medias dhe trick-eve JavaScript. Të veçantë:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) jep tipografi/hapësira të rrjedhshme që shkallëzohen përmes dritës, por qëndrojnë brenda kufijve — zëvendëson disa pikë thyerjeje të font-size pyetjeve medias me një rresht.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
Para kësaj, ruajtja e një kutie përgjigjesenore 16:9 kërkonte trick-un të njohur padding-bottom: 56.25%. Tani është një deklaratë — dhe ruan hapësirën (e mirë për CLS) para se të ngarkohen imazhet.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() zgjedhin vlerën më të vogël/më të madhe, duke lejuar një pronë të jetë përgjigjesenore pa pyetje medias (p.sh. "90% e gjerë, por kurrë më shumë se 1200px").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid lejon një rrjet të ndërthurur të trashëgojë linjat e gjurmeve të prindërit të tij, kështu që elementet në kartë të ndryshme (titujt, trupat, butonat) radhiten në përfeksion në rreshta të përbashkët — më parë e pamundur pa lartësi të fiksuara.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
Këto veçori eleminojnë trick-et afatgjata: clamp()/min()/max() zëvendësojnë disa pyetje medias për madhësi të rrjedhshme, aspect-ratio zëvendëson trick-un e mbushje dhe mbron ndryshimin e paraqitjes, dhe subgrid zgjidh radhitjen ndërmjet komponenteve.
Bëjnë paraqitje përgjigjesenore, proporcionale dramatikisht më të thjeshta dhe më të forta — CSS modern bën në mënyrë deklarative atë që më parë kërkonte JS ose trick-e të brishta.