Letem frontendovým světem, vol. 14
Abyste si udrželi přehled v rychle se měnícím světě webového frontendu, sepsali jsme pro vás info o trendech, nových technikách a nástrojích, které jí, hýbou. A také inspirativní ukázky, o které se v rámci našeho FE týmu pravidelně dělíme. Mrkněte na ně.
1. listopadu 2023|4 minuty čtení
Podpora :has
selektoru ve Firefoxu
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 , ve kterém použití hezky popisuje. Třeba zjistíte, že by se vám to šiklo.
Animace CSS masky
pro zobrazení obrázku s efektem
Pokud tvoříte animace, přečtěte si článek , 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ží.
Kódování
na steroidech
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.
Rozšířená podpora
CSS Subgrid
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ů .
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.
Nové funkce
v Safari 17
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 na WebKit.
Závěrem
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!