イマのCSSでできる インタラクション最前線 + CSS最新情報 2024

Transcript

1. CSS + CSS ICS
2. : 18 JavaScript 14 WebGL ( ) ICS 算 / @clockmaker
3. . . 2023 CSS . 2024 CSS . SNS #MTDDC
4. Section.
5. 2022 Interop Interop ,
6. web-platform-tests dashboard https://wpt.fyi/interop-
7. Working together on Interop | WebKit https://webkit.org/blog/ /working-together-on-interop- /
8. Interop : Pushing interoperability forward | WebKit https://webkit.org/blog/ /interop- /
9. The web just gets better with Interop | WebKit https://webkit.org/blog/ /the-web-just-gets-better-with-interop/
11. 4 Section. 2023 CSS Interop CSS :has()
12. :has()
13. :has() . 2022 3 2022 9 2023 12
15. HTML CSS OK :user-invalid
16. HTML CSS
18. disabled
19. has() CSS - ICS MEDIA https://ics.media/entry/ /
21. o set-path: path() . 2022 9 2018 1 2020 1 2020 1 CSS
22. o set-path: . 2023 9 2023 8 2024 1 circle polygon url 2023
26. CSS o set - ICS MEDIA https://ics.media/entry/ /
28. . 2022 9 2022 10 2023 2
31. - ICS MEDIA https://ics.media/entry/ /
33. . 2022 9 2022 8 2023 2 cqw, cqh, cqi, cqb, cqmin, cqmax vw cqw
36. . 2024 9 2023 3 - CSS
37. CSS style() - ICS MEDIA https://ics.media/entry/ /
39. . 2022 3 2023 3 2022 2 CSS
43. HTML CSS CSS 0 4
44. HTML CSS
46. CSS sin() cos() - ICS MEDIA https://ics.media/entry/ /
48. mask-image CSS -webkit- 2022 2023 2009 1 VP 2022 15.4 2010 1 VP 2023 120 2017 4 2017 10
49. mask-composite . 2022 3 2023 12 2017 4
54. mask-composite CSS - ICS MEDIA https://ics.media/entry/ /
55. subgrid
56. subgrid . 2022 3 2023 9 2017 4 CSS Grid
58. CSS Grid Layout - ICS MEDIA https://ics.media/entry/ /
59. Media Query Level
60. Range Syntax . 2023 3 2022 8 2018 10 @media (width < px) { /* */ }
61. @container (width < px) { /* */ }
62. CSS Section. 2024 CSS Interop
63. CSS
64. CSS . 2023 12 2023 12 2023 8 Sass
66. CSS Sass CSS CSS Sass & × mixin, function × calc() calc() Sass
67. Sass Pure CSS &
69. . 2023 9 2023 3 2024 4 z-index UI
72. UI JavaScript API - ICS MEDIA https://ics.media/entry/ /
74. - 2024 1 2018 12 -webkit- W C scrollbar-width, scrollbar-color ::-webkit-scrollbar-* 2009
76. Internet Explorer #
77. - 2021 9 2022 9 scrollbar-gutter
80. CSS scrollbar-gutter - ICS MEDIA https://ics.media/entry/ /
81. Safari Stable, : Experimental
82. Section.
87. animation-timeline - 2023 7 - CSS
89. CSS Scroll-driven Animations - ICS MEDIA https://ics.media/entry/ /
91. View Transitions API (SPA) . 2024 9 2023 3 - DOM
95. View Transitions API (MPA) - 2024 6 - HTML
98. View Transitions API - ICS MEDIA https://ics.media/entry/ /
100. . . UI CSS . CSS
101. : ICS ICS https://ics.media/recruit/