at-media does not allow for non-standard media queries

[jborden]

First, I want to say that I like garden. A clojurescript port would be very nice... using the library for in-browser dynamic CSS generation for media queries would be awesome but I digress.

My issue is that non-standard media queries are not recognized.
e.g. at the repl:
repl> (css (at-media {:screen true :-webkit-min-device-pixel-ratio "2"} [:html {:width "480px"}]))
"@media screen{html{width:480px}}"

Could you please allow for generic media queries to be made so that vendor specific media queries can be created? I think something as simple as wrapping parens around anything that has a non-boolean value {:query "value"} -> (query:value) and anything with a boolean value like {:query true} -> query

Thanks!

[noprompt]

First, I want to say that I like garden.

Thanks! I appreciate it. :)

A clojurescript port would be very nice... using the library for in-browser dynamic CSS generation...

I think you're right. This is a good idea and eventually I'd like to see this happen.

Could you please allow for generic media queries to be made so that vendor specific media queries can be created?

Yes, this is definitely in order. The problem is I made media queries too strict (see here) basing them solely on what was put forward in the specs.

This morning I also discovered it's not possible to express something like only screen.

Taking these two problems in to account I think it's probably best that Garden avoid the business of validating media query properties and just focus on the semantics of values. This would solve your issue and (potentially) prevent others like it in the future.

I'll get started on a patch and keep an eye on this issue. Please let me know if you spot anything else.

[jborden]

Thanks for the timely response.

I think it's probably best that Garden avoid the business of validating media query properties

I agree. Even if you had a clojure CSS3 parser that was fully compliant with W3 standards that you could use for proper validation, you would still need the parser to recognize CSS3 vendor-specific grammar subsets... e.g. maybe the parser would accept a keyword/value pair like {:include-grammar "webkit"} or {:include-grammar "mozilla"}. Better to leave validation to another library!

[noprompt]

OK. That should do it. I've pushed up a new version of the library so we should be good to go.

Thanks for bringing this to my attention! I appreciate it.

[jborden]

Thanks for making media queries like this possible:

repl> (css (at-media {:screen true :min-device-width (px 1080) :orientation :portrait :-webkit-min-device-pixel-ratio "3"} [:html {:width (px 1080)}]))
"@media screen and (min-device-width:1080px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:3){html{width:1080px}}"