Use-Cases of this video
- Know about the latest CSS properties and APIs that can be used for creating better user interfaces.
Many "next generation" CSS properties and APIs have been introduced in browsers lately. These can help in creation of user interfaces that were previously not possible or were difficult to achieve.
Off late, browsers have introduced new CSS properties and APIs that can solve many UI problems with ease. Previously solving such UI problems would require tons of CSS, a combination of CSS & Javascript, or were not solvable at all.
These "next generation" techniques for web styling include :
- CSS Scroll Snap
- focus-within
- @media (prefers-reduced-motion)
- @media (prefers-color-scheme)
- @media (prefers-contrast)
- @media (prefers-reduced-transparency)
- @media (forced-colors)
- @media (light-level)
- CSS logical properties and values
- position:sticky
- backdrop-filter
- :is() CSS selector
- gap property in CSS flexbox
- CSS Houdini (custom properties and values)
- Typed OM
- CSS Paint API
- CSS Animation Worklet
- size
- @media (aspect-ratio)
- min()
- max()
- clamp()
- list-style-type
- display: outer inner
- CSS regions
- CSS modules
- CSS sub-grid
The below video was presented at Chrome Dev Summit 2019. It gives a brief introduction to all the above new UI techniques. It is a must watch for web designers looking to make their user interfaces more robust.