Letem frontendovým světem, vol. 11
Letní horka jsou tady, my jsme se však přípravou novinek ze světa frontendu ani nezapotili 🌞.
Safari 17
Chybí vám v Safari možnost použití fetchpriority atributu? Od verze 17 už vám chybět nebude a Safari se tak připojí k prohlížečům postavených na jádře Chromium, které tuto vlastnost podporují 🥳. Teď už nám zbývá jen čekat na Firefox ⏰.
Koukněte, jaké další novinky nás čekají s příchodem nové verze Safari:
Toto není váš každodenní pseudo-element
V tomto článku najdete devět málo používaných pseudo-elementů, které mohou obohatit způsob, jakým stylujete svůj kód 🎨. Znáte například pseudo-elementy ::marker, ::first-letter nebo ::selection?
Proč se to nehejbe jak má?
Designér z MadLove nám k projektu maugli.cz poslal SVG obrázek, ve kterém chce některé části rozpohybovat. CSS transform animace jsou jasná volba, jenže… Věděli jste, že SVG prvky vztahují svůj transform-origin v defaultu na viewbox 😱? To znamená, že pokud budeme chtít použít v animaci rotate na část SVG, třeba na list, bude list rotovat v závislosti na viewboxu SVG.
Zapeklitá situace. Jak ji ale vyřešit? Jednoduše 💪. Musíme prvku určit transform-box, to je vlastnost, která definuje, ke kterému boxu se budou transformace vztahovat.
My pro náš prvek chceme vlastnost transform-box: fill-box, která se postará o to, aby se transform origin vztahoval k našemu prvku 🤝.
..a u animací zůstaneme
Znáte novou CSS easing funkci linear()?
Easing funkce se obvykle používají pro animace v CSS, přechody nebo Web Animations API v Javascriptu. Dříve jsme mohli specifikovat easing jako cubic bezier, klíčové slovo jako ease-in nebo step funkci. Linear() easing funkce interpoluje lineárně mezi několika body a umožňuje nám dosáhnout bounce, spring a elastic efektů, které byly dříve možné pouze s pomocí složitých JavaScriptů 🙌.
Linear() funkci můžete použít k určení hodnoty pro vlastnost CSS transition-timing-function, animation-timing function property nebo jako easing value při použití Web Animations API v JavaScriptu.
Při využití však pozor na podporu. Linear() funkci zatím podporují pouze prohlížeče na jádře Chromium a Firefox. Na Safari si ještě počkáme 😊.
Selektory ftw!
Selektory jsou super, zvlášť, pokud se jedná o selektory typu :has, :is, :where, :not nebo :nth-child.
V tomto článku se například dozvíte, že můžete stylovat selektory podle počtu potomků, a to jen za pomoci kombinace selektorů :has a :nth-last-child 👏. Článek nabízí praktické ukázky a podrobně vysvětluje, jak to funguje.
li:nth-last-child(n + 3)Přístupnější search? Ano!
Do HTML specifikace letos přibyl nový prvek — search element! Tento prvek slouží k označení oblasti pro vyhledávání na stránce a umožňuje snadnější přístup k této oblasti pro uživatele s asistivními technologiemi, jako jsou čtečky obrazovky.
Jelikož se jedná o novinku, pravděpodobně nějakou chvíli ještě potrvá, než prvek prohlížeče, čtečky a další nástroje doženou 🏃♀️.
