Letem frontendovým světem, vol. 2
Prázdniny se pomalu chýlí ke konci, ale webový vývoj si dovolenou rozhodně nevzal. Novinky sledujeme neustále a rádi se podělíme o to, co nás v poslední době zaujalo.
Emulace focusu
Stává se vám, že potřebujete prozkoumat prvek v kódu, ale uvnitř komponenty, která hned po ztracení focusu zmizí? Díky twitterovému příspěvku Tomka Sułkowskiho známe pro tento problém rychlé a jednoduché řešení v Chrome Dev Tools:
Z Command menu (CMD + Shift + P / CTRL + Shift + P) lze využít příkaz “Emulate a focused page”.
Končí tak složité hledání konkrétního elementu, na který nastavíte focus.
Text-overfow: ellipsis jako škodlivý nástroj?
Věděli jste, že používáním css vlastnosti text-overflow: ellipsis můžete ztratit důležitá data?
Jako u všeho záleží, JAK danou vlastnost používáte.
Zkrácení nadpisu, který potřebujete na jeden řádek, nebo popisky a názvy tabulky jsou samozřejmě legitimními případy, nicméně použití text-overflow: ellipsis v tlačítku, či pro labely ve formulářích, patří k problematickým způsobům použití.
Více se o problematice používání této CSS vlastnosti dozvíte v článku Text-overflow: ellipsis considered harmful.
Nový tag <model>
Safari v technical preview představuje potenciálně nový HTML element, který zjednoduší prezentaci 3D modelů na webu. Bude fungovat podobně jako tagy <img> a <video> s tím rozdílem, že bude načítat 3D grafiku.
Inspirujte se zajímavým řešením tzv. včelích úlů v gridu
Jak řešit výpis obrázků, který má mít podobu včelího úlu jednoduše, s hezkou animací a navíc s funkčním řešením pro responziv? V této ukázce se dozvíte jak na to!
Podpora obrázků AVIF přichází do Safari!
AVIF disponuje zajímavými a pro web užitečnými vlastnostmi.
Jeho velkou výhodou například je, že i při vysoké kompresi zachovává ostré hrany barevných přechodů.
Podporuje jej zatím jen Chrome, Opera a Firefox, ale i v ostatních prohlížečích se mu blýská na lepší časy.
Zatím je dostupná jen v technology preview a bude nejspíš omezená na macOS od verze Ventura a iOS od verze 16.
Více o AVIFu se můžete dozvědět například v článku Vzhůru dolů AVIF, nová generace obrázků pro web je tady.
👇🏼 Chceš se přidat k nám do týmu, pracovat na projektech Českého rozhlasu, nebo třeba programovat nový “Netflix”? 👇🏼
