Media Queries Next Level
summary
Media Queries Level 4 adds concrete features for responsive CSS: a light-level media query to adapt contrast based on ambient light, refined pointer (coarse|fine|none) and hover queries to detect input precision, a scripting query to detect whether JavaScript is available, and custom-media plus new comparison operators (<=, >=) for clearer conditions. An example adapts an existing business web app to a fictional Samsung S18 by switching layout based on cursor type and ambient light; browser support is partial so some behaviors work only in Chrome or via tools like cssnext and several features remain unimplemented.
AI-written summary · about
chapters (13)
- 0:00Start
- 6:57Samsung S18 Apocalypse
- 10:33New Syntax
- 12:01@custom-media
- 13:36@media (scripting)
- 16:33@media (light-level)
- 18:13@media (pointer)
- 21:24Challenges
- 21:56@media (any-pointer)
- 23:13@media (overflow-block/inline)
- 25:09@media (color-gamut)
- 25:54@media (update)
- 26:40When can we use the new media queries?
