@custom-media working behind a flag in Firefox Nightly!
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@media (--motionOK) {
transition: transform .3s ease;
}
Lovely syntax. Open Props has ~45 ready to go, peep the spec, or visit MDN for more info.
#CSS `@custom-media` available behind a flag in Firefox Nightly ???????? Lovely syntax, just lovely. nerdy.dev/custom-media
Love it. I recently ran into a case where I wished I could use it with `@container` too. There is an open spec issue for `@custom-container`: github.com/w3c/csswg-dr...Arpit Agrawal
@argyleink awesome! Have had a play with it and I like it. Looks like you cannot update with JS? Is that a browser issue or a standards issue? i.e. is it csswg or something in JS land?
bigandy
yes, that would be very useful! Also, would be good to combine all queries e.g. @supports, @container @media in to one combined custom query.Andrew Hudson
Had no idea about this one, this is incredible. So much cleaner!Josh Davenport-Smith
@argyleink Love this. Do you know if they're supposed to respect `@layer`? Both the spec and MDN mention "last" definition winning, but don't know if order like that implicitly includes layers or not.
Chris
Good addition, simplifies media queries.Rodrigo Dias
What the blessings is this!!!!! ❤️ ❤️ ❤️ ❤️Schalk Neethling
@argyleink is this inspired by CSS custom properties? It looks like what one might expect a media version of a variable to be
McNeely
Yea, this is big time. Anything moving us along for cleaner CSS documents is a win.Kevin McLaughlin
Custom media queries will clean up my CSS. Finally.
I'd love it if we could land either CSS custom media or style queries (so we can accomplish the same thing) cross browser.
Any clue if FF is working on style queries? They're the only one that doesn't support that.
Mike Herchels disembodied head
