01 / Od ekrana ka kontejneru
Godinama smo pisali @media upite koji su pretpostavljali da širina prozora pretraživača direktno određuje širinu komponente.[01] Čim bismo istu karticu ubacili u dvo-kolonski raspored, morali smo da dodajemo pomoćne klase poput .card--compact.
.otisak .post-slot {
container-type: inline-size;
container-name: post-card;
}
@container post-card (min-width: 820px) {
.otisak .post-card {
grid-template-columns: 3.5rem 1fr 16rem 2.5rem;
}
}02 / Arhitektura @layer slojeva
Prilikom integracije u postojeći sistem kao što je tvoj custom Joomla Foundation template, najveći neprijatelj je rat specifičnosti selektora. Deklarisanjem eksplicitnog redosleda kaskadnih slojeva na vrhu CSS fajla, svaka komponenta dobija predvidivo mesto.[02]
@layer otisak.reset, otisak.tokens, otisak.base,
otisak.layout, otisak.components, otisak.motion;03 / Boje u OKLab prostoru
Umesto ručnog održavanja desetina nijansi za svetlu i tamnu temu, funkcija color-mix(in oklab, var(--ink) 16%, var(--paper)) izračunava granične linije i površine sa ujednačenim perceptuelnim kontrastom u oba režima.