"Earlier this year, I realized that I knew very little about possibly most of the media queries. Maybe that's not surprising - since I never hear about them. Beyond the classics like @media(min-width: 400px) and the user-preference media queries such as @media (prefers-reduced-motion: reduce), and maaaybe orientation, I can't say that I was using media queries a whole lot. Especially since flexbox, grid layout, and calc() became fairly normalized, in addition to newer sizing values such as min-content, max-content, fit-content, and more recently, stretch."
"Modern devices can be used in many different ways. For example, it's not uncommon to hook a mouse up to a tablet, which is why we shouldn't think of tablets as touchscreen devices anymore. In fact, it's now unwise to use media queries to query for what specific device they "are", which is why the media types tty, tv, projection, handheld, braille, embossed, aural, and speech were deprecated"
Many CSS media query descriptors remain underused despite growing relevance. Modern layout techniques like flexbox, grid, calc(), and sizing keywords reduce reliance on simple breakpoints. An @custom-media at-rule enables reusable queries. Legacy media types such as tty, tv, projection, handheld, braille, embossed, aural, and speech are deprecated, leaving all, print, and screen (which may also be deprecated eventually). Devices vary in input and configuration; querying capabilities and user settings through hover, pointer, any-hover, and any-pointer better captures real behavior than inferring device type. Several lesser-known descriptors have practical use-cases and merit more attention.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]