Přejít k obsahu Přejít k hlavnímu menu

SUPERKODERS

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.

Radek Šír 4. října 2023 3 min. č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ě.

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 .

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

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.

See the Pen sticky scroll shadow animation-timeline by Dave Rupert (@davatron5000) on 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.

Chceš se bavit s námi?

Hledáme do týmu další zapálené vývojáře.
Mrkněte na kariéru a napište Michalovi.

Michal Matuška | CTO +420 737 770 642

Michal Matuška