{F}rontendové nowwwinky

FrontKon 24

Nowwwinky speciál: co je nového u prohlížečů?

note:

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:

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:

Interop

note:

Interop

snímek obrazovky: Interop 2024 – stav

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

zdroje

Baseline

logo Baseline

note:

Baseline

note:

Baseline

šedý štítek s křížkem: omezená dostupnost. Loga čtyř prohlížečů, dva s odškrtnutím, dva s křížky.

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.

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.

note:

Baseline

snímek obrazovky se stránkou MDN

Baseline

snímek obrazovky se stránkou MDN, zvýrazněn štítek Baseline

Baseline

snímek obrazovky se stránkou Can I use

Baseline

snímek obrazovky se stránkou Can I use, zvýrazněn štítek Baseline

Baseline

příklad: var()

Firefox 31
22. července 2014
Chrome 49
2. března 2016
Safari 9.1
21. března 2016
Edge 15
5. dubna 2017

note:

Baseline

příklad: <svg>

Opera 8
19.dubna 2005
Firefox 1.5
29. listopadu 2005
Safari 3
26. října 2007
Chrome 1
11. prosince 2008
IE9
14. března 2011
Edge 12
29. července 2015

note:

Baseline

![snímek obrazovky se stránkou Web platform status](https://hackmd.io/_uploads/ryqRWzo0A.png =800x533)

note:

Verze CSS

CSS1
1996
CSS2, CSS2.1
1998
CSS3
1999 (první návrhy)

note:

Návrh verzování (RFC)

CSS4
vlastnosti a funkce představené cca 2013–2018.
CSS5
vlastnosti a funkce představené cca 2019–2024.
Future/Next
vlastnosti a funkce momentálně ve vývoji nebo navržené pro budoucí verze CSS mimo CSS5.

note:

Nowwwinky: výbor z díla CSSWG a W3C

note:

Dialog

prohlížeče
CH37, FF98, SF15.4
Baseline
štítek Baseline, široce dostupné 2022 widely available
widely available
14. 9. 2024
nowwwinky
3/22, 9/22 (:modal)

note:

zdroje:

Dialog

note:

Cascade layers

prohlížeče
CH99, FF97, SF15.4
Baseline
štítek Baseline, široce dostupné 2022 widely available
widely available
14. 9. 2024
verze CSS
CSS5
nowwwinky
2/22, 3/22, 5/22, 10/22

Cascade layers

note:

zdroje

Subgrid

prohlížeče
CH117, FF71, SF16
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
12. 3. 2025
verze CSS
CSS4
nowwwinky
5/22, 10/22, 9/23

note:

zdroje

Subgrid

Container queries

prohlížeče
CH106, FF110, SF16
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
14. 8. 2025
verze CSS
CSS5
nowwwinky
10/22, 11/22, 3/23 (style queries)

note:

zdroje

Atribut inert

prohlížeče
CH102, FF112, SF15.5
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
11. 10. 2025

note:

zdroje

color(), color-mix()

prohlížeče
CH111, FF113, SF15 (SF16.2 color-mix())
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
9. 11. 2025
verze CSS
CSS5
nowwwinky
3/23, 11/23 (relative colour syntax)

note:

color(), color-mix()

button {
    color: var(--primary);
    background-color: color-mix(in hsl, var(--primary), transparent 60%);
}

note:

zdroje

Responsivní video

prohlížeče
CH120, FF120, SF3.1
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
29. 5. 2026

note:

zdroje

Responsivní video

<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>

note:

align-content pro blokové prvky

prohlížeče
CH120, FF117, SF17.2
Baseline
štítek Baseline, nově dostupné 2024 (newly available)
widely available
11. 6. 2026
verze CSS
CSS4

align-content pro blokové prvky

note:

zdroje

linear() easing function

prohlížeče
CH113, FF112, SF17.2
Baseline
štítek Baseline, nově dostupné 2024 (newly available)
widely available
11. 6. 2026
nowwwinky
11/24

linear() easing function

.animak {
    animation-timing-function: linear(0, 0.25 75%, 1);
}

note:

CSS nesting

prohlížeče
CH120, FF117, SF17.2
Baseline
štítek Baseline, nově dostupné 2024 (newly available)
widely available
11. 6. 2026
verze CSS
CSS5
nowwwinky
4/23, 9/23, 2/24

CSS nesting

.card {
    font-size: 1rem;

    > img {
        border: 4px solid silver;
    }

    @media (width >= 1024px) {
        &.large {
          font-size: 1.25rem;
        }
    }
}

note:

zdroje

:has()

prohlížeče
CH105, FF121, SF15.4
Baseline
štítek Baseline, nově dostupné 2024 (newly available)
widely available
19. 6. 2026
verze CSS
CSS5
nowwwinky
4/22, 9/22, 10/22, 6/24

note:

zdroje

:has()

 body:has(:modal) {
    filter: blur(5px);
}
 label:has(+ input:user-invalid) {
    color: crimson;
}

:has()

:has()

note:

:has()

/* more then 6 cards */
.container:has(> .card:nth-child(7n)) {
  --text: "There is more then 6 cards!"
}
/* element before .active */
.card:has(+ .active) {
  background-color: var(--colorSecondary700);
}
/* has no child */
.container:has(> .card:empty) {
  --text: "There is an empty card!"
}

popover

prohlížeče
CH114, FF125, SF17
Baseline
štítek Baseline, nově dostupné 2024 (newly available)
widely available
16. 10. 2026
nowwwinky
6/23

popover

note:

Matematické fce v CSS

note:

sin(), cos(), tan(), asin(), acos(), atan(), atan2()

prohlížeče
CH111, FF108, SF15.4
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
13. 9. 2025
verze CSS
CSS5
nowwwinky
5/23, 6/23

note:

zdroje

sin(), cos(), tan(), asin(), acos(), atan(), atan2()

pow(), sqrt(), hypot(), log(), exp()

prohlížeče
CH120, FF118, SF15.4
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
7. 6. 2026
verze CSS
CSS5

round(), mod(), rem()

prohlížeče
CH125, FF118, SF15.4
Baseline
štítek Baseline, nově dostupné 2023 (newly available)
widely available
17. 12. 2026
verze CSS
CSS5

abs(), sign()

prohlížeče
CH??, FF118, SF15.4
Baseline
štítek Baseline, omezená dostupnost limited availability
verze CSS
CSS5

note:

Hm, a co z toho? 🤔

  1. HTML a CSS přebírají kontrolu nad tím, co jsme si navykli suplovat pomocí JS.
  2. Nepřemýšlejme o nowwwinkách jednotlivě, v kombinaci je síla.
  3. CSS is the new JS 😉

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. HTML a CSS přebírají kontrolu nad tím, co jsme si navykli suplovat pomocí JS.
  2. Nepřemýšlejme o nowwwinkách jednotlivě, v kombinaci je síla.
  3. CSS je sexy ❤️ HTML taky 🤓

note:

Díky

Slídy co nevidět k dispozici, případně se ozvěte na kout.kt@gmail.com

note:

note:

Dodatky

Matematické funkce

1. várka

sin()
vrací sinus čísla
cos()
vrací kosinus čísla
tan()
vrací tangens čísla
asin()
vrací arkussinus čísla
acos()
vrací arkuskosinus čísla
atan()
vrací arkustangens čísla
atan2()
vrací úhel mezi kladnou osou x a body [B,A], které jsou arugumenty funkce

2. várka

pow()
vrací základ umocněný na mocninu čísla
sqrt()
vrací druhou odmocninu čísla
hypot()
vrací druhou odmocninu součtu čtverců argumentů
log()
vrací logaritmus čísla
exp()
vrací e umocněné na mocninu čísla

3. várka

round()
vrací zaokrouhlené číslo na základě strategie zaokrouhlení.
mod()
vrací zbytek po dělení jednoho čísla druhým, vždy přebírá znaménko dělitele.
rem()
vrací zbytek po dělení jednoho čísla druhým, vždy přebírá znaménko dělence

note:

4. várka

abs()
vrací absolutní hodnotu čísla
sign()
vrací znaménko čísla

KoutPeny