Letem frontendovým světem, vol. 5
S prvním sněhem přicházíme i my s další várkou frontendových novinek, kterých si všimli naši vývojáři a vývojářky. Tak jdeme na ně.
Vyšlo Safari 16
K nejzajímavějším novinkám v Safari 16 patří podpora obrazového formátu AVIF, podpora Container Queries a Subgrid.
- Formát AVIF
WebKit podporuje novou generaci obrazového formátu AVIF od dubna 2021, ale Safari ne. Je to proto, že webový prohlížeč společnosti Apple dokáže zpracovávat pouze typy obrázků, které podporují systémy macOS a iOS. Vydáním iOS 16 a macOS 13 Ventura přináší podporu obrazového formátu AVIF do operačního systému a Safari 16. - CSS Container Queries
Pomocí Container Queries definujete vlastnosti CSS na základě parametrů nadřazeného elementu. Určitě by si měl každý, s ohledem na narůstající podporu, přečíst například tento článek CSS Container Queries. Velmi stručně poskytuje rychlý vhled do používání Container Queries a obsahuje i konkrétní ukázky. - Subgrid
Subgrid bohužel stále nepodporují všechny nejrozšířenější prohlížeče. Na aktuální podporu Subgrid se můžete podívat na Can I Use.
Celé release notes Safari 16 jsou k dispozici na tomto odkaze.
Size-adjust
Pokud na svém webu řešíte nepříjemné poskočení textů způsobené pozdním stažením webového fontu, tak právě pro vás je určena CSS vlastnost size-adjust. Pomocí této vlastnosti můžete nastavit měřítko výchozího zástupného fontu.
Existuje několik toolů, které vám práci usnadní.
Pomocí size-adjust kalkulátoru můžete přímo vyhledat vámi požadovaný webový font a kalkulátor vám zobrazí přesné nastavení pro fallback s použitím fontu Arial.
Do druhého nástroje můžete nahrát svůj vlastní font, například firemní font dodaný grafikem a za pomocí vizuálního náhledu nastavit co nejpřesnější měřítko pro zástupný font.
Loadery jen pomocí CSS
Pokud využíváte na svých stránkách animované loadery, můžete se inspirovat na stránce css-tricks.com. Najdete zde kompletní postupy, jak připravit super animované loadery jen za pomocí CSS. Na výběr máte od nejjednodušších řešení až po 3D. Přejeme pěknou zábavu. :)
- https://css-tricks.com/single-element-loaders-the-spinner/
- https://css-tricks.com/single-element-loaders-the-dots/
- https://css-tricks.com/single-element-loaders-the-bars/
- https://css-tricks.com/single-element-loaders-going-3d/
👇🏼 Chceš se přidat k nám do týmu, pracovat na projektech Českého rozhlasu, nebo třeba programovat nový “Netflix”? 👇🏼
