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.


Contact/Hire Mitch

Want to book Mitch for a speaking event at your business or church?

Or does your business or project need some amazing design / development muscle?

Use the form below!


Don’t worry - your information is safe with us! We dont’ sell it, and we don’t like people who do!

Please only contact Mitch related to speaking engagements, projects, or personal messages.

NO SPAM EMAILS, PLEASE!