Question

I’m trying to include a browser specific CSS using the @import style media query as follows:

<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>

The foo.css then has:

.myStyle { -moz-box-sizing: border-box; }

The idea is that I’ll include the foo.css for Firefox (Gecko/Mozilla) browsers. However, it looks like the foo.css is never applied on Firefox. So:

1. How do I debug in Firefox why the @import media query isn’t evaluating to true. I’ve checked via “InspectQ” to make sure that -moz-box-sizing is indeed context-box in the browser I’m using. But for whatever reason, that media query expression apparently is evaluating to false. What tool(s) can I use to see that evaluation at runtime.

2. Does anyone see anything wrong with that media query?

3. Is there a more common way to detect Mozilla browsers using the @import style media query?

Answer 1

The Media Queries spec defines a specific set of media features that you can use. Although the syntax resembles a property declaration, you can’t use any arbitrary CSS property as a media feature, because it won’t necessarily make sense as one. For example, what is -moz-box-sizing supposed to mean in a media query, even to Mozilla browsers?

In your case, since only Mozilla browsers will understand the -moz- prefix anyway, you can just place your CSS rule directly in your main stylesheet without any conditional imports.