---
# System prepended metadata

title: "Online sraz Brno, 9. března ’22 | {\U0001D405}rontendisti"
tags: [frontendisti]

---

---
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:

```js
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č 

---

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

---

```css
@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)