Letem frontendovým světem, vol. 14

CSS selektor :has sice není žádnou novinkou, ale pořád se rozvíjí a stojí za pozornost. Díky podpoře prohlížečů ho už brzy můžeme naplno využívat a zefektivnit výběr prvků na stránce. I v prohlížeči Firefox, kde jej nyní povolíte pod flagem layout.css.has-selector.enabled. Od verze Nightly už je zapnutý ve výchozím stavu.

Určitě myslete i na performance, a proto buďte při používání obezřetní. Pokud jste zatím :has selektor moc neřešili, doporučuju si přečíst článek od Martina Michálka Externí odkaz , ve kterém použití hezky popisuje. Třeba zjistíte, že by se vám to šiklo.

Pokud tvoříte animace, přečtěte si článek Externí odkaz , který nedávno vyšel na Smashing Magazine. Ukazuje, jak používat CSS masky pro vytváření plynulých animací na obrázcích. Snadno tak přidáte zajímavé efekty a vylepšíte vizuální dojem webu. Protože nejen na funkčnosti, ale i vzhledu záleží.

Kdo by nechtěl tvořit jeden nabušený web za druhým. U nás v týmu je efektivita bez ztráty kvality velkým tématem a poslední dobou nám v tom dost pomáhá AI.

Chci se s vámi podělit i o jiné způsoby, jak si k efektivitě pomoci. Naposled nás obohatila Eliška, která předvedla své snippety a makra pro VS Code (zejména v šablonovacích systémech). Existují sice výborná IDEčka, která za nás dělají mnohé, našeptávají, doplňují, zvýrazňují, opravují. Dále tu máme Emmet a podobné nástroje. Možná ale přesto opakujete různé části kódu pořád dokola – a přitom si stačí vytvořit jednoduché makro, které vyplivne kód za vás. Vy si jen změníte parametry a data.

Schválně, nemůžete náhodou kód psát rychleji a lépe, efektivněji?

Zajímají tě novinky ze světa Frontendu?

Přihlas se k našemu newsletteru nebo nás sleduj na  sociálních sítích Externí odkaz .

Přihlásit

Protože u nás chceme psát CSSko moderně, občas mrkneme, jak si stojí prohlížeče s implementací nových vlastností. V nedávno vydaných Chrome a Edge 117 třeba přibyla plná podpora Subgridu. Dobře slouží například ke srovnávání výšek elementů (např. nadpisů) vně karty produktu.

Pokud vás zajímají další vlastnosti, detailně je popisuje článek VzhůruDolů Externí odkaz .

Podle CanIUse je zatím celková podpora této vlastnosti pokryta cca na 60 %, ale jsme zase o krok blíž tomu začít Subgrid používat. Teď je to hlavně na uživatelích.

S macOS Sonoma přišlo i nové Safari 17. Z nových updatů stojí za zmínku například HTML element <search>, který má sémantický význam pro formulář vyhledávání. Safari také podporuje atribut „popover“, který poskytuje rozhraní pro komunikaci mezi tlačítkem a vyskakovacím oknem. Z CSS vlastností bych vypíchl rozšířenou podporu font-size-adjust, která nyní umožňuje další nastavení.

Kompletní seznam novinek browseru najdete v článku Externí odkaz na WebKit.

Teď víte o všem, co se v posledních dnech ve světě frontendu událo. Nezapomeňte nás sledovat, aby vám ani dál nic neuniklo. Sledujeme to za vás!