Heureka Group 08. 11. 2023

příště:
13. prosince, Brno
14. února, Praha

note:

• děkujeme Heuréce, která podporuje naši komunitu dlouhodobě
• v Praze se potkáme až v únoru!

WWW minulém díle jste viděli

note:

• do té doby se v klidu podívejte na videa z Frontkonu
  • kdo byl?
  • kdo nebyl, ale chtěl? (Kdo by nechtěl!)

note:

• ukázat nabušený program
  • hned první na E, Michal Matuška začal z ostra
  • obě diskuze stály za to stejně jako blok věnovaný AI na F
• komu by nestačilo, proběhla perf.now() a navrch videa z červnového CSS day

Dnes WWWečer

• Daniel Gamrot, https://danielgamrot.cz
  Jak podpořit pozornost
• Martin Krištof, Team lead - Road to Product team v Heureka Group
  Jak využít sílu společné práce?
• Ignite Talks, vy!

note:

• po druhé přednášce přestávka

Letem swwwětem
aneb
Nowwwinky

Prohlížeče

Microsoft Edge 119

vydán 2. listopadu 2023

note:

• Nic převratného.

Firefox 119

vydán 24. října 2023

<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>

p::after {
  content: " " attr(data-browser, "Unknown");
  color: tomato;
}

note:

• FF prolamuje ustrnulý vývoj funkce attr()
  • koutPen – pouze ve FF119+
  • specifikace je velmi slibná, bude lze posílat do CSS hodnoty barev, délky atp. => odstraníme ohavný atribut style

Firefox 121

Chrome 119

vydán 25. října 2023

• relative color syntax (CSS color module 5)

:root { --color: blue; }
.overlay {
  background:
    rgb(from var(--color) r g b / 80%);
}

.unterlag {
  --darker-accent:
    lch(from var(--color) calc(l / 2) c h);
}

note:

• .overlay: r, g, b beze změny, ale alfa kanál 80%
• .unterlag: l poloviční, c a h beze změny
• Safari to snad už umí
• koutPen

Safari 17.1

vydáno 28. října 2023

<search role="search">…</search>

@media (update: < none | slow | fast >) { … }

note:

• soupis změn začíná přístupností (dokonce dříve než Apple Pay)!
• popover čeká se na FF, od 114 experimentálně
• prvek <search> sémanticky vyznačí oblast na stránce, která je obsahuje formulář pro vyhledávání či filtrování
• @media (update)
  • none: papír
  • slow: e-čítanky
  • fast: obrazovky
• podpora JPEG XL – jako první (FF jen experimentálně, Chrome experiment opustil)
  • nástupce JPG, PNG, WEBP, GIF; konkurent AVIF (který toho umí méně)
  • (zdroj)

Zachyceno v síti

Neseznamy

ul {
    list-style: none;
}

ul {
    list-style-type: '✔️';
}

ul {
    list-style-type: '';
}

note:

• odstraní sémantiku v Safari, lze vrátit pomocí role="list"
• vhodnější je nastavit prázdný řetězec jako hodnotu list-style-type

Přístupnost erotických obrázků

a11y faq

note:

• vyplňujete alt‽

Kterak se počítají hodnoty proměnných vlastností

html { color: red; }

p { color: blue; }

.card { --farba: #nefarba; }

.card p { color: var(--farba); }

note:

• CSS Café se Stephanie Eckles
• Jakou barvu bude mít odstavec v .card?
• A proč? (Nejprve se vyhodnotí pravopis a ten je v pořádku, proto se přiřadí color: var(--farba). Neplatnost hodnoty #nefarba pro vlastnost color se zjistí až později a uplatní se zděděná hodnota z html. Chová se obdobně jako hodnota unset. Více v článku :wink:)

Kolika obdélníky se tvoří prvek HTML?

0 – display: none, display: contents

1 – většina prvků

2 – li,  table

note:

• počítejme od nuly
• li 1 obdélník pro celou položku a 1 zanořený pro ::marker
• table 1 obdélník pro samotnou tabulku a 1 pro tabulku včetně caption

CodePen

• koutPen: Závěrka

• Divtober

note:

• zdroj: Smashing Magazine
• 12. října

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

product placement