Firefox 4 and CSS3
Some interesting tidbits are arising now that Firefox 4 is out in the wild. It turns out that Firefox 4 will accept both the standard and –moz specific versions of CSS3. For example, take the following drop shadow css:
.shadow{
box-shadow: 0px 0px 12px #000;
-moz-box-shadow: 0px 0px 120px #000;
}
In the current order, the –moz statement will be the rendering statement. However…
.shadow{
-moz-box-shadow: 0px 0px 120px #000;
box-shadow: 0px 0px 12px #000;
}
…switch them around and the regular box-shadow will override.
Box shadows also follow the !important convention as well:
.shadow{
-moz-box-shadow: 0px 0px 120px #000 !important;
box-shadow: 0px 0px 12px #000;
}
Even though the normal box-shadow is on the bottom, the !important tag forces the browser to render the –moz rule.
So?
Basically, this means that Firefox will accept both arguments, but will allow you to style your code as such to continue to tweak for specific browsers. Need one setting? use box-shadow. Need one for IE and one for Firefox? use box-shadow for IE and specify –moz for Firefox.