DEV Community

Cover image for Useful CSS Media Query Features

Useful CSS Media Query Features

Ananya Neogi on February 12, 2019

A typical media query consists of a media type (screen, print, speech, etc) and one or more expressions, involving media features, which resolve to...
Collapse
 
gzuzkstro profile image
Yisus Castro✨

I didn't know about the aspect ratio media queries! 🤯

Seems like it could be useful, it's supported basically everywhere but Edge/IE (according to MDN page) 🧐

Collapse
 
ananyaneogi profile image
Ananya Neogi

Yes! Aspect ratios are really great!

Collapse
 
rolandixor profile image
Roland Taylor

IMHO, still better to go with width and height, because you never know what quirks may pop up!

Collapse
 
link2twenty profile image
Andrew Bone

This is great, I didn't know about hover I'll have to think of an excuse to use it 😁

Oh, I wrote an article about prefers-color-scheme 😉

dev.to/link2twenty/future-of-css-c...

Collapse
 
ananyaneogi profile image
Ananya Neogi

Great article on prefers-color-scheme! Looking forward to read more in the future of CSS series 🙂

Collapse
 
rugk profile image
rugk

BTW, as for 8., Firefox 67 supports this too prefers-color-scheme too now. Actually, I've written about it in detail here:
dev.to/rugk/dyk-your-website-can-g...

And because I wanted to toggle it in my browser and not (only) system, I've created an add-on for exactly that: addons.mozilla.org/de/firefox/addo...

Collapse
 
equinusocio profile image
Mattia Astorino

Just a thing, prefers-color-scheme is already implemented on Safari/webkit (they proposed it) and under development by chronium and mozilla. 👍🏻

Collapse
 
ananyaneogi profile image
Ananya Neogi

Ah, great! Just checked caniuse, seems like it's available in the technology preview version of safari. Thanks for pointing out. 🙂

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Unfortunately can i use isn't always updated. Right now it doesn't flag "under development" for chrome and firefox. Here the status updates:

chromestatus.com/feature/510975897...
bugzilla.mozilla.org/show_bug.cgi?... (They're working on it)

Collapse
 
rhymes profile image
rhymes

Nice article, thank you!