Pokud bych měl rozdělit vývoj CSS do kategorií, posunuli jsme se daleko za dobu, kdy jsme jednoduše požadovali border-radius, abychom měli pocit, že žijeme v budoucnosti. V současné době žijeme v době, kdy nám platforma předává nástroje, které nejen vyladí vizuální vrstvu, ale zásadně předefinují způsob, jakým jsme architekti rozhraní. Myslel jsem, že počet funkcí oznámených v roce 2024 nelze překonat. Nikdy jsem se tak šťastně nemýlil.
„CSS Wrapped 2025“ týmu Chrome není jen seznam funkcí; je to manifest pro dynamický, nativní web. Jako člověk, který strávil několik let dokumentováním těchto evolucí – od definování epoch „CSS5“ až po složitosti moderních nástrojů pro rozvržení – jsem zjistil, že se na letošní závěr dívám s obrovským pocitem vzrušení. Jsme svědky posunu směrem k „optimalizované ergonomii“ a „interakcím nové generace“, které nám umožňují přestat bojovat s kódem a začít vytvářet rozhraní v jejich přirozeném stavu.
V tomto článku najdete komplexní pohled na výjimečné funkce ze zprávy Chrome, nahlížené optikou mých nedávných experimentů a nadějí v budoucnost platformy.
Revoluce komponent: Konečně nativní přizpůsobitelný výběr
Po celá léta jsme se spoléhali na těžké knihovny JavaScriptu při vytváření stylových rozevíracích seznamů, což je „desetiletí starý problém“, který platforma konečně vyřešila. Jak jsem podrobně popsal ve svém hlubokém ponoru do historie přizpůsobitelného výběru (a souvisejících článků), byla to dlouhá cesta zahrnující otevřené uživatelské rozhraní, názvy bikesharingů jako
Fantastický doplněk umožňující bohatý obsah uvnitř možností, jako jsou obrázky nebo vlajky, je hodně zábavný. V dnešní době umíme vytvářet nejrůznější výběry:
Demo: Vytvořil jsem demo Poké-adventure, které ukazuje, jak nový prvek
Viz pero Přizpůsobitelný výběr s obrázky uvnitř možností a vybraný obsah [rozvětvený] pomocí utilitybend.
Demo: Komplexní pohled na styling výběru pouze pomocí pseudoprvků.
Viz pero Přizpůsobitelný výběr pouze s pseudo-prvky [rozvětvený] od utilitybend.
Demo: Nebo to můžete nakopnout pomocí této ukázky výběru nabídky pomocí optgroups.
Podívejte se na pero Aktuální výběrové menu s optgroups [rozvětvené] od utilitybend. Tato funkce sama o sobě signalizuje masivní posun v tom, jak budeme vytvářet formuláře, čímž se sníží závislosti a technický dluh. Rolovací značky a smrt kolotoče JavaScriptu Vytváření kolotočů bylo historicky třecím bodem mezi vývojáři a klienty. Klienti je milují, vývojáři se bojí JavaScriptu potřebného k tomu, aby byly dostupné a výkonné. Příchod pseudoprvků ::scroll-marker a ::scroll-button() tuto dynamiku zcela mění. Tyto funkce nám umožňují vytvářet navigační tečky a rolovací tlačítka čistě pomocí CSS, nativně propojených s rolovacím kontejnerem. Jak jsem psala na svém blogu, tohle byla Láska na první snímek. Možnost vytvořit plně funkční a přístupný posuvník bez jediného řádku JavaScriptu není jen pohodlná; je to triumf výkonu. V souvislosti s touto funkcí existují určité problémy s přístupností, a přestože jsou platné, pro nás vývojáře může existovat způsob, jak ji zprovoznit. Dobrá věc je, že všechny tyto změny uživatelského rozhraní to dělají mnohem snazší než vlastní manipulace DOM a přetahování kolem značek árie, ale to odbočím… Nyní můžeme značky automaticky seskupovat pomocí scroll-marker-group a stylovat tlačítka pomocí umístění kotvy tak, aby byla umístěna přesně tam, kam chceme.
.carousel { přetečení-x: auto; scroll-marker-group: po; /* Vytvoří kontejner pro tečky */
/* Vytvořte tlačítka */ &::scroll-button(inline-end),&::scroll-button(inline-start) { obsah: " "; pozice: absolutní; /* K jejich vystředění použijte umístění kotvy */ poloha-kotva: --carusel; nahoře: kotva(uprostřed); }
/* Vytvořte značky na dětech */ div { &::rolovací značka { obsah: " "; šířka: 24px; hraniční rádius: 50 %; kurzor: ukazatel; } /* Zvýrazněte aktivní značku */ &::scroll-marker:target-current { pozadí: bílé; } } }
Ukázka: Můj experiment s vytvořením karuselu čistě z HTML a CSS s použitím kotevního umístění k umístění tlačítek.
Podívejte se na Pen Carousel Pure HTML and CSS [forked] od utilitybend.
Demo: Remake kluzkého posuvníku webového obchodu pomocí attr() k dynamickému stahování obrázků na pozadí do značek.
Podívejte se na remake kluzkého posuvníku Pen Webshop v CSS [forked] od utilitybend. State Queries: Sticky Thing Stuck? Snappy Co se zlomilo? Dlouhou dobu nám chyběla možnost zjistit, zda se „lepkavá věc zasekne“ nebo zda se „utrhla drobná věc“, aniž bychom se spoléhali na hacky IntersectionObserver. Chrome 133 zavedl dotazy na stav posouvání, což nám umožnilo dotazovat se na tyto stavy deklarativně. Nastavením typu kontejneru: scroll-state nyní můžeme stylizovat děti podle toho, zda jsou zaseknuté, zaseknuté nebo přetékající. Toto je masivní zlepšení „kvality života“, na které jsem netrpělivě čekal od CSS Day 2023. Dokonce se hodně vyvinul, protože také vidíme směr svitku, nádhera! Pro jednoduchý příklad: konečně můžeme aplikovat stín na záhlaví pouze tehdy, když se skutečně drží v horní části výřezu: .header-container { typ-kontejneru: stav rolování; poloha: lepivý; nahoře: 0;
záhlaví { přechod: box-shadow 0,5s náběh; /* Dotaz kontroluje stav kontejneru */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0,6) 0px 12px 28px 0px; } } }
Demo: Lepkavá hlavička, která aplikuje stín pouze tehdy, když je skutečně přilepený.
Podívejte se na hlavičky Pen Sticky s dotazem na stav posouvání a zkontrolujte, zda je sticky prvek přilepený [forked] pomocí utilitybend.
Demo: Seznam s tématikou Pokémonů, který používá dotazy stavu rolování v kombinaci s umístěním kotvy k přesunutí snímku přes aktuálně zachycenou postavu.
Podívejte se na dotaz Pen Scroll-state, abyste zjistili, která položka je zachycena pomocí CSS, verze Pokémona [forked] utilitybend. Optimalizovaná ergonomie: Logika v CSS Sekce „Optimalizovaná ergonomie“ CSS Wrapped zdůrazňuje funkce, díky kterým jsou naše pracovní postupy intuitivnější. Tři vlastnosti vynikají jako transformační pro to, jak píšeme logiku:
if() PříkazyKonečně dostáváme podmínky v CSS. Funkce if() funguje jako ternární operátor pro šablony stylů, což nám umožňuje aplikovat hodnoty založené na médiích, podpoře nebo dotazech na styl přímo. To snižuje potřebu podrobných @media bloků pro změny jedné vlastnosti. @funkce funkcí Konečně můžeme přesunout část logiky na jiné místo, což povede k čistším souborům, což je vlastnost skutečné kvality života. sibling-index() a sibling-count()Tyto funkce počítání stromů řeší problém s rozloženými animacemi nebo stylováním položek na základě velikosti seznamu. Jak jsem prozkoumal v části Stylování sourozenců pomocí CSS nebylo nikdy snazší, eliminuje to potřebu napevno kódovat vlastní vlastnosti (jako --index: 1) v našem HTML.
Příklad: Výpočet rozvržení Nyní můžeme psát výstižné matematické vzorce. Například rozložení animace pro karty vstupující na obrazovku se stává triviální: .card-container > * { animace: odhalit 0,6s uvolnění vpřed; /* Už žádné ruční --index proměnné! */ animace-zpoždění: calc(sourozenecký index() * 0,1s); }
Dokonce jsem experimentoval s použitím těchto funkcí spolu s trigonometrií k umístění položek do dokonalého kruhu bez jakéhokoli JavaScriptu.
Demo: Dynamické ohromující animace karet.
Podívejte se na karty Pen Stagger pomocí sibling-index() [forked] od utilitybend.
Demo: Umístění položek do dokonalého kruhu pomocí indexu sourozenců, počtu sourozenců a nové funkce CSS @function.
Podívejte se na pero Kruh využívající index sourozenců, počet sourozenců a funkce [rozvětvené] od utilitybend. Můj seznam úkolů CSS: Funkce, které se nemůžu dočkat, až vyzkouším Zatímco jsem byl zaneprázdněn vyřezáváním výběrů a přechodů, zpráva „CSS Wrapped 2025“ je nabitá dalšími vychytávkami, které jsem v CodePen ještě neměl možnost spustit. Tyto jsou vysoko na mém seznamu pro mé další experimenty: Ukotvené dotazy na kontejner Použil jsem CSS Anchor Positioning pro tlačítka v mém demo karuselu, ale „CSS Wrapped“ zvýraznívývoj tohoto: Anchored Container Queries. To řeší problém, který jsme všichni měli s popisky: pokud prohlížeč převrátí popisku shora dolů z důvodu omezení místa, „šipka“ často zůstane ukazovat špatným směrem. Pomocí ukotvených kontejnerových dotazů (@container anchored(fallback: flip-block)) můžeme stylovat prvek podle toho, jakou záložní pozici prohlížeč skutečně zvolil. Vnořené skupiny přechodu zobrazení Přechody zobrazení byly revolucí, ale přišly se specifickým kompromisem: srovnaly strom prvků, který často narušil 3D transformace nebo přetečení: klip. Vždycky jsem měl pocit, že tomu něco chybí, a tohle by mohla být odpověď. Použitím view-transition-group: nejbližší můžeme konečně vnořit skupiny přechodů do sebe. To nám umožňuje zachovat ořezové efekty nebo 3D rotace během přechodu – něco, co bylo dříve nemožné, protože prvky byly zvednuty až na nejvyšší úroveň. .card img { view-transition-name: photo; view-transition-group: nejbližší; /* Nechte to vnořené! */ }
Typografie a tvary A konečně, ergonom ve mně touží vyzkoušet Text Box Trim, který slibuje odstranění toho nepříjemného bílého místa nad a pod textovým obsahem (proklad), aby bylo konečně dosaženo dokonalého vertikálního zarovnání. A pokud jde o kreativní stránku, rohový tvar a funkce shape() otevírají nepravoúhlé rozvržení, což umožňuje „čtverečky“ a složité cesty, které reagují na proměnné CSS. Jak již bylo řečeno, nemůžu se dočkat, až budu mít design plný veverek! Nadějná budoucnost Jsme svědky světa, kde CSS začíná zvládat logiku, stavy a složité interakce, které dříve patřily JavaScriptu. Funkce jako moveBefore (zachování stavu DOM pro prvky iframe/videa) a attr() (používání typů mimo řetězce pro barvy a mřížky) tuto realitu dále upevňují. Zatímco některé z těchto funkcí jsou v současné době experimentální nebo specifické pro Chrome, jejich dynamika je nepopiratelná. Musíme doufat v pokračující podporu napříč všemi prohlížeči prostřednictvím iniciativ, jako je Interop, abychom zajistili, že se tyto schopnosti stanou základní. Jak již bylo řečeno, mít vyhledávače je stejně důležité jako mít všechny tyto úžasné funkce v „Chrome first“. Tyto nové funkce je třeba prodiskutovat, pohrát si s nimi a otestovat je, než se vůbec objeví v prohlížečích. Je to fantastický okamžik dostat se do CSS. Už nejsme jen styling dokumentů; vytváříme dynamické, ergonomické a robustní aplikace s nativní sadou nástrojů, která je výkonnější než kdy předtím. Vydejme se do této nové éry a rozšiřme ji. Toto je CSS zabalené!
