20.02.2021 14:31 Asi nás znáte. Ale možná úplně přesně nevíte, čím se zabýváme, a jak se to změnilo v roce 2020, kdy se změnilo skoro všechno. Řekli jsme si, že by mohlo být užitečné se trochu více představit, ještě než začneme další sezonu vysílání. To proto, abyste věděli, z jakých pozic v podcastech hovoříme. Takže v první části vánočního dvojdílu dělá Martin rozhovor s Robinem a Robin rozhovor s Martinem. Nebo tak nějak. Audio MP3 ke stažení O čem mluvíme? Proč tentokrát nestreamujeme na YouTube? Robin, lead developer v Klarna. Robinova podpora vývojářské kultury Podpora open-source ve firmách Jaké technologie Robin používá Práce na produktu versus práce v agentuře Martin, konzultant rychlosti webu na volné noze - co dělá a co už nedělá? Vliv fenoménu 2020 na školení Projekt PageSpeed.cz Jak probíhá práce konzultanta rychlosti Jak se u Robina projevil rok 2020? Problematika online komunikace a proč na schůzku nechodit s krabicí od banánů Co se pánové letos naučili? Knížky od Robina Extreme Ownership, Robinův seznam čtiva pro tech lead Knížky od Martina: Cesta, Žižka, CSS: The Definive Guide, SQL: Visual QuickStart Guide Děkujeme vám za každý odběr, hvězdičky nebo recenzi: iTunes, Spotify a TuneIn. Jak se vám epizoda líbila? Napište nám do komentářů, do e-mailu martin@vzhurudolu.cz. Přejeme vám hezké svátky a díky, že nás posloucháte.
19.02.2021 13:30 V Rohlíku jsme přístupnost řešili vždy, ale na novou úroveň ji dostal audit a zjištění, že naše služba může být pro uživatele se zdravotními omezeními opravdu užitečná. Zaměřili jsme se nejprve na návrat outline, správnou sémantiku , chybové hlášky ve formuláři, orientační body WAI-ARIA a další. Věřím, že popis našeho postupu bude užitečný i pro vás. Proč Rohlík řeší přístupnost? Na přístupnost se v Rohlíku vždy myslelo v rámci vývoje, ale moc se netestovala a nedělaly se audity, které by nás významně inspirovaly k hlubšímu zaměření tímto směrem. Impulsem k tomu se výrazněji zabývat přístupností byl právě audit přístupnosti, který pro nás udělal Roman Kabelka ze společnosti Master Internet. Audit i přednášku o užívání Rohlik.cz zrakově znevýhodněnými tehdy iniciovalo produktové oddělení. Video: Přístupnost prakticky na Rohlík.cz ~ Video-verze obsahu článku, kterou Veronika přednášela na streamu Frontendisti.cz v prosinci 2020. Od Romana jsme obdrželi seznam bariér přístupnosti od klíčových až po méně naléhavé, který nás vedl v tom, jak přístupnost posunout na uživatelsky příjemnější úroveň. Dalším impulsem bylo školení od Radka Pavlíčka a už zmíněného Romana Kabelky. Důležité zjištění: Rohlík může slabozrakým opravdu pomoci Roman nám na školení detailně popsal, jak dokáže naše služba ulehčit život zdravotně znevýhodněným lidem. Člověk se zrakovým handicapem může nakoupit potraviny online a nemusí se složitě přepravovat do obchodu, kde žádá o asistenci a je v podstatě ze sta procent závislý na tom, jak ochotného zaměstnance potká. E-shop s potravinami. Nebo také užitečná služba pro nevidomé. Při nakupování na Rohlíku přitom zvládne vše sám od výběru po přečtení složení, zjištění, co je zrovna ve slevě a nákup dostane doručený až ke dveřím. Začínáme s prací: návrat outline a polyfill focus-visible Když jsem si prvně začala procházet stránku z klávesnice, narazila jsem na problém, že některé prvky se z klávesnice vůbec nedaly zaměřit. Někdy to bylo špatně nastaveným tabindex, ale z větší části to způsoboval outline, obrys prvku používaný kvůli zvýraznění pro handicapované uživatele, nastavený na nulu: :focus Uvědomila jsem si, jak nepřístupné to je. Proč je to problém? Odpověď na tuto otázku nejlépe vystihuje David Gilbertson v článku „Removing that ugly :focus ring “, kde píše: Odstranit focus outline je jako odstranit u školy rampu pro invalidní vozík, protože to neodpovídá estetice. Možnost navigovat a ovládat prvky z klávesnice jsou jednou z nejdůležitějších složek přístupnosti. Uživatelé s motorickým znevýhodněním jsou na ní závislí. Stejně tak jsou zvyklí ji používat zrakově znevýhodnění, kteří používají čtečky . Vypnutí outline je špatná věc. Znemožníte tím sekvenční navigaci z klávesnice a zemře mnoho koťátek. Zdroj: Přednáška Přístupnost v kódu na WebExpo 2017. Zároveň by se ale přidáním outline a tabindex na aktivní elementy začalo zobrazovat zvýraznění obrysem i při použití myši, což by byl problém z hlediska designu. Začala jsem proto hledat řešení, které by ideálně vyšlo vstříc na obě strany. Nejvhodnější nástroj, na který jsem narazila, byl polyfill focus-visible. Ten zaručuje, že se obrys nad prvkem nastaví na elementy za předpokladu, že se uživatel po stránce pohybuje přes klávesnici. Při pohybu myší se nezobrazuje. Toto řešení tak kombinuje dobrou přístupnosti a zároveň odpovídá potřebě designu. Použití polyfillu je velmi jednoduché, nainstalovali jsme polyfill focus-visible do projektu a do stylů přidali: *:focus:not Polyfill zpřístupňuje nativní pseudoselektor :focus-visible, který zatím ale nepodporuje Safari. Správná tlačítka: a na místo a Pokud napříč webem používáme prvky nebo , je přístupnost zaručená nativně. Pokud ale potřebujeme z různých důvodů použít jiný element, jako například nebo , které mají zastupovat například roli tlačítka, tyto prvky se bez další práce stanou nepřístupnými. Uživatel klávesnice se na ně nebude moct dostat a ani s nimi interagovat. To je obecně známé. Možná ale neuškodí opakování, které si můžete o tlačítkách v HTML přečíst na Vzhůru dolů. Jak konkrétně jsme to vyřešili? V případech nutnosti zachování bezvýznamových prvků jsme na element dodali, abychom zajistili jeho přístupnost: roli z hlediska významu a přístupnosti , atribut tabindex kvůli dosažitelnosti při navigace z klávesnice, události vyvolané stiskem klávesy, klikem myši nebo atributy jako aria-label. Na Rohlíku pracujeme v Reactu. Ukážu zde kousek kódu: Nově jsme také přidali pomocnou funkci. Tu přidáváme na prvky, které mají roli tlačítka, ale z principu nereagují na stisknutí kláves ENTER nebo SPACE: export const getOnKeyUpCallback = => => ; Další bod k řešení, který vyšel z analýz, se týkal uživatelského vstupu. Formuláře a chybové hlášky Naše formuláře nebyly přístupné, zvláště pro případy, kdy uživatel zadal špatná data. Chybové hlášky se zobrazovaly dynamicky, ale uživatel čtečky o nich nebyl informován, dokud je cíleně nehledal. Chyběla také indikace, která pole jsou povinná. Jak jsme to změnili? K povinným polím jsme přidali atribut aria-required, aby uživatel při prvním průchodu formulářem věděl, které pole je povinné a které ne. Dále jsme dodali atribut aria-invalid, který indikuje, zda jsou zadané hodnoty validní. Chybovým hláškám jsme přiřadili role="alert", informaci o tom, že jde o chybovou hlášku, a aria-atomic="true", který indikuje živou oblast. Prostě tak, aby došlo k jejich okamžitému přečtení po zobrazení: Jdeme dál, na orientační body. Přidáváme orientační body, landmarks Bez WAI-ARIA landmarks se zrakově znevýhodněný uživatel nemůže pohybovat cíleně jen na určitou oblast na stránce. Musí se proklikávat místy až přes stovky elementů, než se dostane, kam potřebuje. Šest hlavních oblastí stránky podle specifikací HTML5 a WAI-ARIA: hlavička, navigace, vyhledávací pole, hlavní obsah, méně důležitý obsah a patička. Zdroj: HTML5 elementy na Vzhůru dolů. U nás byly například problematické pásy s doporučením produktů ke koupi, které na přehledu objednávky obklopují seznam věcí v košíku z obou stran a tak zaberou uživateli dost času, než se dostane na cílené informace. Pokud vás to zajímá, pásy jsou vidět na prvním obrázku v tomto článku. Pomohlo přidání orientačního bodu complementary na pás s doporučeními: … Potíže s obsahem vkládaným na klientovi Pro zajímavost: pro zlepšení rychlosti webu jsme od podzim začali načítat patičku stránky pomocí líného načtení. Bohužel to ale mělo negativní vliv na přístupnost, jelikož se v době, kdy se patička ještě nenačte, nezobrazí oblast contentInfo v seznamu oblastí. Časem jsme líné načtení zrušili, obsah patičky se vkládá klientským JavaScriptem. Přesto se může stát, že oblast contentInfo uživateli zpočátku čtečka nenahlásí. Na doporučení Romana Kabelky jsme proto do stránky přidali skrytou informaci o tom, že se některé kategorie či patička mohou načítat postupně: … Možná bychom vylepšili ještě to, aby měl roli alert a byl zaměřitelný z klávesnice . Text upozornění by se potom zobrazil i viditelně při průchodu Tabem - viz sekce „Reveal the Skip Link Only to Keyboard“ Users v článku „Keyboard Accessibility Tips Using HTML and CSS“. Hlavní úpravy jsou tímto hotové. Pojďme se dále podívat, jak jsme přístupnost testovali. Testování přístupnosti v Rohlíku Hlavní profesionální testování, které přineslo seznam bodů ke zlepšení pro nás udělal pan Kabelka. Pro ověření, že implementované změny fungují, jsem se učila používat VoiceOver na macOS spolu s prohlížeči Safari i Chrome. Martin Michálek ve svém článku „Testování přístupnosti webů“ hezky popisuje návod na použití odečítaček. Pokud máte Mac, určitě doporučuji si projít i tutoriál, který nabízí přímo VoiceOver při prvním spuštění. Další detailně popsaný návod v angličtině je i například na WebAIM.org. Tipy pro udržitelnost přístupnosti Jak zajistit, aby se na přístupnost do budoucna nepřestalo myslet? Myslím, že dobrou cestou je dělat pravidelně školení i profesionální audity. Zároveň si určit v týmu někoho, kdo bude přístupnost systematicky vylepšovat a připomínat kolegům, aby se na ni při vývoji nezapomnělo, občas zkusí projít web nějakým nástrojem i manuálně a ujistit se, že vše funguje, jak má. Co se nám při práci na zlepšení přístupnosti osvědčilo a co ne? Díky školením a vědomí, jak je naše služba dokáže někomu ulehčit život, mám dojem, že každý z týmu na přístupnost myslí více méně automaticky. Udržovat dobrou přístupnost ale není jednoduché, kód se stále mění a vyvíjí a tím nám místy může mnoho věcí uniknout. Je proto potřeba se k přístupnosti vracet a testovat. Například u sebe ale vidím interní testování jako úskalí. Za prvé jsem samouk začátečník a za druhé naši aplikaci znám natolik, že nejspíš trpím „provozní slepotou“ a určitě mohu přehlédnout, že je někde problém. Proto se určitě hodí i občasný profesionální audit. Jaké jsou výsledky? Když jsme implementovali první várku změn, dostali jsme několik pozitivním ohlasů například na Twitteru, ale hlavně nás hřál dobrý pocit, že jsme pomohli. Co na to říkají lidi u nás ve firmě? Ti, kteří do problematiky přístupnosti víc vidí, tyto snahy oceňují. Místy je ale náročné přesvědčit ty, kteří se přístupností tolik nezabývají. Určitě je výzva toto povědomí rozšířit a přesvědčit kolegy brát přístupnost jako samozřejmost a ne jako komplikaci, která by se měla přehlížet. To je ale výzva ve všech firmách.
13.02.2021 05:41 Flexbox je jeden z nových způsobů, jak v CSS zapisovat layout, ale také zarovnání a distribuci volné plochy. V této aktualizované příručce přibyly texty s příklady pro všechny vlastnosti, které ve flexboxu můžete používat. Související CSS Grid CSS Multicolumn CSS Box Alignment Flex v češtině znamená pružný, přizpůsobivý. Flexboxy jsou tedy pružné elementy layoutu. Jednou z hlavních předností flexboxu je totiž schopnost vyplňovat zbylý prostor. Pokud sháníte příručku k vlastnostem flexboxu, tady je. Všechny vlastnosti Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku nebo položek. Kontejner flexboxu Hodnota vlastnosti display flex nastaví prvku kontext formátování flexboxem, takže jeho přímí potomkové mohou mít specifické vlastnosti. Možná je také „inline“ hodnota: inline-flex. Vlastnost Co dělá a příklad flex-wrap Definuje, zda se položky mohou zalamovat na více řádků nebo ne. Výchozí je nezalamovat. Např. flex-wrap: wrap – položky se mohou vykreslit na další řádek. flex-direction Určí směr toku rozvržení. Výchozí je zleva doprava, do řádku. Např. flex-direction: column – položky se skládají shora dolů, do sloupce. flex-flow Zkratka pro flex-wrap a flex-direction. Např. flex-flow: wrap column – položky se zalomují a skládají shora dolů. Dále lze na kontejner flexboxu aplikovat také vlastnosti : Vlastnost Co dělá a příklad justify-items Zarovnání na řádkové ose . Např. justify-items: center centruje všechny položky. align-items Zarovnání na blokové ose . Např. align-items: end zarovná položky ke spodní hraně kontejneru. place-items Zkratka pro zarovnání položek v obou směrech. Např. place-items: end center zarovná položky ke spodní hraně a vodorovně na střed. K dispozici máme i vlastnosti CSS Box Align, řídící rozdělení volného prostoru, který uvnitř kontejneru zůstává mezi položkami. Vlastnost Co dělá? justify-content Rozdělení prostoru na řádkové ose . Např. justify-content: space-between rozdělí prostor mezi položky. align-content Rozdělení prostoru na blokové ose . Např. align-content: start zajistí zarovnání položek k horní hraně kontejneru. place-content Zkratka pro rozdělení prostoru v obou směrech. Např. place-content: start space-between zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky. Položky flexboxu Vlastnost Co dělá a příklad flex-grow Jak moc může položka růst. Výchozí je 0. Např. flex-grow: 1 – bere si podíl v hodnotě 1 z volného prostoru. flex-shrink Faktor smršťování položky. Výchozí je 1. Např. flex-shrink: 0 – položka se nesmršťuje. flex-basis Výchozí velikost položky. Výchozí je auto, tzn. podle width nebo height. Např. flex-basis: 0 – nehledí se na rozměr obsahu ani width či height. Také na položky flexboxu můžeme aplikovat vlastnosti : Následujícími vlastnostmi pro konkrétní položku definujeme, jak se bude zarovnávat. Vlastnost Co dělá? justify-self Zarovnání na řádkové ose . Např. justify-self: center vodorovně centruje položku. align-self Zarovnání na blokové ose . Např. align-self: end zarovná položku ke spodní hraně. place-self Zkratka pro zarovnání jednotlivé položky v obou směrech. Např. place-self: end center zarovná položku ke spodní hraně a vodorovně doprostřed. Nyní známe vlastosti a teď pojďme prozkoumat jednoduchý příklad. Základy v jednoduchém příkladu Představme si triviální třísloupcový layout: First is loooooong. Second is looooonger.…… Third is short. HTML je jednoduché. O to přísnější máme požadavky na design. A víte co? Ukážeme si rovnou, jak je splnit pomocí flexboxu. V dalším textu kód z CodePenu ještě poctivě vysvětlíme. Všechny sloupce mají být stejně vysoké Ano, i v případech kdy má ten jeden delší obsah než zbylé dva. To je to nejjednodušší. Stačí z rodiče pomocí vlastnosti display udělat kontejner flexboxu: .container Layout se při nedostatku místa zalomí V případě, že zde nebude dost prostoru pro všechny položky, zalomíme. To definujeme pomocí vlastnosti flex-wrap: .container První dva sloupce jsou pružné, třetí nikoliv Zároveň jsme si vymysleli, že první dva sloupce se budou změnšovat a zvětšovat, přičemž druhý dvakrát více než první. Třetí naopak nikoliv, zůstane vždy na svém. Tady pomůže zkratka vlastností položky flexboxu, flex: .col--1 .col--2 .col--3 Na menších displejích se změní směr Na mobilech zpravila není pro rozvržení prvků vedle sebe prostor. Přidáme proto změnu směru layoutu, což zajistíme vlastností flex-direction: @media } Příklad si utíkejte vyzkoušet naživo na CodePen. cdpn.io/e/jOVVeVL Je to hezké, že? Flexbox je mistr na layouty komponent Je dobré zmínit, že flexbox je určený pro layout komponent uvnitř stránek. Tedy navigací, formulářů, stránkovacích komponent atd. atd. Pro celostránkové layouty se více hodí CSS Grid Layout. Užití flexboxu pro celostránkové layouty je samozřejmě možné. Jen se na velmi pomalých zařízeních nebo internetových připojeních nebude vykreslovat optimálně. Píše o tom třeba Jake Archibald. vrdl.in/zuscj Šup na základní pojmy — flex kontejner a flex položka, hlavní a příčná osa Flexbox tvoří nerozlučná dvojice dvou typů elementů – flex kontejner a flex položka. Flex položkou se stává každý přímý potomek kontejneru. … … Flexbox nadefinujeme snadno jen pomocí flex kontejneru: .flex-container Všechny se tady stávají flex položkami. Kromě flex kontejnerů a položek nás v dalším textu budou zajímat ještě osy. Ukažme si to na zjednodušeném schématu: flex kontejner – rodičovský element flex položka – všichni přímí potomci flex kontejneru hlavní osa – výchozí je horizontální, ale lze změnit příčná osa – vždy příčná k hlavní, takže ve výchozí podobě svislá hlavní rozměr – výchozí je šířka, ale řídí se nastavením hlavní osy příčný rozměr – výchozí je výška Podpora Dostupnost vlastností flexboxu v prohlížečích je velmi dobrá, vždyť s podporou přišel už Internet Explorer 10! Grafy na CanIUse jsou tedy pěkně zelené. caniuse.com/flexbox Konkrétní podporu je ale potřeba rozpadnout podle jednotlivých vlastností, uvedených výše v tabulce. Tam je situace už různorodější. Bojem s více či méně příjemnými chybami je provázena implementace v IE, protože jde o nejstarší dnes sloužící prohlížeče. Detailně se tím zabývá Philip Walton v repozitáři Flexbugs. github.com/philipwalton/flexbugs Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
09.02.2021 02:09 Nedávno jsem v newsletteru, na sociálních sítích i zde, na Vzhůru dolů, prosil o vaše názory na online vzdělávání. Jak je zde zvykem – nechci si to všechno nechat jen pro sebe, takže sdílím ty nejzajímavější výsledky. Bylo zajímavé to porovnat s výsledky podobné ankety o vzdělávání webařů, kterou jsem dělal shodou okolností přesně před čtyřmi lety. Stručně řečeno z toho vyšlo následující: Nejpopulárnějším formátem jsou texty a psané tutoriály, následované kratšími YouTube videi. Na Vzhůru dolů vás nejvíce baví články, ebooky, celodenní školení. Pětinu lidí, kteří dotazník vyplnili, online alternativy offline akcí moc neberou. Sociální sítě lidi stejně obohacují jako štvou. Kdo se zúčastnil? Dotazník vyplnilo 135 lidí. Převažují vývojáři a vývojářky . 35,6 % lidí na volné noze, zhruba čtvrtina lidí ve firmách do 20 zaměstnanců, pětina lidí ve firmách nad 100 zaměstnanců. Jaké formáty vám vyhovují? Z pohledu využívanosti Nejvíce využívané jsou články, tutoriály a videa na YouTube. Nejméně: online kurzy s lektorem, online konference. Z pohledu užitečnosti Nejvíce účastníkům vyhovují články a tutoriály, krátká videa, webináře, podcasty. Nejméně vyhovující jsou socsítě, celodenní školení, online konference. Jen na první pohled je překvapivé rozporuplné hodnocení sociálních sítí. Dle mého je to přesně tak, jak vychází z výsledků – někdy jsou socsítě opravdu užitečné, ale někdy to je úplně naopak. Zkušenost s obsahem na Vzhůru dolů Podle využívanosti: nejvyužívanější jsou články, newsletter, e-booky. Nejméně: celodenní školení, YouTube videa. Jasně, ty celodenní školení nejsou pro každého a YouTube videa zatím pořádně neumíme. Nejlépe hodnocená trojice formátů jsou články, ebooky, celodenní školení. Co vyšlo dále? Pětinu lidí online podoba vzdělávání nezajímá. Důvěra vůči onlajnu tedy ještě není na úrovni těch offline akcí, ale myslím, že se to časem zlepší. Respektive nic jiného nám nezbývá. Celodenní online kurzy s lektorem Vyšlo nám, že 39,4 % by si umělo představit celodenní školení rozdělené do dvou odpoledne, což se formát, který sami upřednostňujeme. 29,9 % si zatím neumí představit delší online školení než na půl dne. Zkušenost s video-kurzy 78,9 % YouTube a jiná videa zdarma, 48,6 % Udemy, 19,3 % Learn2Code. Nad 5 hlasů ještě Frontend Masters, Wes Bos, Pluralsight. Jinak velká roztříštěnost. Uvedeno asi 40 možností. Nejlepší online vzdělávací akce nebo kurz Zajímavé výsledky nabídla tato kolonka, kde jsem nechal lidem volné políčko k vyplnění. Vzhůru dolů webináře a online kurzy 10⨉ Udemy 9⨉ Learn2code - 4⨉ Czechitas 3⨉ VueMastery 2⨉ Dále se vyskytly tyto: Pluralsight, Michal Špaček, lwj.dev, Fireship.io, Frontendisti, DevEd, Digisemestr a — kurz na lodního kapitána. Díky všem, kteří jste se zúčastnili, ale i těm kteří jste ochotní se podělit o názor i jinak – v dotaznících k našim školením, na sociálních sítích nebo e-mailem. Pokud k tomu chcete něco dodat, neváhejte se ozvat do komentářů nebo na martin@vzhurudolu.cz.
01.02.2021 19:33 Od Chrome verze 88 a brzy i v dalších prohlížečích můžeme používat vlastnost aspect-ratio, která umožňuje vytvářet kontejnery pro asynchronní obsah a zabránit tak nechtěnému překreslování obsahu stránky, který měří Kumulativní posun layoutu . Technik pro zajištění poměru stran v CSS máme vcelku hodně, přičemž zajištění plochy pro obrázky už příliš řešit nemusíme, to za nás rozlouskly prohlížeče a my jen musíme dodat atributy width a height. Pokud jde o další typy obsahu – iframe s obsahem třetí strany, videa, vkládané SVG dokumenty, asychronně vykreslený obsah od grafů až po výsledky ajaxových dotazů – asi nejznámější metodou je padding trik. aspect-ratio je tady, aby nahradilo právě trik s paddingem. Je to úplně jednoduché, jako hodnotu vlastnosti stačí uvést poměr stran: .box Připravil jsem demo s obrázkem, ve kterém to snad půjde dobře vidět: V HTML je .box rodičem obrázku: Povšimněte si atributů width a height, které drží poměr stran samotného obrázku. Díky vlastnosti delay má obrázek servírovaný skvělou službou Satyr.io nastaveno zpoždění. Když na něj čekáme, prohlížeč by vykreslil bílou plochu. My ale chceme barevný placeholder, aby bylo vidět, že na toto místo něco dorazí. K tomu nám poslouží .box, který má nastavený poměr stran stejně jako obrázek – 4:3 – aspect-ratio: 4/3. Toto bylo úplně základní použití. V textu na web.dev, který sepsala Una Kravets jsou vidět další možnosti – například zajištění stejné velikosti prvků uvnitř CSS gridu. Podpůrná vlastnost object-fit Pokud by byl aspect-ration člověk, do hospody by pravidelně chodil s vlastnostmiobject-fit a object-position. Je to nerozlučná trojka. Obrázek: Hodnoty vlastnosti object-fit. Pro elementy typu obrázky nebo videa, u kterých nevíme, jaký budou mít poměr stran, totiž můžeme držet jednotný prostor a vnitřní prvky následně ořezat nebo nějak napozicovat. Možnosti vlastnosti object-fit jsou následující: Hodnota Jak se chová? fill Vyplní celou plochu. Klidně zdeformuje poměr stran obsahu, ale neořízne ho. contain Nevyplní vždy celou plochu. Obsah nezdeformuje, neořízne a zobrazí celý. scale-down Stejně jako contain, ale nikdy nezvětší obrázek nad přirozenou velikost. cover Vyplní celou plochu. Nenechá volné místo, nezdeformuje obsah, ořízne ho. none Drží původní velikost a poměr stran. Někdy ořízne, někdy nechá volné místo. Triky s attr a důležitost atributů width a height Měl bych zmínit, že prohlížeče přidaly aspect-ratio do svých výchozích stylů pro překvapivě hodně prvků a to nejen těch, do kterých se stahuje asynchronní obsah. Toto je například z výchozího stylopisu Firefoxu, alespoň podle MDN: img, input , video, embed, iframe, marquee, object, table Nastavení poměru stran do atributů width a height tedy definitivně berme za zásadní. Podpora Vlastnost aspect-ratio podporuje Chrome od verze 88. Na ostatní prohlížeče se v době psaní textu čeká, ale dočkáme se velmi brzy, v řádu měsíců. Firefox plánuje podporu od verze 87 . Safari od Technology Preview verze 119, takže se objeví v některém z příštích Safari. Více je na CanIUse. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
