Online sraz 09. 03. 2022

{ 𝐅 }
Letem swwwětem

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

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
• Heydon Pickering: 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
  • 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)
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)