--- title: 8. listopadu ’23 | {𝐅}rontendisti tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # {𝐅}rontendisti #### Praha, Heureka Group <br> 8. listopadu ’23 <small>příště: <br> 13. prosince, Brno</small><!-- .element: class="fragment" --> <small>14. února, Praha</small><!-- .element: class="fragment" --> 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!) --- <li> <a href="https://www.youtube.com/playlist?list=PLnXfazh66kVfaJtz0vt9-EwDeOIWe84lT">FrontKon 2023, stage F</a> </li> <li> <a href="https://www.youtube.com/playlist?list=PLnXfazh66kVeJvmz0FnJywBHuXXGqmS1W">FrontKon 2023, stage E</a> </li><!-- .element: class="fragment" --> <li> <a href="https://www.youtube.com/@WebConferencesAmsterdam/videos">perf.now()</a> </li><!-- .element: class="fragment" --> <li> <a href="https://www.youtube.com/@WebConferencesAmsterdam/videos">CSS day</a> </li><!-- .element: class="fragment" --> 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 <br> aneb <br> Nowwwinky note: --- ### Prohlížeče note: --- #### Microsoft Edge 119 _vydán 2. listopadu 2023_ note: - Nic převratného. --- #### Firefox 119 _vydán 24. října 2023_ ```html! <p data-browser="Firefox">My favorite browser is:</p> <p>Your favorite browser is:</p> ``` ```css! p::after { content: " " attr(data-browser, "Unknown"); color: tomato; } ``` note: - FF prolamuje ustrnulý vývoj [funkce `attr()`](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) - [koutPen](https://codepen.io/Kout/pen/BaMpwbB) – 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 <iframe src="https://front-end.social/@matuzo/111331426445420757/embed" width="400" height="250" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe> --- #### Chrome 119 _vydán 25. října 2023_ - relative color syntax (CSS color module 5) ```css! :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](https://codepen.io/Kout/pen/GRzrOKb) --- #### Safari 17.1 _vydáno 28. října 2023_ <li> atribut <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a> </li> <!-- .element: class="fragment" --> <li> prvek <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search"><code>&lt;search&gt;</code></a> </li> <!-- .element: class="fragment" --> ```html! <search role="search">…</search> ``` <!-- .element: class="fragment" --> ```css! @media (update: < none | slow | fast >) { … } ``` <!-- .element: class="fragment" --> 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ě) - ![image.png](https://hackmd.io/_uploads/HkBAWywXa.png) ([zdroj](https://connect.mozilla.org/t5/ideas/support-jpeg-xl/idi-p/18433)) --- ## Zachyceno v síti --- ### [Neseznamy](https://matuzo.at/blog/heres-what-i-didnt-know-about-list-style-type/) ```css! ul { list-style: none; } ``` ```css! ul { list-style-type: '✔️'; } ``` <!-- .element: class="fragment" --> ```css! ul { list-style-type: ''; } ``` <!-- .element: class="fragment" --> 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ů <iframe src="https://mastodon.social/@BlindAndSexy/111275097849041784/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" height="300" allowfullscreen="allowfullscreen"></iframe><script src="https://mastodon.social/embed.js" async="async"></script> [a11y faq](https://hidde.blog/a11y-faq/) <!-- .element: class="fragment" --> note: - vyplňujete `alt`‽ --- ### [Kterak se počítají hodnoty proměnných vlastností](https://moderncss.dev/how-custom-property-values-are-computed/) ```css! html { color: red; } p { color: blue; } .card { --farba: #nefarba; } .card p { color: var(--farba); } ``` note: - [CSS Café se Stephanie Eckles](https://www.youtube.com/watch?v=z8AuhLf2uxQ) - 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`<!-- .element: class="fragment" --><span>,</span><!-- .element: class="fragment" --> `display: contents`<!-- .element: class="fragment" --> <!-- .element: class="fragment" --> 1 – <span>většina prvků</span><!-- .element: class="fragment" --> <!-- .element: class="fragment" --> 2 – `li`<!-- .element: class="fragment" --><span>,</span><!-- .element: class="fragment" -->  `table`<!-- .element: class="fragment" --> <!-- .element: class="fragment" --> 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` --- ![](https://hackmd.io/_uploads/ryHHiwCGT.png) --- ### CodePen --- - [koutPen: Závěrka](https://codepen.io/smashingmag/pen/abPOwRm?editors=0100) <!-- .element: class="fragment" --> - [Divtober](https://dev.to/t/divtober) <!-- .element: class="fragment" --> note: - [zdroj: Smashing Magazine](https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/) - [12. října](https://codepen.io/alvaromontoro/pen/bGrNLBP) --- Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti) --- [product placement](https://webbed-briefs.teemill.com/collection/new)