Moderni CSS: Kontejnerski upiti, Prikazni prijelazi i :has()

Moderni CSS neprestano zatvara nedostatke: tri značajke koje su se nekad nazivale „CSS-om budućnosti” sada su spremne za produkciju. Kontejnerski upiti (Container Queries) omogućuju komponentama da odgovore na veličinu svog kontejnera, a ne vidnog polja (viewporta), čime se jedna kartica pravilno prilagođava u bočnoj traci ili sekciji pune širine. Upiti veličine su Baseline od veljače 2023. (Chrome 105+, Firefox 110+, Safari 16+); upiti stila, koji omogućuju stiliziranje komponente na temelju prilagođenih svojstava roditelja, postali su Baseline u svibnju 2026. U praksi preferirajte container-type: inline-size; size primjenjuje punu izolaciju i može prekinuti sadržaj koji ovisi o veličini teksta.

API za prikazne prijelaze (View Transitions API) dodaje izvorne animirane prijelaze između stanja i stranica bez potrebe za vanjskim bibliotekama. Prijelazi unutar istog dokumenta postali su Baseline u listopadu 2025. (Chrome 111+, Safari 18+, Firefox 144+). Prijelazi između različitih dokumenata putem @view-transition rade u Chromeu i Safariju, ali još uvijek nemaju podršku u Firefoxu, pa ih tretirajte kao progresivno poboljšanje i poštujte prefers-reduced-motion.

Selektor :has(), Baseline od prosinca 2023., konačno donosi dugo očekivani „roditeljski selektor”: stilizirajte karticu koja sadrži sliku, navigacijsku stavku s aktivnim djetetom ili polje obrasca koje sadrži pogrešku. Zadržite visoke performanse oslanjajući se na specifične elemente i ograničavajući unutarnji selektor pomoću > ili +. Kontejnerski upiti i :has() sigurni su za korištenje u 2026.; prikazni prijelazi su vrijedni implementacije, uz napomenu o podršci u Firefoxu.