---
title: Online sraz Brno, 9. března ’22 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

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

9. března ’22

---

### Prohlížeče

---

#### Microsoft Edge 99
_vydán 3. března_

note:

- stejně jako ostatní se připravuje na příchod trojmístných verzí
- mění se metody, které pracují s User-Agent string

---

#### Firefox 98
_vydán 8. března_

note:

- popdporuje prvek `<dialog>`, zbývá už jen Safari
- `díalog` je nativní modal, nutno ho obsluhovat pomocí JS
- není ještě plně v souladu se všemi pravidly přístupnosti
- [CodePen](https://codepen.io/Kout/pen/YzEojwE)

---

#### Chrome 99
_1. března_

---

- CSS Cascade Layers `@layer`
- styling console messages with CSS
- metoda `showPicker()`

Note:

const styles = `background: linear-gradient(90deg, #0057b7 0%, #0057b7 50%, #ffd700 50%, #ffd700 100%); color: #111; font-size: 2.5rem; font-weight: 600; padding: 1rem 2rem;`
console.log('%cСлава Україні!', styles)

- `showPicker` allows web developers to programmatically show a browser picker for input elements (temporal, color, file, and those with suggestions like datalist or autofill).

---

#### Chrome 100
_22. března_

Note:

- zatímco závod o desítkovou verzi vyhrála blahé paměti v roce 2009 Opera (ta původní, uživatelsky dosud nepřekonaný prohlížeč, rád se pohádám u piva), stovky dosáhne jako první Chrome, a to 22. března, ale na hraní je už nyní
- Chromium 100 will be the last version to support an unreduced User-Agent string by default (as well as the related navigator.userAgent, navigator.appVersion, and navigator.platform DOM APIs).
- Multi-Screen Window Placement API

---

#### Internet Explorer
_vydán 17. října 2013_

> No comment…

---

## Zachyceno v síti

---

- [Usability testing guide](https://maze.co/guides/usability-testing/)
- [Heydon Pickering: Is HTML a programming language?](https://briefs.video/videos/is-html-a-programming-language/)

note:

- Maze, představují svůj produkt, ale návody jsou univerzálně použitelné
- v návaznosti na minulý sraz
- Heydon má nové video, kdo nezná, doporučuji začít předchozími videi, aby se člověk naladil
- navázal na bouřlivou výměnu na Twitteru
- vrtulník s konečníkem…

---

## CSS Cascade Layers

`@layer { … }`

note:

- způsob organizace kódu, nikoli vrstvení elementů
- podpora FF97, Chrome 99, Safari 15.4 (příští verze)
- [Smashing Magazine](https://css-tricks.com/css-cascade-layers/)
- na konci článku rozcestník odkazů na další zdroje

---

původ stylů:

- prohlížeč (lépe user agent)
- uživatel
- autor (to jsme my!)

note:

- jakmile uvnitř těchto stylů použijeme `!important` vše se mění

---

priorita následovně:

- `!important` ve stylech prohlížeče
- `!important` v uživatelských stylech
- `!important` v autorských stylech
- autor
- uživatel
- prohlížeč

---

iframe:fullscreen {
  /* iframes in full-screen mode don't show a border. */
  border: none !important;
  padding: unset !important;
}

note:

- neznal jsem
- obdobně se přeskupuje priorita pravidel i v ostatních kontextech (shadow dom, kaskáda, CSS layers)

---

@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
  @layer sub-layer-1 { a { color: yellow; } }
  @layer sub-layer-2 { a { color: green; } }
  /* un-nested */ a { color: blue; }
}
/* un-layered */ a { color: indigo; }

---

K čemu to je?

1. lepší práce s resetovacími stylopisy a výchozími styly
2. celková architektura ([viz ITCSS](https://frontend.garden/clanky/proc-je-itcss-nejpokrocilejsi-metodika-organizace-css/))
3. zapouzdření stylů 3. stran

note:

- sám jsem neměl ještě čas si vyzkoušet (podpora čerstvá)
- variantu 1. a 3. lze nasadit na hotové projekty
- variantu 2. na nový projekt (ITCSS zmiňují i jiné články)