Heureka Group
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,bbeze změny, ale alfa kanál 80%.unterlag:lpoloviční,cahbeze změny- Safari to snad už umí
- koutPen
Safari 17.1
vydáno 28. října 2023
popover
<search>
<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ů
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#nefarbapro vlastnostcolorse zjistí až později a uplatní se zděděná hodnota zhtml. Chová se obdobně jako hodnotaunset. 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
li1 obdélník pro celou položku a 1 zanořený pro::markertable1 obdélník pro samotnou tabulku a 1 pro tabulku včetněcaption

CodePen
note:
Díky, prezentace za chvíli na @frontendisti