Online sraz Praha, 10. března ’21 | {𝐅}rontendisti

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # { 𝐅 } <br> Novinky<br> 10. března ’21 --- ### Prohlížeče --- #### Microsoft Edge (legacy) - 9. března skončila podpora - v aktualizacích pro Windows 10 v dubnu bude nahrazen novým Edgem --- #### Firefox 86 vydán 23. února - nově CSS funkce `image-set()` ke vkládání vícero obrázků do `background-image` - další rozvoj nástroje _Inactive CSS_, který v devTools upozorňuje na nadbytečná CSS pravidla --- #### Chrome 89 vydán 2. března - `summary` bude výchoze `display: list-item` a vlastnosti `list-style-type` přibudou nové hodnoty `disclosure-closed` a `disclosure-open` - v devTools vylepšena práce s proměnnými vlastnostmi Note: - `summary`: Cílem je usnadnit stylování a pomocí CSS vlastnosti `appearance` vytvářet na základě `summary`/`details` vlastní komponenty - proměnné vlastnosti: kapátko barev, na výběr kopírování pravidla či hodnoty --- #### Chrome 90 _13. dubna_ - [Core Web Vitals](https://web.dev/vitals/) budou nově součástí devTools, zatím jako [rozšíření](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) - CSS custom counter-styles (FF od verze 33) - atributy `width`/`height` na prvku `source` v `picture` - vlastní pseudotřída `state()` pro custom elementy - vizuální ladění flexboxu Note: - den před příštím vysíláním - Core Web Vitals: nyní jak rozšíření; v překryvu ukazuje hodnotu 3 metrik: LCP, FID, CLS - věnujte jim pozornost, od května se budou zhohledňovat ve výsledcích vyhledávání - ladění flexboxu (opsáno od FF) --- ## Zachyceno v síti --- ### [Adam Argyle](https://web.dev/authors/adamargyle/) – [@argyleink](https://twitter.com/argyleink) - vývojář Google Chrome (nové CSS vlastnosti) - na Twitteru zajímavé ukázky moderního (i budoucího) CSS - využívá balíček [postcss-preset-env](https://preset-env.cssdb.org/features) Note: - ke sledování, [future CSS today](https://twitter.com/argyleink/status/1369292639988711425) using - PostCSS preset env je vlastně Babel pro CSS --- #### [Strategie pro responzivní obrázky pomocí nejnovějších CSS vlastnotí](https://codepen.io/argyleink/pen/BaQppWY) ```sass .aspect-image { aspect-ratio: 1/1; /* Chrome, Edge 88 */ inline-size: 80vw; max-inline-size: 100%; object-fit: cover; background-image: image-set( '' ); @media (orientation: landscape) { & { aspect-ratio: 16/9; } } } ```  Note: - `aspect-ratio` – minule zmiňoval Martin Pešout - logické vlastnosti box modelu: `inline-size` ~ `width` - podpora prohlížečů: `image-set()` s nejnovějším FF všude - zápis s `&` je záměrně, odpovídá stávajícímu stavu [specifikace CSS zanořování](https://drafts.csswg.org/css-nesting/) --- ### 3× Smashing Magazine - [Create Responsive Image Effects With CSS Gradients And `aspect-ratio`](https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/) - [How We Improved SmashingMag Performance](https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/) - [Nástroje k analýze CSS](https://twitter.com/smashingmag/status/1369231342458769408) Note: - použití `aspect-ratio` v praxi s ukázkou na CodePenu - obsáhlá případovka o zrychlování SmashingMagu po školení od Harryho Robertse - pár nástrojů k analýze CSS --- ### <a href="https://codepen.io/NielsVoogt/pres/XWjPdjO" target="_parent">CodePen: modal uvnitř `summary`</a> - modal bez JS (a prvku `<dialog>`) --- Díky, slajdy zanedlouho na [@frontendisti](https://twitter.com/frontendisti)