Moderni CSS koji stvarno možete isporučiti 2026.

Moderni CSS više nije izbor između uzbudljivih demonstracija i konzervativnog produkcijskog koda. Nekoliko značajki koje su nekada zahtijevale JavaScript ili nezgodne radne postupke za raspored sada su spremne za svakodnevnu upotrebu. Ključna razlika 2026. nije je li značajka nova, već može li preglednik koji je ne podržava i dalje primiti potpunu, upotrebljivu stranicu.

Isporučite :has() bez zaobilaznih rješenja za kompatibilnost

Relacijski selektor :has() pripada Baseline Widely available. Praktičan je način stiliziranja komponente prema njezinom sadržaju ili stanju bez dodavanja klase iz JavaScripta. Primjerice, obrazac može istaknuti grupu polja koja sadrži nevažeći kontrolni element:

.field-group:has(input:invalid) {
  border-color: crimson;
}

Za normalnu produkcijsku upotrebu nije potreban @supports čuvar. Ipak, zadržite obično pravilo na prvom mjestu kada je stil neobavezan. Ako preglednik ne može raščlaniti selektor koji sadrži :has(), odbaci će to pravilo; neće oštetiti ostatak stila. Koristite :is() ili :where() kada popis selektora koji oprašta pogreške ima smisla.

Učinite komponente responzivnima pomoću upita spremnika

Veličinski upiti spremnika također pripada Baseline Widely available i obično su bolji izbor od medijskih upita prozora za kartice za višekratnu upotrebu, bočne trake i ugrađene widgete. Komponenta reagira na prostor koji stvarno dobiva:

.card-shell {
  container-type: inline-size;
}

@container (min-width: 32rem) {
  .card {
    grid-template-columns: 8rem 1fr;
  }
}

Medijski upit kao fallback može stajati uz pravilo @container. Blokovi @container koji nisu podržani preskaču se sigurno, pa fallback ostaje aktivan. Budite oprezniji s novijim upitima stila spremnika, upitima stanja pomicanja i usidrenim upitima spremnika: tretirajte ih kao progresivna poboljšanja, a ne pretpostavljajte da svaka značajka spremnika ima isti profil podrške.

Tretirajte prijelaze prikaza kao dodatak, a ne kao navigaciju

View Transitions API pripada Baseline Newly available, još nije Baseline Widely available. Može učiniti navigaciju unutar istog dokumenta ili između dokumenata glatkijom, ali prijelaz nikada ne smije biti ono što čini navigaciju razumljivom ili upotrebljivom. Starije verzije preglednika jednostavno trebaju normalno prikazati stranicu.

Za prijelaze vođene JavaScriptom, otkrijte značajku prije poziva:

if (document.startViewTransition) {
  document.startViewTransition(updatePage);
} else {
  updatePage();
}

Za prijelaze između dokumenata, preglednici koji ne podržavaju zanemaruju pravilo @view-transition. Zadržite normalnu poveznicu, ponašanje fokusa, stanje učitavanja i konačnu stranicu neovisno o animaciji. Ako efekt nestane, proizvod bi trebao i dalje djelovati cjelovito.

Zadržite pravi fallback za izvornu zidnu rešetku

Izvorna zidna rešetka (masonry) je značajka koja još uvijek zaslužuje čvrsti zaustavak prije usvajanja. Trenutna sintaksa grid-lanes ima Limited availability i ostaje eksperimentalna; stabilna podrška nije dovoljno široka da bi bila jedini put rasporeda. Omotajte je u @supports i pružite konvencionalni grid fallback:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

@supports (display: grid-lanes) {
  .gallery {
    display: grid-lanes;
    grid-template-columns: repeat(3, 1fr);
  }
}

Fallback treba biti više od zamjenskog mjesta. Provjerite redoslijed čitanja, tijek tipkovnice, veličinu slika i ponašanje kada kartice imaju vrlo različite visine. Višestupčano ili JavaScript rješenje može biti prikladno za određeni dizajn, ali nijedno ne bi trebalo uvesti samo radi vizualnog efekta.

Sigurna zadana postavka za 2026.

Koristite :has() i veličinske upite spremnika izravno kada pojednostavljuju komponentu i nepodržano ponašanje je prirodno bezopasno. Dodajte prijelaze prikaza samo kao progresivno poboljšanje, s otkrivanjem značajke u JavaScriptu gdje je primjenjivo. Zadržite zidnu rešetku iza @supports dok njezin profil podrške ne bude dovoljno širok za vašu publiku. Ovaj pristup omogućuje modernom CSS-u da smanji složenost bez da podrška preglednika postane problem korisnika.

Dodatno čitanje: MDN-ova referenca za :has(), upiti spremnika, View Transitions API i raspored zidne rešetke.