Search code examples
cssvendor-prefix

Vendor prefixed css that deviates from current standard

I'm trying to find a resource that has a list of browser specific implementations of CSS properties that deviate from the current W3C standards.

For example, say IE supported something like this:

.my-class {
  -ms-foo: fizz buzz;
}

but when the proposal became a candidate reccomendation the standardized equivalent was:

.my-class {
  foo: buzz fizz;
}

In order to support versions of IE released before the CR, I'd want to write:

.my-class {
  -ms-foo: fizz buzz;
  foo: buzz fizz;
}

Googling for a list of these sorts of changes hasn't been terribly fruitful, there's a lot of wailing and gnashing of teeth around vendor prefixes but not a lot of "gotcha" lists. Best I've found thus far are offhand mentions of changes (in that case, -webkit-border-radius), but those rarely document the actual expected input; they tend to just give a broken example.

I have found an OK list of the prefixes that exist (along with their standard status), but unfortunately it doesn't give the kind of details necessary for spotting the changes I'm interested in.

So, do any such lists exist?

I'll take partial lists, or ones that exclude really old browsers (don't really care about IE6, for example). I'm also only really concerned about the big 3.1 browsers (IE, Firefox, Webkit/Chrome/Safari, and Opera).

I also care about things that haven't been addressed by the W3C (like appearance), this is a hard enough problem without worrying about the things vendors have straight-up made up.

Solution

  • There doesn't seem to be an exhaustive list out there, but based on Compass, CSSPrefixer, and this list from Peter Beverloo here's what I can scrape together.

    background-clip

    -moz-background-clip accepts padding and border instead of padding-box and border-box -webkit-background-clip behaves the same as the -moz version, but also accepts content instead of content-box

    background-origin

    -moz and -webkit versions accept the same values as their background-clip equivalents

    background-size

    -webkit-background-size duplicates single values, so -webkit-background-size: 10px is equivalent to background-size: 10px 10px. The prefixed webkit equivalent of background-size:10px is -webkit-background-size: 10px auto;.

    border-radius and friends

    The -moz equivalents of border-top-left-radius, border-bottom-left-radius, etc. are -moz-border-radius-topleft, -moz-border-radius-bottomleft and so on.

    -webkit-border-radius differs from the final spec in it's handling of the two value shorthand. Webkit treats it as if all the long form versions were passed two values.

    More concretely:

    -webkit-border-radius: 1px 2px is equivalent to

    -webkit-border-top-left-radius: 1px 2px;
-webkit-border-top-right-radius: 1px 2px;
-webkit-border-bottom-left-radius: 1px 2px;
-webkit-border-bottom-right-radius: 1px 2px;

    while border-radius: 1px 2px is equivalent to

    border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 2px;

    The only work around I know of for this is to expand the two value case of -webkit-border-radius into it's long forms so as to match proper border-radius.

    display

    If you want diplay:box to work everywhere, you need to use prefixed values like so:

    display:-webkit-box;
display:-moz-box;
display:box;

    I have no idea why this is, as all the box model specific properties (like box-align) also have prefixed versions in those browsers.

    Note that this doesn't include anything that's not currently part of a W3C document, like appearance, even if multiple browsers support it.