Online sraz 10. 03. 2021

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 budou nově součástí devTools, zatím jako rozšíření
• 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 – @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

Note:

• ke sledování,  future CSS today using
• PostCSS preset env je vlastně Babel pro CSS

Strategie pro responzivní obrázky pomocí nejnovějších CSS vlastnotí

.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í

3× Smashing Magazine

• Create Responsive Image Effects With CSS Gradients And aspect-ratio
• How We Improved SmashingMag Performance
• Nástroje k analýze CSS

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

CodePen: modal uvnitř summary

• modal bez JS (a prvku <dialog>)

Díky, slajdy zanedlouho na @frontendisti