Letem frontendovým světem, vol. 13
S prvními chladnými rány přicházíme s další várkou horkých frontendových novinek a tipů, které naše vývojáře v poslední době nejvíce zaujaly.
4. října 2023|3 minuty čtení
CSS:
round()
CSS se stále vyvíjí a dostávají se do něj nové featury. Aktuálně do CSS přichází zaokrouhlování.
Round() funguje podobně jako Math.round() v JavaScriptu.
Pěkný článek se všemi možnostmi zaokrouhlování v CSS najdete zde.
Zatím chybí plná podpora ve všech prohlížečích, takže round() funguje jen v Safari 😉.
Tabulka s využitím
View Transition API
Na X (Twitteru) jsme si všimli hezké ukázky využití View Transition API při vytváření nových řádků tabulky nebo jejich mazání.
Vypadá to kouzelně.
View Transition API umožňuje snadno změnit DOM v jednom kroku a vytvořit animovaný přechod mezi dvěma stavy. Je k dispozici v prohlížeči Chrome a Edge od verze 111 a v některých dalších prohlížečích.
Více o této funkci píše Jake Archibald ve svém článku.
“Bezpečný trojúhelník”
u kontextových menu
Článek, který ukazuje, jak se dá řešit nechtěné zavírání submenu pomocí tzv. safe triangles v kontextových nabídkách. V článku jsou popsány 2 verze. Jednodušší, kde se využívají klasické trojúhelníky s rovnými stranami a složitější, kde navíc plynule pomocí křivky měníte hover plochu.
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.
Scroll shadow
jen s CSS
Pomocí CSS vlastnosti animation-timeline bude v budoucnu možné přidávat stín/přechod na okraj scrollovatelných prvků. Moc se na tuto nativní vlastnost v CSS těšíme. Podpora je zatím bohužel slabá.
Na demo se můžete podívat v Codepen.
CSS
Reset
CSS resetů existuje řada. Tento ani není nový, ale zajímavé je využití některých speciálních konstrukcí.
Například container pro IMG, nebo zresetování některých základních HTML tagů pomocí :where(:not()) a tím dosáhnutí nízké specificity pro následné stylování.
Používáte ve svých CSS souborech konstrukci :where(:not())?
Tak zase za měsíc.