css-mediaquery
css-mediaquery copied to clipboard
css-mediaquery does not work with comments in media queries and with Opera's device pixel ratio
Two samples which fail to parse:
@media (-o-min-device-pixel-ratio: 3 / 2) {
body { background: url('hd-background.png'); }
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
/* Opera Device Pixel ratio not supported by css-mediaquery 0.1.2 */
/* (-o-min-device-pixel-ratio: 3 / 2), */
(min-device-pixel-ratio: 1.5) {
body { background: url('hd-background.png'); }
}
This works:
@media (min-device-pixel-ratio: 1.5) {
body { background: url('hd-background.png'); }
}
I'll work on doing the pragmatically-correct thing for these. I held off on adding support for vendor prefixes, because the best practice is to include a non-prefix query in the set, like you have in the second example.
I will add support for comments, since those are a valid part of the spec.
Support for vendor prefixes: -webkit-… -o-… …-moz-…
Usage: Compare it with a non-prefix query…
Changes (@ericf please revisit): https://github.com/ericf/css-mediaquery/blob/master/index.js#L16
RE_MQ_FEATURE = /^(?:-(webkit|moz|o)-)?(?:(min|max)-)?(?:-(moz)-)?(.+)/,
https://github.com/ericf/css-mediaquery/blob/master/index.js#L131-L132
modifier: feature[2],
feature: feature[4],
+1
Any news?