jQuery causes Firefox box-sizing warnings
I have the WebDeveloper extension and I got a CSS warning so I went to investigate it. The warning is 3 of the following:
Warning: Unknown property 'box-sizing'. Declaration dropped.
Line: 0
Then I made a blank file and noticed it wasn't there. A few minutes later I found a reproducible cause: including the jQuery 1.9.1 script!
What can or should I do? I want to use jquery but I find it a bit annoying that I'll forever see CSS warnings in my toolbar.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Empty</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>
Answer
Options
- Use jQuery 1.7.2.
- Raise the issue with the jQuery team and hope for a fix (or provide one yourself).
- Use Firebug instead of WebDeveloper (which may or may not help).
- Ignore it.
As long as the page renders correctly, I believe this is a warning you can safely ignore, even if you're building a website that strictly requires validating the CSS.
The warnings should go away as soon as Firefox has full support for box-sizing (without requiring the -moz- prefix), but that won't happen until some version after Firefox 21.
Background info
The warning arises from the different syntaxes needed for certain CSS styles. To support all browsers, you generally have to specify all of the various syntaxes. Browsers will ignore the ones they don't recognize.
In the case of box-sizing, Firefox requires the -moz- prefix, early versions of Safari Mobile and the Android browser require the -webkit- prefix, and other browsers require no prefix at all:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
A similar issue arises when adding a linear gradient, in this case caused by the value rather than the property name:
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: -moz-linear-gradient(top, #444, #999);
background-image: -ms-linear-gradient(top, #444, #999);
background-image: -o-linear-gradient(top, #444, #999);
background-image: linear-gradient(top, #444, #999);
When warnings arise from the different syntaxes used, it's typically a case of the validator or error console not being smart enough to recognize a real problem from a harmless one that's often unavoidable. And to be fair, it is in fact identified as a warning, not an error.
Additional info
Newer versions of jQuery make use of the box-sizing style for internal purposes. jQuery 1.8.0 only produces a single box-sizing warning, and jQuery 1.7.2 produces none.
jQuery may be using it in a slightly-careless way -- without first testing if there's some type of support for it -- but without doing any actual harm. If so, if enough people complain about it to the jQuery team, the jQuery code could potentially be refactored to address this (at the cost of jQuery running a tiny bit slower).
If the warning were about -moz-box-sizing rather than box-sizing, that would more likely suggest a possible bug with Firefox rather than a minor issue with jQuery.