---
title: Křížený potlach v Brně, 11. května ’22 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# { 𝐅 } <br> Letem swwwětem<br>

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](https://web.dev/priority-hints/)
- [devTools zobrazují cascade layers](https://developer.chrome.com/blog/new-in-devtools-101/#layer)
- [Zápis barev `hwb()` „pro lidi“](https://www.stefanjudis.com/blog/hwb-a-color-notation-for-humans/)

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()`

- **h**ue (0–360)
- **w**hitness (0–100%)
- **b**lackness (0–100%)

note:

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

---

<img src="https://hackmd.io/_uploads/SkTCRAuI5.png" width="720" height="721" style="max-height: 600px; width:auto">

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

note:

---

### [Použití vlastních atributů](https://codepen.io/MarkBoots/pen/BaJqKyY)

note:

- Minule jsem doporučoval článek o méně známých atributech… [Those HTML Attributes You Never Use](https://www.smashingmagazine.com/2022/03/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`](https://dev.opera.com/articles/css-will-change-property/)

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](https://9elements.com/blog/combined-aspect-ratio-grid/)

<img src="https://hackmd.io/_uploads/H16GGJKI5.png" width="606" height="725" style="width: 400px; height: auto;">

note:

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

---

<div class="row">
  <div style="--ratio: 4 / 3;" class="item">4:3</div>
  <div style="--ratio: 2 / 3;" class="item">2:3</div>
</div>

<!-- .element: class="c-text-sm" -->

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

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

<!-- .element: class="c-text-sm" -->

note:

- viz [CodePen](https://codepen.io/enbee81/pen/OJzoQZa)

---

[Subgrid](https://ishadeed.com/article/learn-css-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](https://ishadeed.com/article/prevent-scroll-chaining-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](https://ishadeed.com/assets/overscroll/overscroll-auto.mp4) a [video, co chceme](https://ishadeed.com/assets/overscroll/overscroll-contain.mp4)
- 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](https://moderncss.dev/)

note:

- od Stephanie Eckles, kterou doporučuji sledovat

---

Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)