Adam Kudrna — 30. 9. 2022 — OSTRAVA!!!
Nové CSS vlastnosti
pro rok 2022 a jak je využít
Update Days: Frontend 2022

https://github.com/react-ui-org/react-ui
https://github.com/lmc-eu/spirit-design-system

margin-block-start
margin-inline-end
margin-block-end
margin-inline-start
margin-block
margin-inline
padding-block-start
padding-inline-end
padding-block-end
padding-inline-start
padding-block
padding-inline
inline-size
min-inline-size
max-inline-size
block-size
min-block-size
max-block-size
border-block-start-
width
border-block-start-
style
border-block-start-
color
border-inline-end-
width
border-inline-end-
style
border-inline-end-
color
border-block-end-
width
border-block-end-
style
border-block-end-
color
border-inline-start-
width
border-inline-start-
style
border-inline-start-
color
border-block-width
border-block-style
border-block-color
border-inline-width
border-inline-style
border-inline-color
border-block-start
border-inline-end
border-block-end
border-inline-start
border-start-start-
radius
border-start-end-
radius
border-end-start-
radius
border-end-end-
radius
inset-block-start
inset-inline-end
inset-block-end
inset-inline-start
inset-block
inset-inline
aspect-ratio
column-gap
row-gap
gap
:is()
:has()
:where()
:any-link
position: sticky
overscroll-behavior
scroll-behavior
scroll-snap-align
scroll-snap-type
scroll-margin-top
scroll-margin-right
scroll-margin-bottom
scroll-margin-left
scroll-margin
scroll-margin-
inline-start
min()
max()
clamp()
@layer
@container
container-type
container-name
container
svw
svi
svh
svb
lvw
lvi
lvh
lvb
dvw
dvi
dvh
dvb
accent-color
color-scheme
forced-colors

https://artincontext.org/prehistoric-art/

CSS Is Becoming 🔥
New CSS Features In 2022
CSS in 2022

!!!
březen 2022
Safari 15.4

https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

https://schonmagazine.com/happy-widow-by-rasmus-mogensen/

Nové CSS vlastnosti pro rok 2022
1. Layout
2. Selektory
3. Matematické funkce
4. Interakce
5. What’s Next

1. Layout

Logické vlastnosti

https://spectrum.adobe.com/page/bi-directionality/

https://spectrum.adobe.com/page/bi-directionality/

https://spectrum.adobe.com/page/bi-directionality/
padding-top
padding-right
padding-bottom
padding-left
margin-right

margin-top
margin-bottom
margin-left
margin-rigt
padding-left
padding-rigt
padding-bottom
padding-top
LTR, TTB

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end
padding-inline-start
padding-inline-end
padding-block-end
padding-block-start
LTR, TTB

margin-block-start
margin-block-end
margin-inline-end
margin-inline-start
padding-inline-end
padding-inline-start
padding-block-end
padding-block-start
RTL, TTB

Live coding time 🎉

aspect-ratio

aspect-ratio: 1;

Live coding time 🎉

gap

:not(:last-child) {
margin-right: 1rem;
}

:not(:last-child) {
margin-right: 1rem;
}

.item {
padding: 0.5rem;
}

.wrapper {
margin: -0.5rem;
}

gap: 1rem;

Live coding time 🎉

2. Selektory

:is(), :where()

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

:has()

https://www.implenton.com/2022-08-21-css-has-pseudo-class-revolution/
"The hardest part of :has will be opening our minds to its
possibilities. We’ve become so used to the limits imposed on us by
not having a parent selector. Now, we have to break those habits."

Live coding time 🎉

3. Matematické funkce

min()
max()
clamp()

.card {
width: min(33%, 200px);
}

.sidebar {
width: clamp(200px, 10vw, 300px);
}

.headline {
font-size: clamp(1.5rem, 2.5vw, 4rem);
}

Live coding time 🎉

4. Interakce

scroll-behavior: smooth;

overscroll-behavior: contain;

position: sticky;

scroll-snap-type
scroll-padding
scroll-margin
scroll-snap-align

Live coding time 🎉

5. What's Next 🔥

https://www.bram.us/2021/03/28/css-container-queries-a-
fi
rst-look-and-demo/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

https://www.bram.us/2021/12/27/css-in-2022/

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

margin-block-start
margin-inline-end
margin-block-end
margin-inline-start
margin-block
margin-inline
padding-block-start
padding-inline-end
padding-block-end
padding-inline-start
padding-block
padding-inline
inline-size
min-inline-size
max-inline-size
block-size
min-block-size
max-block-size
border-block-start-
width
border-block-start-
style
border-block-start-
color
border-inline-end-
width
border-inline-end-
style
border-inline-end-
color
border-block-end-
width
border-block-end-
style
border-block-end-
color
border-inline-start-
width
border-inline-start-
style
border-inline-start-
color
border-block-width
border-block-style
border-block-color
border-inline-width
border-inline-style
border-inline-color
border-block-start
border-inline-end
border-block-end
border-inline-start
border-start-start-
radius
border-start-end-
radius
border-end-start-
radius
border-end-end-
radius
inset-block-start
inset-inline-end
inset-block-end
inset-inline-start
inset-block
inset-inline
aspect-ratio
column-gap
row-gap
gap
:is()
:has()
:where()
:any-link
position: sticky
overscroll-behavior
scroll-behavior
scroll-snap-align
scroll-snap-type
scroll-margin-top
scroll-margin-right
scroll-margin-bottom
scroll-margin-left
scroll-margin
scroll-margin-
inline-start
min()
max()
clamp()
@layer
@container
container-type
container-name
container
svw
svi
svh
svb
lvw
lvi
lvh
lvb
dvw
dvi
dvh
dvb
accent-color
color-scheme
forced-colors

DÍKY!!!
@AdamKudrna — @FrontendGarden