Křížený potlach 11. 05. 2022

{ 𝐅 }
Letem swwwětem

11. května ’22

note:

• Ahoj, poslední porce novinek před prázdninovou pauzou.

Prohlížeče

note:

• minule to bylo celkem výživné, dnes o dost chudší
• ale nějaké změny k lepšímu jsem našel

Microsoft Edge 101

vydán 28. dubna 2022

note:

• Nic převratného.

Firefox 100

vydán 3. května 2022

note:

• Nic zásadního.

Chrome 101

vydán 26. dubna 2022

• Priority hints
• devTools zobrazují cascade layers
• Zápis barev hwb() „pro lidi“

note:

• pomocí atributu fetchpriority lze upřednostnit (nebo upozadit) stažení daného statického souboru
• lze přidat ke značkám link, script, img,  picture, iframe
• o cascade layers ještě dnes uslyšíme
• hwb() nyní použitelné (FF i Safari již podporují)
• článek od Stefana Judise

hwb()

• hue (0–360)
• whitness (0–100%)
• blackness (0–100%)

note:

• případně lze doplnit alfa kanál

note:

• je to opravdu pro lidi? Stefan zkoumal, co se stane, když přidá 100 % černé/bílé, nebo naopak stejný díl – více v článku ;)

Safari 15.4

vydáno 14. března 2022

note:

• podpora pseudotřídy :has – probrali jsme posledně, Chrome 101 experimentálně, nutno zapnout

Internet Explorer

vydán 17. října 2013

Bez komentáře…

Zachyceno v síti

Použití vlastních atributů

note:

• Minule jsem doporučoval článek o méně známých atributech… Those HTML Attributes You Never Use a když jsem prvně viděl tento CodePen, myslel jsem, že mi unikly užitečné atributy pro animace.
• Atributy nejsou platné, ale funguje to. Nevím, co si o tom myslet, proč nepoužít data- atributy?

Sara Soueidan o vlastnosti will-change

note:

• zevrubný článek staršího data, ale stále platný
• správně-li užita will-change může zrychlit vaši stránku nebo alespoň dojem z ní

Building a combined CSS-aspect-ratio-grid

note:

• zarovnání prvků s různými proporcemi do mřížky

  
4:3
  
2:3

.row {
    display: flex;
    gap: 1rem;
}

.item {
    flex-basis: 0;
    flex-grow: calc(var(--ratio));
    aspect-ratio: var(--ratio);
}

note:

• viz CodePen

Subgrid

note:

• podporován FF již delší dobu, nově bude podpora v Safari
• možná už přišel čas, začít se ho učit a klidně používat jako progressive enhancement

Prevent Scroll Chaining With Overscroll Behavior

overscroll-behavior: (auto|contain|none)
overscroll-behavior-x
overscroll-behavior-y

note:

• od téhož autora, Ahmada Shadeeda
• případovka: jak zabránit nechtěnému scrollování pod modalem, viz video, co nechceme a video, co chceme
• najde využití nejen u modalu, ale třeba u boční lišty s dlouhou navigací a podobně (popsáno v článku)

Ujel vám CSS-vlak? Srovnejte krok pomocí série Modern CSS

note:

• od Stephanie Eckles, kterou doporučuji sledovat

Díky, prezentace za chvíli na @frontendisti