Chrome dev summit 2019에서 발표한 차세대 웹 스타일링 방식에 대해 정리해서 공유합니다.

1. 새로운 웹 스타일링,
안 본 사람 없게 해주세요.
Chrome Dev Summit 2019 Next-generation web styling

2. Next-generation Web Styling
Adam Argule
Una Kravets
Chrome Dev Summit 2019

3. scroll-snap
:focus-within
@media (prefers-*)
Logical properties
Sticky Situations
backdrop-filter
:is()
gap (for Flexbox)
CSS Houdini
…

4. scroll-snap
Native scroll inertia & deceleration

5. scroll-snap
Native scroll inertia & deceleration

6. scroll-snap
snap
points
Native scroll inertia & deceleration

7. scroll-snap-type: y mandatory;
scroll-snap-align: start;
scroll-snap
Native scroll inertia & deceleration

8. Native scroll inertia & deceleration
scroll-snap-type: y mandatory;
scroll-snap-align: start;

9. :focus-within
Solving focus accessibility within elements

10. @media (prefers-*)
Considerately adjust your UI/UX to a user’s device preferences via
Media Query hooks provided by browsers

11. prefers-reduce-motion: reduce | no-preference;
@media (prefers-*)
Considerately adjust your UI/UX to a user’s device preferences via
Media Query hooks provided by browsers

12. prefers-color-scheme: no-preference | light | dark;
@media (prefers-*)
Considerately adjust your UI/UX to a user’s device preferences via
Media Query hooks provided by browsers

13. @media (prefers-contrast: high) { … }
@media (prefers-reduced-transparency: reduce) { … }
@media (forced-colors: high) { … }
@media (light-level: dim) { … }
@media (prefers-*)
Considerately adjust your UI/UX to a user’s device preferences via
Media Query hooks provided by browsers

14. Logical properties
Dynamic directionality

15. Dynamic directionality Dynamic directionality

16. Dynamic directionality Dynamic directionality

17. as-is
Dynamic directionality

18. to-be
Dynamic directionality

19. Sticky Situations
Keeping UI within the viewport

20. Keeping UI within the viewport
position: sticky;

21. backdrop-filter
Style adjustment behind an element

22. :is()
Formerly :any() && :matches()

23. as-is
Formerly :any() && :matches()
button:focus,
button.focus {
...
}
article > h1, article > h2, article > h3, article > h4,
article > h5, article > h6 {
...
}

24. to-be
Formerly :any() && :matches()
button:is ( :focus, .focus ) {
...
}
article > :is ( h1, h2, h3, h4, h5, h6 ) {
...
}

25. gap (for Flexbox)
Just gap now

26. Just gap now

27. Just gap now

28. CSS Houdini
A low-level API for CSS

29. A low-level API for CSS

30. A low-level API for CSS

31. A low-level API for CSSA low-level API for CSS

32. Properties & Values API
Extending custom properties

33. Extending custom properties

34. Extending custom properties

35. Typed OM
CSS values as JavaScript objects rather than strings

36. CSS values as JavaScript objects rather than strings

37. as-is
CSS values as JavaScript objects rather than strings
const h1 = document.querySelector(‘h1’)
const cssOM = window
.computedSTyleMap(h1)
.getPropertyValue(‘font-size’)
console.log( cssOM ) // “72px”

38. to-be
CSS values as JavaScript objects rather than strings
const h1 = document.querySelector(‘h1’)
const { value, unit } = h1
.computedSTyleMap()
.get(‘font-size’)
console.log( { value, unit } ) // { unit: “px”, value: 72 }

39. Paint API
Create your own paint functions using a canvas-like syntax

40. Create your own paint functions using a canvas-like syntax

41. Animation Worklet
Off the main thread animation

42. Off the main thread animation

43. Off the main thread animation

44. Off the main thread animation

45. .box { size: 50vw; }
iframe { aspect-ratio: 16/9; }
h1 { font-size: clamp(1.5rem, 6vw); }
article { flow-into: articles; }
region { flow-from: articles; }
import styles from ‘./nav.css’;
Speed Round…

46. 새로운 웹 스타일링,
안 본 사람 없고요.
Chrome Dev Summit 2019 Next-generation web styling