Čo je dôležité #4

Chrome, Safari ani Firefox v posledných týždňoch nevydali žiadne nové funkcie, ale neobávajte sa, pretože toto vydanie What's !important vedie niekoľko najlepších vzdelávateľov v odvetví webového vývoja s úprimne úžasným obsahom.

Udržiavanie stavu videa naprieč rôznymi stránkami pomocou view transitions

Chris Coyier demonštruje ako udržať stav videa naprieč rôznymi stránkami pomocou CSS view transitions. Poznamenáva, že toto je pomerne jednoduché urobiť s view transitions na tej istej stránke, ale s viacstránkovými view transitions budete musieť využiť JavaScript udalosť pageswap na uloženie informácií o stave videa do sessionStorage ako JSON reťazec (funguje aj s audio a iframe), a potom použiť tieto informácie na obnovenie stavu pri pagereveal. Áno, je tam maličké audio zadrhnutie, pretože to technicky len predstierame, ale je to stále super zaujímavé.

Okrem toho CodePen, o ktorom už určite víte, že ho založil Chris, oznámil súkromnú beta verziu CodePen 2.0, o ktorú môžete požiadať. Jedna z výhod CodePen 2.0 je, že môžete vytvárať skutočné projekty s viacerými súbormi, čo znamená, že môžete vytvárať view transitions v CodePene. Celkom super!

Ako 'pomenovať' media queries

Kevin Powell nám ukazuje ako využiť CSS cascade layers na 'pomenovanie' media queries. Táto technika nie je taká efektívna ako @custom-media (alebo dokonca container style queries, ako navrhol jeden komentujúci), ale kým nebudú tieto podporované vo všetkých webových prehliadačoch, Kevinov trik je celkom kreatívny.

Adam Argyle nám minulý týždeň pripomenul, že @custom-media sa testuje vo Firefox Nightly (zatiaľ žiadne správy o container style queries), ale ak sa zorientujete v CSS cascade layers, môžete medzitým využiť Kevinov trik.

Vale's CSS reset

Mám rád dobrý CSS reset. Nezáleží na tom, koľko ich prečítam, vždy objavím niečo úžasné a pridám to do vlastného resetu. Z Vale's CSS reset som si ukradol svg:not([fill]) { fill: currentColor; }, ale je tam oveľa více vecí, ktoré si z toho môžete odniesť!

Ako fungujú prehliadače

Ak ste sa niekedy pýtali, ako vlastne fungujú webové prehliadače — ako získavajú IP adresy, vytvárajú HTTP požiadavky, parsujú HTML, budujú DOM stromy, renderujú rozloženia a vykresľujú obsah, nedávno vydaná How Browsers Work od Dmytra Krasuna je neuveriteľne zaujímavé, interaktívne čítanie. Skutočne vás to prinúti zamýšľať sa nad úzkymi miestami jazykov pre webový vývoj a nad tým, prečo sú určité HTML, CSS a JavaScript funkcie také, aké sú.

Ako funguje CSS layout

Okrem toho Polypane vysvetľuje základy CSS layoutu, vrátane box modelu, riadkov a základných línií, schém pozicionovania, stacking contextu, grid layoutu a flexboxu. Ak ste noví v CSS, myslím, že vám tieto vysvetlenia skutočne pomôžu pochopiť ho. Ak ste veterán (ako ja), stále si myslím, že je dôležité naučiť sa, ako sa tieto základné koncepty aplikujú na novšie CSS funkcie, najmä keď sa CSS v týchto dňoch vyvíja exponenciálne.

CSS masonry je (pravdepodobne) za rohom

Pokiaľ ide o rozloženia, Jen Simmons objasňuje kedy budeme môcť používať display: grid-lanes, inak známy ako CSS masonry. Hoci to zatiaľ nie je podporované v žiadnom webovom prehliadači, Firefox, Safari a Chrome/Edge to všetky testujú, takže sa to môže zmeniť celkom rýchlo. Jen každopádne poskytuje niekoľko polyfillov!

Ak chcete byť o krok vpred, môžete nechať Sunkanmi Fafoworu, aby vás previedol display: grid-lanes.

Tematizácia animácií pomocou relative color syntax

Ak ste posadnutí dizajnovými systémami a organizáciou a máte tendenciu vnímať ilustráciu a animáciu ako pôsobivé, ale neusporiadané umelecké formy, článok Andyho Clarka o tematizácii animácií pomocou CSS relative color syntax vám skutočne pomôže prekonať priepasť medzi umením a logikou. Ak sú CSS premenné vaša parketa, potom je tento článok určite pre vás.

Modály vs. stránky (a všetko medzi tým)

Modály? Stránky? Lightboxy? Dialógy? Tooltipy? Pochopenie rôznych typov prekryvných vrstiev a vedieť, kedy použiť každý z nich, je stále dosť mätúce, najmä keď novšie CSS funkcie ako popovers a interest invokers, hoci sú neuveriteľne užitočné, robia prostredie zámutnejším. Stručne povedané, Ryan Neufeld objasňuje celú vec modál vs. stránka a dokonca poskytuje rámec na rozhodovanie, ktorý typ prekryvnej vrstvy použiť.

Podpora škálovania textu sa testuje v Chrome Canary

Viete, keď pracujete s textom, ktorý bol zväčšený alebo zmenšený na úrovni operačného systému? No...ak ste webový vývojár, možno nie. Veď táto funkcia na webe nefunguje! Avšak Josh Tumath nám hovorí, že Chrome Canary testuje meta tag, ktorý umožní webovým prehliadačom rešpektovať toto nastavenie operačného systému. Ak ste zvedaví, je to <meta name="text-scale" content="scale">, ale Josh to rozoberá podrobnejšie a stojí to za prečítanie.

Uvidíme sa nabudúce!