Why do CSS properties have different names for Chrome, FF, Opera?

I want the shadow below the div to be called “shadow”:

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

Are you done?

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

For FF / Chrome, I have to add a little too intuitive:

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

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

Fortunately, no -webkit-border, moz-font, or -ie-backgroundcolor.

PS. Yes, not a word about IE. Calling this browser is like comparing wheelchairs to Modena cars.

PS 2. Why is my logo next to the Google Chrome tag? Or why there are no logos for Opera and FF?

+5
source share
5 answers

, CSS Spec .

, CSS3. -moz-vs -webkit- .

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%
);

: http://www.alistapart.com/articles/prefix-or-posthack/

, , , , , . - , , . , . . , , .

. , , .

+2

, . "" , .

( ) CSS , W3C , CSS :

: http://reference.sitepoint.com/css/vendorspecific

+3

, . , - "webkit...".

0

, , . , , , .

0

, , , , , .

; CSS , . :

  • , , - (- ), .
    : -moz-border-radius - -webkit-border-radius; , , border-radius, .
  • , .
    , , . , , , , , .
  • - , , -.
    : , , , . . , -, , , .
0

All Articles