--- title: FrontKon ’24 (nesestříhaný) tags: frontendisti layout: tall controls: false --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # Nowwwinky speciál: co je nového u prohlížečů? note: - frontendové nowwwinky otvírají naše pravidelné měsíční srazy, a to jak v Praze, tak v Brně - jsou k vidění na [YT kanále Frontendisti](https://www.youtube.com/results?search_query=frontendisti+frontendov%C3%A9+nowwwinky) --- ### Prohlížeče – aktuální stav Firefox 131 : vydán 1. října 2024 Chrome 130 : vydán 9. října 2024 Safari 18 : vydáno 21. září 2024 note: - někdy je úroda chudší, jindy bohatší, ale celkově zažíváme tučná léta --- ## Osnova 1. nowwwinky: o co jde 2. Baseline: podle čeho se orientovat 3. výběr nowwwinek: co lze použít už nyní --- ## Osnova 1. nowwwinky: o co jde ✅ 2. Baseline: podle čeho se orientovat 3. výběr nowwwinek: co lze použít už nyní note: - většinou není čas se jim věnovat do hloubky - na to nebude čas ani dnes - podíváme se nowwwinky, které se do prohlížečů dostaly v poslední době - zejména CSS, téměř žádný JS (změňte případně lokál) - ale hlavně na to, jak se v té záplavě vyznat => když CanIUse nestačí --- ## Interop note: - všechno to začalo iniciativou Interop: výrobci a hlavně vývojáři prohlížečů u jednoho stolu --- #### Interop [![snímek obrazovky: Interop 2024 – stav](https://hackmd.io/_uploads/BJwPsQiRC.png)](https://wpt.fyi/interop-2024?stable) note: > Každoroční srovnávací test, při kterém se všichni zástupci hlavních prohlížečů sejdou, aby odstranili největší problémy s interoperabilitou na webu. [![snímek obrazovky: web platform tests](https://hackmd.io/_uploads/SJNZqXiCC.png)](https://wpt.fyi/results/) <!-- ![snímek obrazovky: web platform tests](/img/2024/frontkon/interop.png) --> zdroje - [Interop 2022: browsers working together to improve the web for developers](https://web.dev/blog/interop-2022) --- ## [Baseline](https://web.dev/baseline) ![logo Baseline](https://hackmd.io/_uploads/HyWIP-oAC.png) <!--![logo Baseline](/img/2024/frontkon/baseline.png)--> note: - norma, která shrnuje podporu **vybraných** prohlížečů. - nezbaví nás testování přístupnosti, použitelnosti, výkonu nebo bezpečnosti. - neřeší, zda funkce funguje - na starších zařízeních a verzích prohlížečů - s asistenčními technologiemi, jako jsou čtečky obrazovky - v prohlížečích, které nejsou zahrnuty v definici Baseline - tip od Miriam Suzanne - CanIUse výchoze zobrazuje % všech uživatelů, přičemž 3 % uživatelů je mimo sledování. Tj. nikdy se nedostanete nad 97% podporu. - nastavte si _All tracked users_ (všichni sledovaní) - případně zapojte filtry a vylučte okrajové prohlížeče, např.: pod 0,5 % uživatelů - samozřejmě **záleží™** na situaci vašeho webu… --- #### Baseline - Apple Safari (iOS, macOS) <!-- .element: class="fragment" --> - Google Chrome (Android, desktop) <!-- .element: class="fragment" --> - Mozilla Firefox (Android, desktop) <!-- .element: class="fragment" --> - Microsoft Edge (desktop) <!-- .element: class="fragment" --> note: - asi vás nepřeqapí, které to jsou - mě přeqapuje Edge, zřejmě úlitba Microsoftu… --- #### Baseline ![šedý štítek s křížkem: omezená dostupnost. Loga čtyř prohlížečů, dva s odškrtnutím, dva s křížky.](https://hackmd.io/_uploads/HJJdwZsRR.png) <!-- .element: class="fragment" --> ![modrý štítek s odškrtnutím: Baseline 2022, nově dostupné. Loga čtyř prohlížečů, všechny s odškrtnutím.Funkce uvedené jako nově dostupné fungují alespoň v nejnovější stabilní verzi každého z prohlížečů Baseline, ale nemusí fungovat ve starších prohlížečích a zařízeních.](https://hackmd.io/_uploads/SJvawWjCC.png) <!-- .element: class="fragment" --> ![zelený štítek s odškrtnutím: Baseline, široce dostupné. Loga čtyř prohlížečů, všechny s odškrtnutím.Funkce uvedené jako široce dostupné mají konzistentní historii podpory v každém z prohlížečů Baseline po dobu nejméně 2,5 let.](https://hackmd.io/_uploads/BJp0v-jCA.png) <!-- .element: class="fragment" --> note: - šedý: funkce s omezenou dostupností: zatím nejsou k dispozici ve všech prohlížečích - modrý: funkce nově dostupné: fungují alespoň v nejnovější stabilní verzi každého ze základních prohlížečů - zelený: široce dostupné funkce: souvisle podporované v každém ze základních prohlížečů po dobu přinejmenším 2,5 roku - nyní to znamená od dubna 2022 - tyto štítky na MDN i CanIUse.com --- #### Baseline ![snímek obrazovky se stránkou MDN](https://hackmd.io/_uploads/SkVnP6BC0.png) --- #### Baseline ![snímek obrazovky se stránkou MDN, zvýrazněn štítek Baseline](https://hackmd.io/_uploads/H1YmuaHAA.png) --- #### Baseline ![snímek obrazovky se stránkou Can I use](https://hackmd.io/_uploads/Bys6wpSAC.png) --- #### Baseline ![snímek obrazovky se stránkou Can I use, zvýrazněn štítek Baseline](https://hackmd.io/_uploads/HyKU_arAA.png) --- #### Baseline příklad: [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) Firefox 31 :  22. července 2014 Chrome 49 :  2. března 2016 Safari 9.1 :  21. března 2016 Edge 15 :  5. dubna 2017 <!-- .element: class="tk-props fragment" --> note: - Baseline 2017 (podporou Edge 15) [„nově dostupné“](https://web.dev/series/baseline-newly-available) => pouze v nejnovějších verzích! - ale „široce dostupné“ až 10/2019 => 30 měsíců; lze předpokládat, že nowwwinku lze používat bez větších obav na produkčních webech - !!!zdá se to moc? podívejme, jak by tento přehled vypadalnpro něco dnes tak běžného, jako je [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)…(a další) - IE6 byl vyvíjen 6 let a další 4 roky se čekalo na jeho konec --- #### Baseline příklad: [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) Opera 8 : 19.dubna 2005 Firefox 1.5 :  29. listopadu 2005 Safari 3 :  26. října 2007 <!-- .element: class="tk-props fragment" --> Chrome 1 :  11. prosince 2008 IE9 :  14. března 2011 Edge 12 :  29. července 2015 <!-- .element: class="tk-props fragment" --> note: - poprvé jsem si obrázek v kódu napsal v roce 2007 v PSPadu a zobrazil v Opeře a tím to zhaslo na další 4 roky - podpora v IE a Edge ještě nebyla 100% (nefungovaly animace, správných rozměrů se dosahovalo různými oklikami…), čili plná podpora až přechodem na Blink (15. ledna 2020) - na MDN štítek Baseline najdete u konkrétních funkcí a vlastností - pokud štítek nevidíte, znamená to, že funkce/vlastnost má plnou podporu ve všech prohlížečích (CSS3 a starší) **nebo** má naopak pouze částečnou podporu => není to 100% - vždycky vycházejte ze svých dat: s jakými prohlížeči k vám uživatelé chodí a nakolik je nowwwinka klíčová pro použitelnost vašeho webu - kontrolujte dvakrát pečlivěji, pokud jsou ve hře peníze --- #### Baseline [![snímek obrazovky se stránkou Web platform status](https://hackmd.io/_uploads/ryqRWzo0A.png =800x533)](https://webstatus.dev/?q=baseline_date%3A2023-01-01..2023-12-31&columns=name%2Cbaseline_status%2Cstable_chrome%2Cstable_firefox%2Cstable_safari&column_options=baseline_status_low_date%2Cbaseline_status_high_date) note: - status: seznam všech nowwwinek, lze filtrovat, vidíte datum široké dostupnosti a pokrytí v jednotlivých prohlížečích - rozpracováno, pokrýv nowwwinky od ledna 23, do konce roku chtějí doplnit předchozí - přehled přehled nowwwinek spadajících pod Baseline 2023, resp. 2024 – HTML, CSS i JS - zdroje: - [Web platform status](https://webstatus.dev/?q=baseline_date%3A2023-01-01..2023-12-31&columns=name%2Cbaseline_status%2Cstable_chrome%2Cstable_firefox%2Cstable_safari&column_options=baseline_status_low_date%2Cbaseline_status_high_date) - [RUM archive](https://rumarchive.com/insights/#baseline) - [přehledné shrnutí Baseline 2023 od Rachel Andrew](https://web.dev/blog/baseline2023) - [Baseline 2023](https://web.dev/baseline/2023) - [Baseline 2024](https://web.dev/baseline/2024) --- ## Verze CSS CSS1 :  1996 CSS2, CSS2.1 :  1998 CSS3 :  1999 (první návrhy) note: - CSS1 nyní neplatná, ale položila základy jazyka a princip oddělení formy od obsahu - CSS3 slouží jako referenční bod pro návrh dalšího verzování - vše co přišlo poté spadá pod obecné označní „moderní CSS“ --- ### Návrh verzování (RFC) CSS4 : vlastnosti a funkce představené cca 2013–2018. <!-- .element: class="fragment" --> CSS5 : vlastnosti a funkce představené cca 2019–2024. <!-- .element: class="fragment" --> Future/Next : vlastnosti a funkce momentálně ve vývoji nebo navržené pro budoucí verze CSS mimo CSS5. <!-- .element: class="fragment" --> note: - jak patrno, zavádí se zpětně, první úvahy již před 2 lety - RFC (request for comments) – máte-li připomínky, [ozvěte se!](https://github.com/CSS-Next/css-next/discussions/92) - autoři si od roztřídění slibují jasnější rozlišení toho, co by měli vývojáři ovládat a znát - zpřehlední se tak vzdělávání i požadavky na trhu práce - přijetí nowwwinek bude snazší, bude patrné, které jsou hudbou budoucnosti a které jsou nezbytné - marketing, vzbudit rozruch kolem CSS, které má obecně špatnou pověst - [It’s Time To Talk About “CSS5”](https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/) - souvislost/návaznost Baseline×Interops - výzva k součinnosti (Nehlasuješ ve volbách? Tak si nestěžuj!) - důvody proč to znovu zavést - rozdíl oproti Baseline (neřeší implementaci do prohlížečů, nýbrž sleduje vývoj CSS jako jazyka) --- ## Nowwwinky: výbor z díla CSSWG a W3C note: - CSSWG splácí dluhy z minulosti - nowwwé CSS přebírá odpovědnost za HTML a JS - HTML: díky :has() nemusím tolik sahat na HTML (přidávat třídy a měnit strukturu), abych si sáhl na věci - JS: interakce (intersectionObserver => scroll driven animations, snap) - nowwwinky berte jako soubor technik, jejichž kombinací se možnosti nesčítají, nýbrž násobí aneb kombinujte! - [always great grid](https://codepen.io/argyleink/pen/RwdRaVg) - kombinace nowwwinek přináší dechberoucí možnosti - `:has()` + proměnné vlastnosti! (na základě :has změním hodnotu proměnné…) --- ### [Dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) prohlížeče : CH37, FF98, **SF15.4** Baseline : ![štítek Baseline, široce dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =20%x) 2022 widely available widely available :  14. 9. 2024 nowwwinky : 3/22, 9/22 (`:modal`) <!-- .element: class="tk-props" --> note: zdroje: - [Tomáš Litera, Dialog element - nevymýšlej znovu modal!](https://www.youtube.com/watch?v=tTkZnVJzLgM) - [Pop n' Lock Dialog Mini Web Machine](https://www.youtube.com/watch?v=f3N-6MzK8Z0) --- #### Dialog <iframe height="600" style="width: 100%;" scrolling="no" title="Dialog: ukázka" src="https://codepen.io/Kout/embed/Poegmaz?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/Poegmaz"> Dialog: ukázka</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> <!-- .element: class="c-text-xs" --> note: - odesláním se dialog zavře a vyvolá se událost submit, aniž by se odesílala data nebo se formulář vymazal. --- ### [Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) prohlížeče : CH99, FF97, **SF15.4** Baseline : ![štítek Baseline, široce dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =20%x) 2022 widely available widely available :  14. 9. 2024 verze CSS : CSS5 nowwwinky : 2/22, 3/22, 5/22, 10/22 <!-- .element: class="tk-props" --> --- #### Cascade layers <iframe height="600" style="width: 100%;" scrolling="no" title="Utility classes with Cascade Layers" src="https://codepen.io/Kout/embed/OJKXMeY?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/OJKXMeY"> Utility classes with Cascade Layers</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: zdroje - [Ondřej Žára, CSS Cascade Layers (EN)](https://www.youtube.com/watch?v=gt4lAOHmQOY) – Webexpo 2022 - [CSS3 Tipy a Triky (NCZ), 19. dubna 2022](http://css.nothrem.cz/kaskadove-vrstvy/) - [Vzhůru dolů 24. listopadu 2022](https://www.vzhurudolu.cz/prirucka/css-cascade-layers) - [CSS Cascade Layers: budou vrstvy revolucí organizace stylů?](https://www.vzhurudolu.cz/prirucka/css-cascade-layers) --- ### [Subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) prohlížeče : CH117, FF71, **SF16** Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  12. 3. 2025 verze CSS : CSS4 nowwwinky : 5/22, 10/22, 9/23 <!-- .element: class="tk-props" --> note: - nebudete ho pořebovat pořád, ale velmi užitečný, když na to přijde zdroje - Manuel Matuzović, [#100DaysOfMoreOrLessModernCSS](https://matuzo.at/blog/2022/100-days-of-more-or-less-modern-css): - [7. den: subgrid](https://matuzo.at/blog/2022/100daysof-day7) --- #### Subgrid <iframe height="600" style="width: 100%;" scrolling="no" title="Subgrid: prostý příklad s definition list" src="https://codepen.io/Kout/embed/bGXepBd?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/bGXepBd"> Subgrid: prostý příklad s definition list</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ### [Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) prohlížeče : CH106, **FF110**, SF16 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  14. 8. 2025 verze CSS : CSS5 nowwwinky : 10/22, 11/22, 3/23 (style queries) <!-- .element: class="tk-props" --> note: - přesněji: size container queries, další v pořadí jsou style container queries - na složitějších projektech, kde tutéž komponentu zobrazujete v různých kontextech bude velmi užitečný zdroje - [Kateřina N. Voláková, Container Queries vs. Media Queries](https://www.youtube.com/watch?v=Tmv92XFVquA) - [Style Queries v CSS: zeptejte se na styl prvku](https://www.vzhurudolu.cz/prirucka/style-queries) --- ### Atribut `inert` prohlížeče : CH102, **FF112**, SF15.5 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  11. 10. 2025 <!-- .element: class="tk-props" --> note: - inertní = netečný, prvek (a jeho potomstvo) jsou zbaveny veškeré interakce - pozor, nutno dostylovat, jak se tento prvek má zobrazit, vzhled zůstává zachován - často pro prvky mimo obrazovku - užitečné při zušlechťování přístupnosti vašeho webu, inertní, tj. netečné prvky se vyjmou ze stromu přístupnosti zdroje - [web.dev](https://web.dev/articles/inert) --- ### [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color), [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) prohlížeče : CH111, **FF113**, SF15 (SF16.2 `color-mix()`) Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  9. 11. 2025 verze CSS : CSS5 nowwwinky : 3/23, 11/23 (relative colour syntax) <!-- .element: class="tk-props" --> note: - pomocí fce `color()` nastavíme barevný prostor - fce `color-mix()` nepřeqapivě míchá barvy --- #### `color()`, `color-mix()` ```css button { color: var(--primary); background-color: color-mix(in hsl, var(--primary), transparent 60%); } ``` <!-- .element: class="c-text-xs" --> <iframe height="400" style="width: 100%;" scrolling="no" title="Day 95: the color-mix() function #100DaysOfMoreOrLessModernCSS" src="https://codepen.io/matuzo/embed/wvxRKXY?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/matuzo/pen/wvxRKXY"> Day 95: the color-mix() function #100DaysOfMoreOrLessModernCSS</a> by Manuel Matuzovic (<a href="https://codepen.io/matuzo">@matuzo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: - pozor na zvolený barevný prostor, dávají různé výsledky - výchozím prostorem je `oklab`, dává konzistentí výsledky - `color-mix()` si poradí i s `currentColor`! zdroje - [Adam Argyle, HD Gradients](https://gradient.style/#type=linear&space=oklch&interpolation=longer&linear_named_angle=to+right&linear_angle=90&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22color%28display-p3+25%25+25%25+100%25%29%22%2C%22auto%22%3A0%2C%22position1%22%3A0%2C%22position2%22%3A0%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22auto%22%3A25%2C%22percentage%22%3A25%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22color%28display-p3+100%25+85%25+30%25%29%22%2C%22auto%22%3A50%2C%22position1%22%3A50%2C%22position2%22%3A50%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22percentage%22%3A75%2C%22auto%22%3A75%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2880%25+0.3+73%29%22%2C%22position1%22%3A100%2C%22position2%22%3A100%2C%22auto%22%3A100%7D) --- ### [Responsivní video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#media_attibutes) prohlížeče : **CH120**, FF120, SF3.1 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  29. 5. 2026 <!-- .element: class="tk-props" --> note: zdroje - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video) --- #### Responsivní video ```html <video controls> <source src="peformance-large.webm" media="(min-width: 800px)" /> <source src="peformance.webm" /> <p>Bohužel, v tomhle prohlížeči video nepřehraješ. Ale můžeš si ho <a href="performance-large.webm" download="Máchalova hustá přednáška" >stáhnout</a>. </p> </video> ``` <!-- .element: class="c-text-xs" --> note: - lze použít okamžitě, prohlížeče co si neporadí s media query, sahnou po dalším prvku `<source>`, čili uživatel dostane týž zážitek jako dosud --- ### align-content pro blokové prvky prohlížeče : CH120, FF117, **SF17.2** Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2024 (newly available) widely available :  11. 6. 2026 verze CSS : CSS4 <!-- .element: class="tk-props" --> --- #### align-content pro blokové prvky <iframe height="600" style="width: 100%;" scrolling="no" title="Vlastnost align-content pro display block, flex a grid" src="https://codepen.io/Kout/embed/WNVxpNa/26df722a43dba59033749b3716f3bb77?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/WNVxpNa/26df722a43dba59033749b3716f3bb77"> Vlastnost align-content pro display block, flex a grid</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: zdroje - [MDN playground](https://developer.mozilla.org/en-US/play) --- ### `linear()` easing function prohlížeče : CH113, FF112, **SF17.2** Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2024 (newly available) widely available :  11. 6. 2026 nowwwinky : 11/24 <!-- .element: class="tk-props" --> --- #### `linear()` easing function ```css .animak { animation-timing-function: linear(0, 0.25 75%, 1); } ``` <!-- .element: class="c-text-xs" --> note: - animační funkce s hladkým průběhem zatím v CSS nelze dosáhnout - [GSAP](https://gsap.com/) zatím nenahradí, ale trend je zřejmý - `linear()` nahrazuje hladkou křivku rovnými úsečkami - princip 96úhelník ~ kruh --- ### [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector) prohlížeče : CH120, FF117, **SF17.2** Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2024 (newly available) widely available :  11. 6. 2026 verze CSS : CSS5 nowwwinky : 4/23, 9/23, 2/24 <!-- .element: class="tk-props" --> --- #### CSS nesting ```css .card { font-size: 1rem; > img { border: 4px solid silver; } @media (width >= 1024px) { &.large { font-size: 1.25rem; } } } ``` <!-- .element: class="c-text-xs" --> note: zdroje - [Adam Argyle, CSS Nesting](https://developer.chrome.com/docs/css-ui/css-nesting) --- ### [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) prohlížeče : CH105, **FF121**, SF15.4 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2024 (newly available) widely available :  19. 6. 2026 verze CSS : CSS5 nowwwinky : 4/22, 9/22, 10/22, 6/24 <!-- .element: class="tk-props" --> note: - ze začátku rozpaky a pak se roztrhl pytel zdroje - [Petr Koláček - CSS `:has` power](https://www.youtube.com/watch?v=n23zomcLCPg) - [Jhey Tompkins, :has(): the family selector](https://developer.chrome.com/blog/has-m105/#how-to-use-has) - [Jen Simmons, Using :has() as a CSS Parent Selector and much more](https://webkit.org/blog/13096/css-has-pseudo-class/) - [Manuel Matuzović, #100DaysOfMoreOrLessModernCSS](https://matuzo.at/blog/2022/100-days-of-more-or-less-modern-css) - [6. den: the :has() pseudo-class](https://matuzo.at/blog/2022/100daysof-day6) - [8. den: nesting :has](https://matuzo.at/blog/2022/100daysof-day8) - [16. den: the specificity of :has()](https://matuzo.at/blog/2022/100daysof-day16) - [26. den: using combinators in :has()](https://matuzo.at/blog/2022/100daysof-day26) - [36. den: :has() and pseudo-elements](https://matuzo.at/blog/2022/100daysof-day36) - [50. den: :has(:not()) vs. :not(:has())](https://matuzo.at/blog/2022/100daysof-day50) - [91. den: a previous sibling selector with :has()](https://matuzo.at/blog/2022/100daysof-day91) --- #### `:has()` ```css body:has(:modal) { filter: blur(5px); } ``` <!-- .element: class="c-text-sm" --> ```css label:has(+ input:user-invalid) { color: crimson; } ``` <!-- .element: class="c-text-sm fragment" --> --- #### `:has()` <iframe height="600" style="width: 100%;" scrolling="no" title="Použití :has() ve formulářích" src="https://codepen.io/Kout/embed/wvVWpVL?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/wvVWpVL"> Použití :has() ve formulářích</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- #### `:has()` <iframe height="600" style="width: 100%;" scrolling="no" title=":has advanced examples" src="https://codepen.io/kblh/embed/PoLyewN?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/kblh/pen/PoLyewN"> :has advanced examples</a> by Petr Kolacek (<a href="https://codepen.io/kblh">@kblh</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: - [KoutPen](https://codepen.io/kblh/pen/PoLyewN) --- #### `:has()` ```css /* more then 6 cards */ .container:has(> .card:nth-child(7n)) { --text: "There is more then 6 cards!" } ``` <!-- .element: class="c-text-sm" --> ```css /* element before .active */ .card:has(+ .active) { background-color: var(--colorSecondary700); } ``` <!-- .element: class="c-text-sm fragment" --> ```css /* has no child */ .container:has(> .card:empty) { --text: "There is an empty card!" } ``` <!-- .element: class="c-text-sm fragment" --> --- ### `popover` prohlížeče : CH114, **FF125**, SF17 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2024 (newly available) widely available :  16. 10. 2026 nowwwinky : 6/23 <!-- .element: class="tk-props" --> --- #### `popover` <iframe height="600" style="width: 100%;" scrolling="no" title="Simple default popover" src="https://codepen.io/Kout/embed/oNKbKwE?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/oNKbKwE"> Simple default popover</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: - GitHub implementoval jako progressive enhancement, ušetřili tím 1000 řádek kódu - ![popover na GitHubu](https://hackmd.io/_uploads/Hyscc3SC0.png) - první krok mnohem širšího záměru, dalším krokem je anchor positioning --- ### [Matematické fce v CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions) note: - ve 4 várkách: --- #### `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()` prohlížeče : **CH111**, FF108, SF15.4 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  13. 9. 2025 verze CSS : CSS5 nowwwinky : 5/23, 6/23 <!-- .element: class="tk-props" --> note: zdroje - [Bramus, Trigonometric functions in CSS ](https://web.dev/articles/css-trig-functions) - [Ana Tudor, Möbius strip with CSS trigonometric functions](https://www.youtube.com/watch?v=QEuRuECyyrA) - [KoutPen](https://codepen.io/thebabydino/pen/wvybyMo) - [Una Kravets, Kruhové menu](https://una.im/radial-menu/) - [KoutPen](https://codepen.io/una/pen/VwGRpXN) --- #### `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()` <iframe height="600" style="width: 100%;" scrolling="no" title="Radial Menu with CSS trig functions" src="https://codepen.io/una/embed/VwGRpXN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/una/pen/VwGRpXN"> Radial Menu with CSS trig functions</a> by Una Kravets (<a href="https://codepen.io/una">@una</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- #### `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()` prohlížeče : **CH120**, FF118, SF15.4 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  7. 6. 2026 verze CSS : CSS5 <!-- .element: class="tk-props" --> --- #### `round()`, `mod()`, `rem()` prohlížeče : **CH125**, FF118, SF15.4 Baseline : ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 2023 (newly available) widely available :  17. 12. 2026 verze CSS : CSS5 <!-- .element: class="tk-props" --> --- #### `abs()`, `sign()` prohlížeče : **CH??**, FF118, SF15.4 Baseline : ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =20%x) limited availability verze CSS : CSS5 <!-- .element: class="tk-props" --> note: - Chrome na štíru s matematikou? --- # Hm, a co z toho? 🤔 1. S dávkou obezřetnosti lze mnohé nowwwinky používat.<!-- .element: class="c-text-sm fragment" --> 2. HTML a CSS přebírají kontrolu nad tím, co jsme si navykli suplovat pomocí JS.<!-- .element: class="c-text-sm fragment" --> 3. Nepřemýšlejme o nowwwinkách jednotlivě, v kombinaci je síla.<!-- .element: class="c-text-sm fragment" --> 4. CSS is the new JS<!-- .element: class="c-text-sm fragment" --> <span>😉</span><!-- .element: class="c-text-sm fragment" --> note: 1. to je dobře, JS má řešit aplikační logiku atp. - nativní řešení je výhodnější obstará všecko to, na co se zapomíná (UX, a11y) – ne 100%! 2. kombinací se potenciál násobí 3. míněno jako (staro)nová sexy věc --- # Hm, a co z toho? 🤔 1. S dávkou obezřetnosti lze mnohé nowwwinky používat.<!-- .element: class="c-text-sm fragment" --> 2. HTML a CSS přebírají kontrolu nad tím, co jsme si navykli suplovat pomocí JS.<!-- .element: class="c-text-sm fragment" --> 3. Nepřemýšlejme o nowwwinkách jednotlivě, v kombinaci je síla.<!-- .element: class="c-text-sm fragment" --> 4. CSS is the new JS<!-- .element: class="c-text-sm fragment" --> <span>😉</span><!-- .element: class="c-text-sm fragment" --> note: 1. za posledního 2,5 roku vyšlo 18 verzí SF, 31 verzí CH a 33 verzí FF - věci z Baseline 2022 (i 2023) už můžou být bezpečně použitelné 2. to je dobře, JS má řešit aplikační logiku atp. - nativní řešení je výhodnější obstará všecko to, na co se zapomíná (UX, a11y) – ne 100%! 3. kombinací se potenciál násobí 4. míněno jako (staro)nová sexy věc --- # Hm, a co z toho? 🤔 1. S dávkou obezřetnosti lze mnohé nowwwinky používat.<!-- .element: class="c-text-sm" --> 2. HTML a CSS přebírají kontrolu nad tím, co jsme si navykli suplovat pomocí JS.<!-- .element: class="c-text-sm" --> 3. Nepřemýšlejme o nowwwinkách jednotlivě, v kombinaci je síla.<!-- .element: class="c-text-sm" --> 4. CSS je sexy ❤️<!-- .element: class="c-text-sm" --> <span>HTML taky 🤓</span><!-- .element: class="c-text-sm fragment" --> note: - Co je lepší než sex? Dva sexy. --- # Díky Slídy co nevidět k dispozici, případně se ozvěte na kout.tk@gmail.com note: - nesestříhaná verze - na viděnou 13/11 na srazu Frontendistů --- note: - konec prezentace --- ## Dodatky --- ### Matematické funkce #### 1. várka [`sin()`](https://developer.mozilla.org//en-US/docs/Web/CSS/sin) : vrací sinus čísla [`cos()`](https://developer.mozilla.org//en-US/docs/Web/CSS/cos) : vrací kosinus čísla [`tan()`](https://developer.mozilla.org//en-US/docs/Web/CSS/tan) : vrací tangens čísla [`asin()`](https://developer.mozilla.org//en-US/docs/Web/CSS/asin) : vrací arkussinus čísla [`acos()`](https://developer.mozilla.org//en-US/docs/Web/CSS/acos) : vrací arkuskosinus čísla [`atan()`](https://developer.mozilla.org//en-US/docs/Web/CSS/atan) : vrací arkustangens čísla [`atan2()`](https://developer.mozilla.org//en-US/docs/Web/CSS/atan2) : vrací úhel mezi kladnou osou x a body [B,A], které jsou arugumenty funkce <!-- .element: class="c-text-xs" --> --- #### 2. várka [`pow()`](https://developer.mozilla.org//en-US/docs/Web/CSS/pow) : vrací základ umocněný na mocninu čísla [`sqrt()`](https://developer.mozilla.org//en-US/docs/Web/CSS/sqrt) : vrací druhou odmocninu čísla [`hypot()`](https://developer.mozilla.org//en-US/docs/Web/CSS/hypot) : vrací druhou odmocninu součtu čtverců argumentů [`log()`](https://developer.mozilla.org//en-US/docs/Web/CSS/log) : vrací logaritmus čísla [`exp()`](https://developer.mozilla.org//en-US/docs/Web/CSS/exp) : vrací `e` umocněné na mocninu čísla <!-- .element: class="c-text-sm" --> --- #### 3. várka [`round()`](https://developer.mozilla.org//en-US/docs/Web/CSS/round) : vrací zaokrouhlené číslo na základě strategie zaokrouhlení. [`mod()`](https://developer.mozilla.org//en-US/docs/Web/CSS/mod) : vrací zbytek po dělení jednoho čísla druhým, vždy přebírá znaménko **dělitele**. [`rem()`](https://developer.mozilla.org//en-US/docs/Web/CSS/rem) : vrací zbytek po dělení jednoho čísla druhým, vždy přebírá znaménko **dělence** <!-- .element: class="c-text-sm" --> note: - `round()` - 3 parametry: směr zaokrouhlení, hodnota k zaokrouhlení, zaokrouhlovací interval - [Ana Tudor, sizing box for border pattern](https://codepen.io/thebabydino/pen/yLWvKyK) - zaokrouhlí velikost boxu tak, aby obsahoval celočíselný počet opakování vzoru na pozadí plus polovinu velikosti vzoru --- #### 4. várka [`abs()`](https://developer.mozilla.org//en-US/docs/Web/CSS/abs) : vrací absolutní hodnotu čísla [`sign()`](https://developer.mozilla.org//en-US/docs/Web/CSS/sign) : vrací znaménko čísla <!-- .element: class="c-text-sm" --> --- ### KoutPeny - [dialog (vč. `@layer`, `color-mix()`)](https://codepen.io/Kout/pen/NWQrNwN) - [cascade layers](https://codepen.io/Kout/pen/OJKXMeY) - [subgrid](https://codepen.io/Kout/pen/bGXepBd) - [pokročilé příklady na `:has()`](https://codepen.io/kblh/pen/PoLyewN) - [Použití :has() ve formulářích](https://codepen.io/Kout/pen/wvVWpVL) - [jednoduchý popover](https://codepen.io/Kout/pen/oNKbKwE) - [animace s využitím goniometrických funkcí](https://codepen.io/thebabydino/pen/wvybyMo) - [kruhové menu pomocí goniometrických funkcí](https://codepen.io/una/pen/VwGRpXN)