31.12.2022 08:00 Priority Hints jsou prostředkem k úpravě prioritizace stahování souborů do prohlížeče. Lidsky řečeno to znamená, že s jejich pomocí můžete zrychlit načtení webu jen pomocí přidání pár řádků kódu. Je to ale obecně už dost pokročilá metoda, takže ji nedoporučuji používat pokud přesně nevíte, co děláte. Priority Hints zatím navíc podporují jen prohlížeče postavené na jádře Chromium, což používání sice neznemožňuje, ale trošku omezuje. Tím končí část textu plná varování a teď už k věci. S Priority Hints v kapse prohlížeči doporučíte, aby zvýšil nebo snížil pořadí prvku ve frontě stahování. Nic víc, nic míň. Specifikace Priority Hints zavádí atribut fetchpriority, který lze použít s prvky HTML, jako jsou img, link, script a iframe: Dále zavádí atribut priority do nastavení při stažení prvků JavaScriptem pomocí funkce fetch : No a jako poslední možnost je vám k dispozici vložení doporučení do HTTP hlavičky: Link: ; fetchpriority=high Link: ; fetchpriority=low Z výše uvedeného je asi už jasné, že pořadí ve frontě stahování můžeme zvyšovat i snižovat. Měníme tak výchozí nastavení priority prvků, například v případě, že se nám jich stahuje až moc najednou. Zmiňuji to proto, že se při čtení můžete ptát, proč se zabývat věcí jako prioritizace v době protokolu HTTP/2, kdy se prvky stahují skoro najednou a rychle. Problém je v tom „najednou“. Například při úvodním vykreslení stránky chceme rezervovat dostupné datové připojení jen pro pár nejdůležitějších prvků a ostatní trošku odložit. Atribut fetchpriority versus přednačtení Vy zkušenější víte o existenci instrukce k přednačtení – . Priority Hints preload nenahrazují, ale doplňují. „Doporučení k upřednostnění“ umožňují jemnější ladění prioritizace. Preload se používat uvnitř v HTML nebo hlavičce HTTP odpovědi. Preload nelze použít např. uvnitř skriptu pro Fetch. Preload neumí snížit prioritu. Preload má podporu v Safari, kdežto atribut fetchpriority zatím jen v prohlížečích Chromium. Volně cituji podle specifikace Priority Hints: Preload je povinné načtení prostředku, který je nezbytný pro aktuální stav stránky. Priority Hints mohou napovědět, že priorita prostředku by měla být nižší nebo vyšší než jeho výchozí priorita, a mohou být také použity k poskytnutí podrobnějšího určení priority. V praxi budeme nejspíš potřebovat obojí, preload i fetchpriority, přičemž tipuji, že někdy bude stačit vhodné použití preloadu a většinou ani to ne. Prostě jde o doplněk pro nás, hračičky s rychlostí webu. Jen na okraj: Specifikace původně mluvila o atributu importance a ten byl také propagovaný na různých místech, ale nakonec se vše změnilo právě na fetchpriority. Pár příkladů do praxe Na praktických příkladech to bude všechno jasnější. Příklad s karuselem Tohle je docela evergreen všech článků o Priority Hints a já jej nevynechám, protože je to velmi dobrý příklad. Vezměme, že na homepage e-shopu máme karusel. To si asi umíme představit, protože e-shop bez karuselu se hledá fakt špatně. Bohužel. Nevýhodou většího počtu obrázků v úvodním HTML ale je to, že všechny mají stejnou prioritu načítání. Z toho pak vyplývá, že se budou stahovat najednou. Líné načtení pomocí atributu loading="lazy" se sem úplně nehodí, protože to by se mělo aplikovat ideálně až na prvky mimo první viewport. Právě k tomuto účelu zde ale je atribut fetchpriority: Tento příklad jsem si rozpracoval do malého demíčka na CodePenu, abyste viděli vliv Priority Hints na vlastní oči. V prvním CodePenu je vidět, že jsem se s implementací nepáral. Do hlavičky dokumentu jsem prostě frnknul styly Bootstrapu a Bento Carouselu tak, jak mně to autoři frameworků doporučili. V horní části obrázku zde pak uvidíte, jak má tento copy/paste přístup neblahý vliv na priority stahování v prohlížeči: Jak atribut fetchpriority změní pořadí stahování prvků ve stránce. Dolní část pobrázku to ukazuje už po optimalizaci. Stačilo rozumně přeskupit prvky v hlavičce a atribut fetchpriority použít pro snížení přednosti načítání pro JavaScript Bootstrapu a všechny obrázky v karuselu kromě prvního. Však si to vyzkoušejte na výsledném CodePenu. Zvýšení priority async skriptu nebo jeho závislosti Pokud do stránky potřebujete vložit asynchronní JS, což obvykle potřebujete, musíte s překousnout fakt, že takovéto skripty se vkládají s nízkou prioritou. Většinou to nevadí, někdy ale jo. Docela dost jo. S pomocí atributu fetchpriority je ale možné takovýto skript popostrčit ve frontě stahování nahoru: Pokud má script závislost, která není vidět v HTML, asi byste pro jeho popostrčení použili preload. I preload bude ovšem vyhodnocen jako s nižší prioritou, proto můžete i ten nechat předběhnout jiné prvky ve frontě stahování: Změnit pořadí prvků stahovaných pomocí Fetch API Opět pěkný příklad ze specifikace. Vezměme, že pro potřeby frontendové apky stahujeme dva JSON soubory s obsahem. V jednom je podstatný obsah, ve druhém něco méně podstatného. I zde je možné pomoci si vlastností fetchpriority: // Články musíme načíst hned fetch .then // Související články chvilku počkají fetch .then Na závěr ještě upozornění: Pokud si s tímto budete hrát, opravdu s nastavováním priorit šetřete a dávejte to jen tam, kde to má opravdu přínos. Stejně jako se na každém druhém webu špatně používá preload, a ve výsledku pak škodí rychlosti, očekávám vlnu pokažené rychlosti webů s pomocí atributu fetchpriority. Ve specifikaci k tomu vyloženě píší: Označení všeho v dokumentu jako vysoce prioritního pravděpodobně zhorší uživatelský prožitek. Já vím, vy to víte. To jen pro jistotu. Podpora v prohlížečích V článku rozebírám vlastnost, která je sice zajímavá a podporovaná všem prohlížeči postavenými na jádře Chromium, ale zatím to není standard a Safari a Firefox k ní zatím nenašli cestu. Pokud fetchpriority budete používat rozumně, jako Progressive Enhancement, pak vám poslouží a nebude moc vadit, že uživatelé Safari a Firefoxu neuvidí benefity vaší optimalizace. V konkrétních prohlížečích vypadá podpora následovně: Chrome od verze 101. Edge také od verze 101. Firefox: probíhá diskuze a hledání pozice k draftu specifikace. Safari: zatím bez signálů o úvahách na implementaci. Více hledejte na CanIUse.com. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
14.12.2022 21:45 Do prosincového dílu podcastu jsme si s Robinem pozvali dva hosty: Adélu Dostálovou a Honzu ChemiXe Černého. Probrali jsme fenomén Figmy, nejpopulárnějšího nástroje pro návrh designu webů. V podcastu hledáme příčiny jejího raketového růstu a přemýšlíme nad změnami v pracovních postupech, které s Figmou souvisejí. Na samotný závěr jsme nemohli vynechat Adobe. Shodli jsme se, že obavy o budoucnost Figmy máme sice velké, ale podle všech možných příkladů z nedávné historie je nemožné jednoznačně říct, že Adobe Figmu zkazí. Podcast Host: Adéla Dostálová Adéla Dostálová používá Figmu každodenně v týmové práci pro Pipedrive a spolu s celou designérskou komunitou se obává, co teď s Figmou bude, když ji koupil poněkud těžkopádný obr jménem Adobe. LinkedIn. Host: Honza ChemiX Černý Honza ChemiX Černý spolupořádá meetupy o Figmě. Figmu miluje mimo jiné jako vývojář. Baví ho velké možnosti automatizace, exportů a dalšího usnadnění práce. LinkedIn, Twitter. O čem mluvíme? Robinův tip: vyšel Next.js verze 13. Martinův tip: Web Performance Calendar. Adéla Dostálová a proč používá Figmu? Honza Černý má slovo, Figma meetupy a technologické pozadí Figmy. Cesta k Figmě - Photoshop, Sketch a tak dále. Adobe XD, jak do toho zapadá? High Fidelity prototypy - problém nástrojů nebo procesů? Design systémy a spolupráce designérů s vývojáři. Live table a FigJam. Export do CSS a kódu, dává to smysl? Koupě ze strany Adobe a jak to s Figmou bude? Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Pište nám na e-mail podcast@vzhurudolu.cz.
13.12.2022 12:45 Subgrid umožní vytvořit zanořenou mřížku, která zároveň podědí layout rodičovského gridu. Je to velmi praktické, ale zatím podporované jen ve Firefoxu a Safari. Subgrid je součástí specifikace CSS gridu. Grid je skvělý, ale dříve či později se s ním dostaneme do situace, kdy potřebujeme jeden grid zanořit do druhého. V takové situaci si pak pochopitelně přejeme, aby vnitřní grid dokázal podědit vnější layout. Jak vidíte na obrázku níže, subgrid mám to pomůže zařídit. Vnitřní části položek budou lícovat, i když mají různě velký obsah. Grid a subgrid. Táta a syn. Můžeme to samozřejmě zajistit i bez subgridu: Nastavit prvkům fixní rozměry na výšku nebo použít JavaScript . Staré páky mezi kodéry si vzpomenou na složité tabulkové layouty, kterými se toho dalo dosáhnout, ale ve kterých se nikdo nevyznal… Příklad s kartou produktu Víte vy co? Ukážu vám to na jednoduchém příkladu. Na obrázku výše totiž vidíte layout podobný tomu, který používám na Vzhůru dolů. Mám seznam položek, říkejme jim karty produktu. Každá karta má složitější strukturu, ve které najdete nadpis, obrázek, text a tlačítko: Text… Tlačítko… Vnější rozvržení, tedy to, které se týká vodorovného umístění karet, udělám gridem. To žádný problém nebude: .container Umísťuji zde dvě položky ). Přeji si, aby nebyly užší než 250px a širší než 400px. Mezera mezi položkami je 4rem. To bude asi bez problémů, že? Ale když já chci, aby nadpisy, obrázky, texty i tlačítka jednotlivých karet byly vždy ve stejné výšce. Přidáváme layout pro jednotlivé karty Nejprve musíme změnit rodičovský layout. Uděláme to tak, že přidáme řádky pomocí vlastnosti grid-template-rows. .container Jak vidíte, nemáme příliš velké ambice položky layoutu nějak omezovat. Víme jen, že budou čtyři . A hodláme je pouze zarovnávat mezi sebou navzájem. A teď kouzlo, subgrid Zápis pro vnitřní mřížku u jednotlivých položek, který řešíme podmřížkou , bude: .item Prohlížeči dáváme tyhle instrukce: Budiž grid ! Umísti tuto položku do čtyř buněk gridu . Svislý směr mřížky nechť je subgridem, takže po gridu zdědí vnější mřížku . Je to jasné? Výsledek uvidíte na obrázku, který vám snad pomůže s pochopením celé věci, což je opět možné zkoušet na živé ukázce. Zelená podmřížka si hoví v modré mřížce a je spokojená. My také, protože vnitřní položky karet jsou navzájem zarovnané. Živá ukázka vám řekne více. Poznámky k subgridu Vzhledem k tomu, že v době aktualizace textu subgrid umí jen dva menší prohlížeče, Firefox a Safari, nepůjdu u této části CSS gridu úplně do hloubky. Pár poznámek zde ale uvedu: Vícerozměrnost sugridu V ukázce jsme pro podmřížku využili jen svislý směr rodičovského layoutu. Je ale samozřejmě možné využít i vodorovný nebo prostě oba směry najednou. Pak se z toho stává jeden velký tabulkový layout, jako z roku 2002. Dělám si legraci, je to samozřejmě daleko, daleko lepší než layout v . Dědění mezer Vlastnost gap se z rodičovského gridu samozřejmě dědí i na ten vnitřní. Je ale možné si mezery ve vnitřním layoutu změnit novou deklarací gap. Žádné přidávání implicitních řádků nebo sloupců V běžném gridu je možné pomocí vlastností grid-auto- definovat rozvržení pro řádky či sloupce. Ty se automaticky přidají, když se rozšíří obsah v HTML. Je asi pochopitelné, že toto v subgridu možné není. Vždy se jen umísťuje do mřížky, která je zděděná shora od rodičovského gridu. Podpora v prohlížečích Subgrid je součástí specifikace CSS Grid Layout Module již od Level 2, která se datuje do roku 2018. Zde je stav k únoru 2022: Firefox podporuje subgrid od verze 70 z prosince 2019. Safari subgrid přidalo v září 2022 do verze 16, od iOS 16 a v aktualizaci pro macOS Monterey a Big Sur. V Chromu se na subgridu – zdá se – docela hodně pracuje. Subgrid má tedy opravdu dobrou šanci, že se ujme a bude nám dobře sloužit už v blízké budoucnosti. Aktuální informace od podpoře hledejte na CanIUse.com/css-subgrid Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
12.12.2022 03:45 Vítejte v referenční příručce pro pseudotřídy v CSS! Pseudotřídy pomáhají obyčejným selektorům při snadnějším vybírání prvků pro stylování. Díky specifikaci Selectors Level 4 a spolupráci tvůrců prohlížečů můžeme dnes, my webaři, používat pseudotřídy, o kterých se nám dříve nesnilo a pomohou nám psát styly jednodušeji a efektivněji. Příkladem takových pseudotříd je :where a další kombinační pseudotřídy. Projdeme si zde ale všechny. Prakticky použitelných pseudotříd je dnes už přes 40 a vsadím se, že některé z nich neznáte. Související „Problémy“ CSS Kaskáda a specificita Dědičnost v CSS Selektory v CSS Pseudotřídy v CSS Rozcestník typů pseudotříd Podívejme se nejprve na roztřídený seznam všech pseudotříd v CSS. Je jich opravu hodně. Odkazy a kotvy Pseudotřídy odkazů a kotev umožňují vybrat různé typy odkazů ve stránce nebo část stránky, která je cílem kotvy. Pseudotřída Zápis Odkaz :any-link Nenavštívený odkaz :link Navštívený odkaz :visited Cíl kotvy :target Uživatelské akce Pseudotřídy uživatelských akcí vybírají aktivní prvky podle jejich stavu vovolaném uživatelem, například najetím kurzorem nebo zaměřením při ovládání z klávesnice. Pseudotřída Zápis Najetí kurzoru :hover Aktivace prvku :active Zaměření prvku :focus Indikované zaměření :focus-visible Zaměření na rodiče :focus-within Uživatelské vstupy Pseudotřídy uživatelských vstupů umožňují vybrat formulářové prvky podle nastaveného očekávání uživatelského vstupu. Příkladem je povinný prvek nebo zvolené zatržítko . Pseudotřída Zápis Povolený prvek :enabled Zakázaný prvek :disabled Možnost zápisu :read-write Nemožnost zápisu :read-only Zobrazený zástupný text :placeholder-shown Použití automatického vyplnění :autofill Výchozí prvek :default Vybraná hodnota :checked Platnost zadání :valid Neplatnost zadání :invalid Povinnost zadání :required Volitelnost zadání :optional Pořadí potomků Pseudotřídy pořadí potomků vybírají prvek podle jeho pořadí v sadě libovolných prvků nebo v sadě prvků stejného typu. Pseudotřída Zápis N-tého prvku :nth-child N-tého prvku od konce :nth-last-child Prvního potomka :first-child Posledního potomka :last-child Jediného potomka :only-child N-tého prvku stejného typu :nth-of-type N-tého prvku typu od konce :nth-last-of-type Prvního potomka typu :first-of-type Posledního potomka typu :last-of-type Jediného potomka typu :only-of-type Kombinace Kombinační pseudotřídy nejsou až tak zaměřené na konkrétní prvky, ale umožňují zjednodušit selektory, snížit specificitu nebo zavádějí nové možnosti jako selektor rodiče. Pseudotřída Zápis Výběru libovolného prvku :is Nulové specificity :where Negace :not Vztahu :has Ostatní Do ostatních pseudotříd řadím prostě to, co se mi jinam nevešlo. Pseudotřída Zápis Směr :dir Jazyk :lang Celá obrazovka :fullscreen Modální stav :modal Kořenový prvek :root Prázdný prvek :empty Pojďme se teď jednotlivým pseudotřídám podívat na zoubek. Nesnažil jsem se zde o podrobný popis každé pseudotřídy, to by vydalo na knížku. Alespoň jsem všude doplnil nějaký příklad, aby se vám to lépe představovalo. Odkazy a kotvy Tyto pseudotřídy umožňují vybrat různé typy odkazů ve stránce nebo část stránky, která je cílem kotvy. Pseudotřída hypertextového odkazu – :any-link Pseudotřída :any-link v selektoru představuje jakýkoliv prvek , nebo s atributem href. Podpora v prohlížečích je plná . Pseudotřídy pro historii odkazů – :link a :visited Pseudotřídy cílící na historii prohlížení poskytují možnost vybrat navštívené a nenavštívené odkazy: Pseudotřída :link se vztahuje na odkazy, které ještě nebyly navštíveny. Pseudotřída :visited se uplatní, jakmile byl odkaz uživatelem navštíven. Jak je známo, po určité době mohou prohlížeče vrátit navštívený odkaz do nenavštíveného stavu. Podpora v prohlížečích je plná, včetně MSIE – viz :link a :visited. Pseudotřída cíle – :target Adresa URL dokumentu může odkazovat na konkrétní prvky v dokumentu prostřednictvím fragmentu adresy . Prvky, na které se takto odkazuje, jsou pak „cílovými prvky dokumentu“, jinak též kotvami. Právě aktivní cíle pro kotvy můžeme stylovat díky pseudotřídě :target: Ahoj h1:target V případě URL example.cz/#kotva se pak prvek podbarví žlutou. Podpora v prohlížečích je plná . Uživatelské akce Existuje několik pseudotříd uživatelských akcí pro výběr prvku, na který kliká nebo se kterým jinak pracuje uživatel. Prvek může odpovídat několika takovým pseudotřídám současně. Například stav navštíveného odkazu po najetí myši stylujeme tímto způsobem: :visited:hover Pojďme teď na ty pseudotřídy uživatelských akcí. Pseudotřída najetí ukazatelem – :hover Pomocí :hover vybíráme prvky, na které uživatel najede ukazatelem myši nebo jejich potomky. V moderních prohlížečích to je použitelné jak pro odkazy, tak pro běžné prvky. .box:hover Pseudotřída aktivace prvku – :active Umožňuje vybrat prvky, na které uživatel klikne nebo je aktivuje na klávesnici. Selektor je ale platný jen v čase mezi okamžiky, kdy uživatel stiskne a pak uvolní aktivační tlačítko . Pseudotřídu :active standard HTML omezuje jen na interakční prvky typu nebo , ale v moderních prohlížečích funguje na všech prvcích. .box:active Pseudotřída zaměření prvku – :focus Pseudotřída :focus platí, dokud je prvek zaměřený a přijímá vstupy z klávesnice nebo myši. Toto funguje jen na takzvaně zaměřitelných prvcích, tedy těch, které mohou vyvolávat akci nebo mají roli v navigační struktuře . V ukázce níže platí: Pokud na prvek dojdu navigací pomocí klávesy Tab nebo na něj kliknu, trvale zežloutne. .box:focus Pseudotřída indikovaného zaměření – :focus-visible Pseudotřída :focus-visible platí, když platí :focus a zároveň prohlížeč usoudí, že je vhodné tento prvek při zaměření zvýraznit. Prakticky vzato: :focus vám prvek zvýrazní jak při klikání myši, tak při najetí pomocí klávesy Tab. :focus-visible je výhodnější v tom, že u některých prvků vynechá zvýraznění při najetí myši. CodePen vám to snad pomůže pochopit. Máme dva odkazové boxíky: .box-1:focus .box-2:focus-visible Používat pseudotřídu :focus-visible je výhodné proto, že v uživatelských rozhraních často nechceme razantně zvýrazňovat při klikání, ale pro lepší přístupnost chceme prvky zvýrazňovat při navigaci klávesou Tab. Podpora v prohlížečích je plná . Pseudotřída zaměření na rodiče – :focus-within Pseudotřída :focus-within se vztahuje na jakýkoli prvek, pro který platí pseudotřída :focus, ale také na prvek jehož potomek podmínky pro přiřazení :focus splňuje. .container:focus-within V tomto příkladu bude mít rodič červenou outline , pokud je focus na potomka. Vím, že se to používá pro uchování otevření navigace jen s pomocí CSS a tak dále. Podpora je plná . Uživatelské vstupy Sem patří :disabled, :read-only a další pseudotřídy, jež pomáhají vybírat vstupní prvky, které mají nějaký konkrétní stav. Většinou se aplikují na formulářové prvky. Pseudotřídy povolení a zakázání – :enabled a :disabled V HTML můžeme některé aktivní prvky zobrazit, ale zakázat jejich používání. V uživatelském rozhraní se pak objeví „zašedlé“: Enabled Button Disabled Button Pomocí pseudotříd můžeme vybrat takto povolené nebo zakázané prvky: :enabled :disabled Samozřejmě je toto možné aplikovat jen na prvky, se kterými může uživatel interagovat. Podpora :enabled a :disabled je plná ve všech prohlížečích, včetně prehistorických ještěrů. Pseudotřídy proměnlivosti – :read-only a :read-write Některé aktivní prvky mohou sloužit jen pro čtení. Nejsou tedy zakázané, disabled, ale readonly: Read/Write Textarea Read/Only Textarea Pomocí pseudotřít proměnlivosti je pak možné přistupovat k těmto prvkům a stylovat je: :read-write :read-only Za pozornost stojí, že všechny neaktivní prvky, např. i div jsou samozřejmě readonly. Můžete to ale změnit přidáním atributu contenteditable. Podpora je plná. Pseudotřída zobrazeného zástupného textu – :placeholder-shown Některé prvky, zejména ty vstupní, mohou obsahovat zástupný text : Pseudotřída v CSS jménem :placeholder-shown je tu proto, abychom mohli stylovat prvek, který placeholder obsahuje. :placeholder-shown Podpora je plná, v MSIE s prefixem. Pseudotřída použití automatického vyplnění textu – :autofill Pseudotřída :autofill představuje vstupní prvky, které byly automaticky vyplněny prohlížečem a uživatel je následně nezměnil. Podpora je plná s výjimkou MSIE. Pseudotřída výchozího prvku – :default Pseudotřída :default se vztahuje na prvky uživatelského rozhraní, které jsou výchozí ze sady podobných prvků. Příkladem je výchozí tlačítko mezi sadou tlačítek: Default Button Another Button Styly: :default První ze sady tlačítek bude vždy pro odeslání formuláře výchozí a proto se rámeček obarví. Jiným příkladem je stylování výchozí možnosti z vyskakovací nabídky . Pseudotřída vybrané hodnoty – :checked Aplikuje se na vybraná zatržítka, přepínače nebo vybranou hodnotu ze seznamu hodnot. :checked Samotné obarvení nebo jiné stylování vybrané hodnoty zase tak užitečné není, ale v kombinaci s dalšími selektory to začne být zajímavé: input:checked + label input :not Podpora pseudotřídy :checked je plná. Pseudotřída neurčitých hodnot – :indeterminate Pseudotřída :indeterminate se vztahuje na prvky uživatelského rozhraní, jejichž hodnota je v neurčitém stavu. Například přepínač a zatržítko lze přepínat mezi stavy zaškrtnuto a nezaškrtnuto, ale někdy jsou v neurčitém stavu, tedy ani zaškrtnuto, ani nezaškrtnuto. Podobně může být v neurčitém stavu ukazatel průběhu , když není známo procento zbývající k dokončení. Neurčitou hodnotu přidává buď prohlížeč, nebo ji můžete vynutit atributem indeterminate. Následující pseudotřídy, totiž pseudotřídy kontroly vstupních hodnot, umožňují dát uživateli zpětnou vazbu, pokud něco zadá do formulářového prvku. Patří sem možnost stylovat povinná políčka nebo označení špatného vstupu . Pseudotřídy platnosti – :valid a :invalid Pseudotřída :valid v CSS představuje jakýkoli prvek nebo jiný formulářový prvek, jehož obsah se úspěšně validuje. Je tak možné buď stylovat validní, či nevalidní prvky nebo je označit textem pomocí content: input:invalid input:invalid + label::before input:valid + label::before Ukázku jsem převzal z MDN, kde si ji můžete zkoušet. Na některé prvky není možné platnost aplikovat. Je rozdíl mezi prvkem, který nemá žádná omezení, a byl by tedy vždy :valid, např. , a prvkem, který nemá vůbec žádnou sémantiku platnosti dat, např. , a není tedy ani :valid, ani :invalid. Podpora pro :valid i :invalid je plná. Pseudotřídy rozsahu – :in-range a :out-of-range Těmito pseudotřídami se v CSS představuje prvek , jehož aktuální hodnota se nachází nebo nenachází v rozmezí určeném atributy min a max. Viz výše uvedený příklad: input:out-of-range input:out-of-range + label::before input:in-range + label::before Podpora je plná, MSIE ovšem trucuje. Pseudotřídy volitelnosti – :required a :optional Pseudotřída :required v CSS označuje jakýkoliv vstupní prvek , posledního , několikátého nebo n-tého ) potomka určitého prvku. Pseudotřída n-tého prvku – :nth-child Velmi užitečná pseudotřída, která umožní vybrat prvek na základě opakujícího se pořadí – sudé, liché, n-té nebo prostě několikáté prvky. Obsah v závorce se zapisuje podle vzoru An+B a tedy např. 2n+1 bude každý druhý plus jedna. n je cyklus začínající vždy nulou, takže toto splní každý lichý prvek: první, třetí, pátý… Příklady: tr:nth-child tr:nth-child tr:nth-child tr:nth-child li:nth-child li:nth-child li:nth-child Podpora základní syntaxe je plná. Horší byste to měli, pokud máte v úmyslu takto stylovat prvky v , což nyní funguje jen v Safari. Pseudotřída n-tého prvku od konce – :nth-last-child Pseudotřída :nth-last-child funguje stejně jako :nth-child , jen se pořadí počítá od konce: li:nth-child li:nth-child tr:nth-child Základní podpora je plná. Pseudotřída prvního potomka – :first-child Pseudotřída :first-child představuje prvek, který je první mezi svými sourozenci. Je to totéž jako :nth-child . .content > p:first-child Podpora je plná. Pseudotřída posledního potomka – :last-child Pseudotřída :last-child představuje prvek, který je poslední mezi svými sourozenci. Je to totéž jako :nth-last-child . .content > p:last-child Podpora je plná. Pseudotřída pvku bez sourozenců – :only-child Pseudotřída :only-child představuje prvek, který nemá žádné sourozence. Je to mimochodem totéž jako :first-child:last-child nebo :nth-child :nth-last-child , jen to má nižší specifičnost. Podpora je plná. Pojďme dál. Pod kostrbatým názvem „pseudotřídy indexu potomků stejného typu“ se ve specifikaci nachází další kategorie pseudotříd, která stejně jako ta předchozí umožňuje vybrat n-té prvky ze sady sourozenců. V tomto případě je ale výběr omezený na prvky stejného typu, takže shodné HTML značky, jako například img, p nebo jiné. Pseudotřída n-tého prvku stejného typu – :nth-of-type Umožní vybrat prvek stejného typu na základě opakujícího se pořadí. Od pseudotřídy :nth-child se liší v tom, že umožňuje zaměření jen na prvky stejného typu. Příklady: img:nth-of-type img:nth-child Další pseudotřídy pořadí Selektor Vysvětlení :nth-last-of-type Pseudotřída posledního prvku stejného typu. Podobné jako :nth-last-child, jen vybere poslední n-tý prvek stejného typu, takže stejné HTML značky. :first-of-type Pseudotřída prvního prvku stejného typu. Podobné jako :first-child, jen vybere první prvek stejného typu, takže stejné HTML značky. :last-of-type Pseudotřída prvního prvku stejného typu. Podobné jako :last-child, jen vybere poslední prvek stejného typu, takže stejné HTML značky. :only-of-type Pseudotřída prvku stejného typu bez sourozenců. Pseudotřída :only-of-type představuje prvek, který nemá žádné sourozence stejného typu. Jde o obdobu konstrukce pseudotříd :first-of-type:last-of-type. V závěrečné části tohoto dlouhého textu se podíváme na zoubek pseudotřídám, které zatím nenašly podporu v prohlížečích. To, abychom se měli na co těšit. Kombinace Kombinační pseudotřídy nejsou až tak zaměřené na konkrétní prvky, ale umožňují zjednodušit selektory, snížit specificitu nebo zavádějí nové možnosti jako selektor rodiče. Pseudotřída výběru jakéhokoliv prvku – :is Pseudotřída :is kontroluje, zda prvek na pozici ve vnějším selektoru odpovídá některému ze selektorů v seznamu selektorů. Je to užitečný syntaktický cukr, který umožňuje vyhnout se ručnímu vypisování všech kombinací jako samostatných selektorů: .header h2, .footer h2, .side h2 :is h2 Specifičnost pseudotřídy :is je nahrazena specifičností jejího nejkonkrétnějšího argumentu. Ve specifikaci je k nalezení tento příklad. Zaměřme se v něm na prvek ol: :is > ul > , ol > , .list > , Vysvětlím: V prvním příkladě máme jednu pseudotřídu a jeden atributový selektor. Je to stručnější, ale je zde silnější specificita o hodnotě . V druhém je jedna třída a jeden element. Je to ukecanější, ale má to slabší specificitu . Podpora je plná . Pseudotřída nulové specificity – :where Na rozdíl od :is nepřispívá pseudotřída :where ani žádný z jejích argumentů ke specifičnosti selektoru. Specifičnost :where je vždy nulová. .header h2, .footer h2, .side h2 :is h2 :where h2 Od Stephanie Eckles jsem si půjčil následující příklad: :where :where :where má vždy nulovou specifičnost. To znamená, že jej můžeme použít k nastavení rozumných výchozích hodnot, které lze přepsat. Výchozí hodnoty v demonstrovaném příkladu můžete přepsat pomocí ul nebo ol . Není třeba uvádět také atributový selektor kvůli zvýšení specificity. Podpora selektoru :where je plná s tradiční výjimkou MSIE. Pseudotřída negace – :not Pseudotřída, která vybere prvek, který není reprezentován jejím argumentem: :is h2 :not h2 Specifičnost pseudotřídy :not je nahrazena specifičností nejspecifičtějšího selektoru v jejích čárkou oddělených argumentech. Podpora pseudotřídy :not je plná . Pseudotřída vztahu – :has O relační pseudotřídě :has jsem už dříve psal. Bez ohledu na specifikaci lidsky řečeno je pro nás důležité, že je :has je použitelný jako selektor rodiče… a:has … nebo také jako selektor přechozího sourozence: h1:has Podpora je v Safari a koncem srpna 2022 bude v Chrome. Na Firefox se zatím čeká. Ostatní Pomocí jazykových pseudotříd je možné stylovat prvky podle směru textu ) nebo nastavení jazyka ). Pseudotřída směru ) Pseudotřída :dir umožňuje webařům napsat selektory, které reprezentují prvek na základě směru určeného jazykem dokumentu. Selektor Vysvětlení h1:dir prvek jehož směr vykreslení podle jazyka je nastavený jako ltr, tedy zleva doprava . h1:dir prvek jehož směr vykreslení podle jazyka je nastavený jako rtl, tedy zprava doleva . Podporu pseudotřídy směru dir v době psaní textu zatím implementoval pouze Firefox. Zajímá vás rozdíl mezi pseudotřídou :dir a selektorem atributu ? Je tam. Selektor atributu se týká pouze daného atributu, pokud je přítomný. Pseudotřída :dir by měla využívat k znalosti sémantiky dokumentu ze strany prohlížeče, takže fungovat, i pokud není jazyk nastavený přímo na HTML prvcích. Například v HTML se směr jazyka prvku dědí, takže potomek bez atributu dir bude mít stejnou směrovost jako jeho nejbližší předek s platným atributem dir. To by samozřejmě atributový selektor nefungoval. Pseudotřída jazyka – :lang Pseudotřída :lang umožňuje psát CSS selektory citlivé na jazyk dokumentu. Selektor Vysvětlení h1:lang prvek , který má nastavený český jazyk. :lang > h1 prvek uvnitř dokumentu v belgické francouzštině. Podpora v prohlížečích je plná . Mimochodem, v HTML je možné jazyk pro dokument nebo prvky dokumentu nastavit kombinací atributu lang, informací ze značek meta a případně také v hlavičkách HTTP. Rozdíl mezi pseudotřídou :lang a atributovým selektorem spočívá v tom, že atributový selektor provádí pouze porovnání s atributem lang u elementu, zatímco pseudotřída :lang se opět snaží zjistit nastavení jazyka jakýmkoliv způsobem. Další rozdíl je v tom, že atributový selektor funguje jako wildcard a umí tedy rozpoznat všechny jazyky začínající na en. Pseudotřída běhu přes celou obrazovku – :fullscreen Pseudotřída :fullscreen se asi nejlépe využije pro stylování stránky zobrazující video nebo samotnou stránku přes celou obrazovku. Hezký příklad jsem našel na MDN, kde různě stylují tlačítko na zobrazení videa přes celou obrazovku: #fs-toggle:not #fs-toggle:fullscreen Pseudotřída modálního stavu – :modal Tato pseudotřída odpovídá prvku ve stavu, kdy vylučuje veškerou interakci s prvky mimo něj, dokud není interakce s prvkem ukončena. Prostě modální okno. Pomocí :modal tedy můžeme stylovat nativní modální okna. Více je na MDN. Podpora je plná. Další pseudotřídy umožňují výběr na základě informací, které se nacházejí ve stromu dokumentu, ale nelze je reprezentovat jinými selektory. Pseudotřída kořenového prvku – :root Ve DOMu odpovídá pseudotřída :root kořenovému prvku objektu Document. V HTML to bude standardně element , což se ale může javascriptem změnit. V praxi se pseudotřída díky své vyšší specificitě používá pro deklaraci autorských vlastností : :root Podpora je plná. Pseudotřída prázdného prvku – :empty Pseudotřída :empty zastupuje prvek, který nemá žádné potomky. Jen pro pořádek: Potomkem může být buď další prvek nebo text . Potomky naopak nejsou komentáře nebo CSS deklarace. Podpora je plná. Nepodporováno Mezi pseudotřídami je řada takových, které nemají podpory mezi prohlížeči ani co by se za nehet vešlo. Alespoň v době psaní tohoto textu. Všechny je už ale najdete ve čtvrté verzi specifikace CSS Selectors. Pseudotřída kontejneru cíle – :target-within Podobně jako :target vybere cíl kotvy a navíc také každý prvek, jehož potomek je cíl kotvy a tedy splňuje podmínky výběru pro :target. Pseudotřída místního odkazu – :local-link Představuje odkaz, jehož cílová absolutní adresa URL se shoduje s adresou URL vlastního dokumentu. Odkazuje tedy sám na sebe. Zápis nav :local-link by pak umožnil zakázat podtržení odkazu, který vede na aktuální URL. Časové pseudotřídy – :current, :past, :future V některých kontextech konzumace obsahu se může hodit označení prvku, který je časově aktuální, předchozí a následující. Specifikace jako příklady uvádí konzumaci dokumentu pomocí audia a prohlížení videa obsahujícího titulky tvořené technologií WebVTT. Pseudotřídy stavu zdrojů – :playing, :paused, :buffering Ve specifikaci též najdete velmi zajímavé pseudotřídy, pomocí kterých by bylo možné vybrat zdroj stánky jako obrázek nebo video, který se přehrává , je pozastavený nebo se ukládá do mezipaměti . Ve specifikaci je těchto pozoruhodných tříd více, jen zatím pražádnou podporu nemají. Pseudotřída stavu zobrazení prvků :picture-in-picture Opět jde o velmi zajímavou pseudotřídu pro zobrazení elementu v režimu PiP , tedy překrývající obsah . Pseudotřída prázdných hodnot – :blank Umožní nastylovat prázný textový vstup nebo víceřádkový vstup: textarea:blank I zde je podpora v době psaní textu bohužel nulová. Pseudotřídy interakce s uživatelem – :user-valid a :user-invalid Tyto pseudotřídy zvolí prvky, které mají správný nebo nesprávný vstup, takže se podobají pseudotřídám platnosti . Rozdíl je v tom, že :user-valid a :user-invalid platí až poté, co s ním uživatel významně interagoval. Pseudotřídy :valid a :invalid se na prvek aplikují, i když jej uživatel nijak nevyplnil, což je bohužel většinou vcelku nepraktické. Nepraktické na pseudotřídách interakce s uživatelem zase je, že v době psaní textu je podporuje pouze Firefox. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
06.12.2022 17:00 Pořád se něco učíme. Abych se naučil layouty v CSS, napsal jsem o nich knížku. Opravdu. Nemyslete si, že jsem si prostě jen sedl k počítači a začal sepisovat to, co jsem měl v hlavě. O gridu a flexboxu jsem toho před třemi lety nevěděl zase o tolik více než průměrný frontendista. Jedna z metod psaní knížky obnášela nakódování desítek častých webových layoutů. Nejprve flexboxem, který jsem uměl lépe. Pak gridem. Překvapilo mě, že skoro vždy bylo nakonec řešení pomocí gridu efektivnější, přehlednější. Vlastně celkově lepší. Nejdůležitější praktická kodérská znalost, kterou jsem při práci na knížce získal, bylo to, že skoro vždy preferuji grid před flexboxem. V tomhle textu vám ukážu důvody, proč tomu tak je. Flexbox vs. grid Začneme obecnou rovinou. V knížce mám pro srovnání těchto dvou systémů pro tvorbu layoutu takovou pěknou tabulku: Vlastnost Flexbox Grid Jednorozměrný layout + + Dvourozměrný layout + Layout z obsahu + ? Layout z mřížky + Kompatibilita v MSIE + ? Už tady je trochu vidět, že v obecné rovině výhody gridu převládají: Grid je určený pro dvourozměrný layout , ale zvládnete s ním i ten jednorozměrný . Flexbox byl navržený pro takzvaný „content out“ layout, kdy se layout vytváří na základě obsahu, což je důležitá, ale ne tak častá potřeba kodérek a kodérů. Grid více odpovídá naší představě o layoutu – chceme, abychom layout kontrolovali my, ne obsah, takzvaně „grid in“. Dříve byla velkou výhodou flexboxu jeho slušná komptatibilita s MSIE. Podpora gridu v tomto dnes již neslavném prohlížeči nějaká byla, ale šlo o pověstné škrábání levou nohou za pravým uchem. Navíc – Explorer je už mrtvý. Grid byl vymyšlený pro vyřešení většiny layoutů na webu. Flexbox má pak řešit specifické případy. Flexbox ale stále vládne Tohle téma mě zajímá, a tak občas na sociálních sítích dělám průzkumy mezi vývojářkami a vývojáři. Preferují flexbox nebo grid? Vypadá to, že stále flexbox. Na Twitteru mi v březnu 2021 odpovědělo 55 % lidí , že flexbox považují za výchozí pro svoji práci. U pětiny to byl grid a u čtvrtiny záleží na případu použití. Podobnou anketu jsem letos zopakoval ve skupině Frontendisti.cz na Facebooku. Flexbox preferuje 30 % , grid jen necelá desetina. Zbytek se rozhoduje podle situace, což je asi nejlepší odpověď, protože opravdu záleží na layoutu. Co je za preferencí flexboxu u webařů? Hlavní důvod je v tom, že flexbox působí jednodušeji. Další podstatná příčina je jeho kompatibilita s MSIE, která se ve své době velmi hodila. No a třetí důvod vyplývá z druhého. Flexbox jsme se kvůli MSIE nějak naučili a na velkou část rozvržení prostě stačí. Je samozřejmě otázkou, jak moc optimální jsou layouty nakódované skoro vždy flexboxem. Zkusme se zamyslet, zda to nejde lépe. Důvod první: robustnost gridu Díky zaměření gridu na tzv. „grid in“ layout byli autoři specifikace nucení promýšlet daleko více případů použití. Specifikace je tedy rozsáhlejší, což mnohé odradí. Ale díky tomu je i robustnější. Co vše můžete gridem udělat nad rámec obyčejných layoutů? Uvedu zde pár příkladů: Pomocí vlastnosti grid-area můžete umístit jakéhokoliv potomka na jakékoliv místo mřížky. Hodnota dense vlastnosti grid-auto-flow částečně nechává vykreslení layoutu typu masonry na prohlížeči. I grid se může přizpůsobovat obsahu ). Grid můžete použít nejen blokově , ale také v řádce . Z gridu vycházejí nové typy rozvržení jako podmřížka nebo masonry. Podobně jako mnozí z vás, jsem i já historicky preferoval flexbox. Na většinu běžných layoutů mi stačil. V momentě, kdy jsem se začal věnovat gridu, postupně začalo docházet k přeorientování na mřížku. Došlo to tak daleko, že jsem nedávno sám sebe načapal při přemýšlení, jestli existují layouty, u kterých je výhodnější použít flexbox. Ano, na pár si jich vzpomenu, ale moc jich není. Ještě se u toho v textu pozastavím později. Důvod druhý: plnohodnotný Box Alignment CSS Box Align je modul CSS, který definuje zarovnání v jakémkoliv rozvržení, ať už je to grid nebo flexbox. Na flexboxu je ovšem nešťastné, že pro něj neplatí všechny vlastnosti zarovnání boxů. Také následující tabulka je z knížky: Hlavní osajustify-* Příčná osaalign-* Oba směryplace-* Zarovnání položek*-items justify-itemsflex, grid align-itemsflex, grid place-itemsflex, grid Zarovnání sebe sama*-self justify-selfflex, grid align-selfflex, grid place-self flex, grid Distribuce obsahu*-content justify-contentflex, grid align-contentflex, grid place-content flex, grid Je to tak. Vlastnosti justify-items i justify-self nejsou dostupné pro layouty tvořené flexboxem. Tím pádem nemůžeme ani použít skvělé zkratky pro obousměrné zarovnání – place-items a place-self. Namísto justify-items můžeme použít starý dobrý margin nebo pro centrování položek ve flexboxu na příčné ose třeba justify-content. Jenže tím to trochu hackujeme, justify-content je ve skutečnosti určný pro distribuci mezer mezi položkami. Jaký je důvod pro nepřítomnost některých vlastností Box Alignment ve flexboxu? Rozličné zaměření flexboxu a gridu. Když jsem to ve specifikaci studoval pro potřeby psaní knížky, chvíli jsem nemožnosti použít tyto vlastnosti rozuměl. Je to složité. Dnes už vám to bohužel vysvětlit neumím. Každopádně v kodérské praxi je nutnost pamatovat si, co ve flexboxu používat můžu a co ne, velice nepříjemná. Pojďme na příklad. Chci v obou směrech centrovat boxík uvnitř rodičovského prvku. Asi jako na obrázku. Centruj, centruj, vykrúcaj! HTML: Jsem uprostřed! CSS řešení flexboxem: .container .item Ano, můžeme zde použít magickou zkratku, kterou kodéři dnes obvykle používají: .container Otázkou je, jestli opravdu kodéři vědí, co přesně tímto dělají. V gridu je to daleko jednodušší. Můžeme použít celou škálu zarovnávacích vlastností z tabulky výše. A tedy i zkratku place-items pro obousměrné zarovnání. .container Pojďme se ještě podívat na poslední z důležitých důvodů, proč já osobně preferuji mřížku před flexboxem. Důvod třetí: layout na rodiči Na gridu mě připadá výhodné, že layouty se vždy vytvářejí na rodiči. Díky tomu existuje jen jeden prvek, který do layoutu promlouvá. A to je rodič. Vezměme tento jednoduchý příklad layoutu s jedním rodičem a dvěma potomky. Jeden má zabrat třetinu, druhý dvě třetiny šířky. HTML kód vypadá takto: 1/3 box 2/3 box Řešení fleboxem by mohlo být následující: .container .col-1 .col-2 Všimněte si, že používám vlastnost gap, která je ve flexboxu k dispozici poměrně čerstvě. Může to být prkotina , ale to, že máme layout definovaný na potomcích, je z mého pohledu, no… řekněme neoptimální. Vždy si totiž představím řádově složitější příklady na komplexních webech nebo systémech designu. Tam se kód pro rodiče i potomky může oddělovat do různých souborů. Dokonce je mohou spravovat různí lidé. Další problém může být v tom, že s vlastností flex definujete také vlastnost flex-basis. Layout se pak může začít chovat jinak, než čekáte. Stačí, když do něj připluje trošku jiných obsah než jste si představovali - například obrázek namísto textu. Podívejte se na vysvětlení „modelů pružnosti“ na posledním uvedením odkazu. Řešení gridem je jednodušší: .container Prostě jen kontejneru nastavíme display:grid a s pomocí grid-template-columns definujeme, jaké má mít sloupce. K tomu přidáme mezeru gap:1rem. To je vše. Dobrá tedy. Ale znamená to celé, že na flexbox máme zapomenout? Ne tak docela. Kam grid nemůže Důvody, proč já osobně grid preferuji, už znáte. Už také víte, že jsem se přistihl přitom, že se mi špatně představují situace, kdy bych grid nepoužil. Jenže co já vím – kodéřinou se neživím a moje představivost je omezená. Proto jsem se na sociálních sítích na příklady ptal i kolegyň a kolegů. Když jsme takto dali hlavy dohromady, už víme, že obecně může být flexbox vhodnější, když jde o tyto situace: Mám jednosměrný layout a neznámý počet položek v něm. Chci, aby se mé rozvržení přizpůsobovalo délce obsahu uvnitř. Rád bych, aby se položky automaticky zalamovaly, pokud prostoru není dost. Jak už jsem uvedl výše, i tyhle případy se dají vyřešit gridem. Fakt jo. Ale bude to samozřejmě trošku složitější. Vezměme si příklad se štítky. Mám předem neznámý počet štítků: Tag Tag too Tag Štítky se mají zalamovat podle šířky okna. Nechci zde zbytečně nastavovat Media Queries. Řešení flexboxem je jednoduché. Navíc přidám gap, který je elegantnější než margin: .tags Gridem to půjde jen částečně a navíc to bude trošku složitější: .tags Protože máme neznámý počet sloupců, musíme zapojit klíčové slovo auto-fit s funkcí repeat . Dále musíme nastavit šířku podle obsahu, zde díky funkci minmax . Zde prostě gridem pácháme zbytečně složitý kód. A navíc – automatická responzivita zde fungovat nebude. Musíme použít Media Queries, však jde o „grid in“ layout, který musíme mít celý pod kontrolou my jako vývojáři. Na sítích se díky vám naskytlo pár dalších příkladů, kdy je prostě flexbox jednodušší: Zarovnání ikonky v tlačítku Zarovnání formulářových prvků s automatickou responzivitou. Fotogalerie s důrazem na přizpůsobení velikosti obrázků. Kroková navigace, která se přizpůsobuje obsahu a viewportu. Kdo je vítěz? Ono záleží… Jak už jsem psal výše, záleží na situaci. Grid je řešení, které mě ve většině případů vyhovuje, ale pro určité konkrétní rozvržení je evidentně flexbox lepší. Hlavně tam, kde má vládnout obsah, není známý počet položek, chceme automatickou responzivitu nebo jde o skutečně velmi jednoduchý layout. Neměl jsem v úmyslu vás přesvědčovat, abyste se začali grid učit. Ale pokud jsem vám pomohl lépe zmapovat problematiku CSS layoutů, budu moc rád. Cílem článku a celého mého zamyšlený bylo najít hranice. Mít v hlavě jednoduchý rozhodovací strom, kdy je použít flexbox výhodnější. Více se samozřejmě dozvíte v knížce. Budu taky rád, když mi napíšete, pokud byste snad v úvaze našli mezeru a nebyl to gap. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
