Question

I want a shadow below div called “shadow”:

#shadow { box-shadow: 1px 1px 1px #000 };

Done?

Not at all. It works just in one browser. Guess which one.

For FF/Chrome I have to add not too intuitive:

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

And now everything is ok. This scheme applies to MANY CSS properties. Why?

Luckily there’s no -webkit-border, moz-font or -ie-backgroundcolor.

PS. Yes, not a single word about IE. Calling THIS a browser is like comparing wheelchair to Modena cars.

PS 2. Why there is a logo next to Google Chrome tag below my post? Or why there are no logos for Opera & FF?

Answer 1

It’s a way for browsers to release features before the CSS Spec is fully approved.

For instance, look at the CSS3 gradients. -moz- vs -webkit- are completely different.

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(145,4,88)),
    color-stop(0.58, rgb(174,30,115)),
    color-stop(0.79, rgb(209,57,150))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(145,4,88) 15%,
    rgb(174,30,115) 58%,
    rgb(209,57,150) 79%
);

This may be of interest: http://www.alistapart.com/articles/prefix-or-posthack/

So the next time you find yourself
grumbling about declaring the same
thing four times, once for each
browser, remember that the pain is
temporary. It’s a little like a
vaccine—the shot hurts now, true, but
it’s really not that bad in comparison
to the disease it prevents. And in
this case, you’re being vaccinated
against a bad case of multi-year
parser hacking and browser sniffing.
We suffered through that long plague
once already. Prefixes will, if used
properly, ward off another outbreak
for a long time to come.

NOTE: It’s good practice to include the version without the prefixes, as to continue the sites function when the property is fully adopted.