Letem frontendovým světem, vol. 13

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 😉.

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ě.

See the Pen Editable <table> with View Transitions by Adam Argyle (@argyleink) on CodePen.

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.

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

Č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.

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.

See the Pen sticky scroll shadow animation-timeline by Dave Rupert (@davatron5000) on CodePen.

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.