2

When I write [if ! webkit] in my .less file It is throwing me an error as it cannot convert it to css code.

There was also an [if webkit] in my code so I have written 

@media all and (-webkit-min-device-pixel-ratio:1) {
    html, body {
        background-color: black;
    }
}

rather than,

html, body {
    [if webkit]background-color:black;
}

And it is working correctly, So I need a similar solution for [if ! webkit]

Can anybody help me on this ?

Saurabh Bayani
  • 3,350
  • 2
  • 25
  • 44
  • 3
    using "not" in your media query? see: http://stackoverflow.com/questions/5766069/exact-notinverse-of-css-media-query and http://css-tricks.com/logic-in-media-queries/. In your case: `@media not all and (-webkit-min-device-pixel-ratio:1)` – Bass Jobsen Dec 19 '13 at 19:48
  • @BassJobsen, Tried it already ! But not working, I tested it on Firefox – Saurabh Bayani Dec 20 '13 at 10:27
  • i found a duplicate of your question here: http://stackoverflow.com/questions/15401375/css-media-check-if-not-webkit. Maybe `-webkit-min-device-pixel-ratio` is not a good discriminator for Firefox, also check https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, the "-moz-device-pixel-ratio" part – Bass Jobsen Dec 20 '13 at 11:08

1 Answers1

0

The media query in your example is a vender specific media query. It will only be recognized by webkit browsers as they are the only one who use this prefix. When firefox sees this code it does not recognize it so it is ignored. There is no "not webkit" code as other browsers do not use those prefixes. Other venders may provide their own version (ie. min--moz-device-pixel-ratio)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio

but if they dont have their own you are SOL. I always suggest using

http://rafael.adm.br/css_browser_selector/

as a quick fix for browser specific issues.

Davidicus
  • 716
  • 6
  • 16