CODEWITHSUNDEEP
cssvendor-prefix
Kevin Montrose
Kevin Montrose

Reputation: 22571

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.

Upvotes: 8

Views: 190

Answers (3)

Kevin Montrose
Kevin Montrose

Reputation: 22571

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.

Upvotes: 1

Oleg
Oleg

Reputation: 24988

Deviations from the standards are not uncommon (i.e. rendering quirks) but deviations from the standard/proposed notation are fairly rare imho, this resource should do the trick:

caniuse.com normally provides good external links in resources section, e.g. for border-radius it linked to -webkit differences and this exhaustive rendering overview

Upvotes: 1

Tieson T.
Tieson T.

Reputation: 21192

I find CSS3Info useful: http://www.css3.info/preview/ (edited - sorry, this is what I meant to post originally).

EDIT: Hmm. I'm batting zero today. I could have sworn there was more on browser prefixes on that site...

Upvotes: 2

Related Questions