The document discusses new CSS features for 2022 and how to use them. It covers layout properties like margin-block-start, padding-inline-end, and aspect-ratio. It also discusses selector features like :is(), :has(), and :where(). Mathematical functions like min(), max(), and clamp() are presented. Interaction features like scroll-behavior and position: sticky are covered. Finally, it discusses upcoming features like CSS containers and @layer. Live coding examples are provided to demonstrate several of the new properties.

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

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

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

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

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

13. !!!
březen 2022
Safari 15.4

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

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

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

18. 1. Layout

19. Logické vlastnosti

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

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

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

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

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

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

30. Live coding time 🎉

32. aspect-ratio

34. aspect-ratio: 1;

36. Live coding time 🎉

37. gap

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

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

41. .item {
padding: 0.5rem;
}

42. .wrapper {
margin: -0.5rem;
}

44. gap: 1rem;

47. Live coding time 🎉

48. 2. Selektory

49. :is(), :where()

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

52. :has()

53. 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."

55. Live coding time 🎉

56. 3. Matematické funkce

57. min()
max()
clamp()

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

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

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

61. Live coding time 🎉

62. 4. Interakce

63. scroll-behavior: smooth;

64. overscroll-behavior: contain;

65. position: sticky;

66. scroll-snap-type
scroll-padding
scroll-margin
scroll-snap-align

67. Live coding time 🎉

68. 5. What's Next 🔥

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

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

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

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

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

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

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

77. DÍKY!!!
@AdamKudrna — @FrontendGarden