A provider with a css prefix that is different from the current standard

Question

I am trying to find a resource that has a list of browser-specific implementations of CSS properties that deviate from existing W3C standards.

For example, let's say IE supports something like this:

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

but when the proposal became a candidate’s recommendation, the standardized equivalent was:

 .my-class { foo: buzz fizz; } 

To support IE versions released before CR, I would like to write:

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

Googling for a list of such changes was not terribly fruitful, there was a lot of crying and gnashing of teeth around vendor prefixes, but not many gotcha lists. The best I've found so far is about the changes (in this case -webkit-border-radius ), but they rarely document the actual expected input; they tend to just give a broken example.

I found a list of existing OK prefixes (along with my standard status), but, unfortunately, it does not give the details necessary to determine what interests me the changes.

So, are there such lists?

I will take partial lists or those that exclude really old browsers (actually don't care about IE6). I am also very worried about large browsers 3.1 (IE, Firefox, Webkit / Chrome / Safari and _Opera ).

I also like things that were not addressed to W3C (like appearance ), this is a rather complicated problem, without worrying about the things suppliers have directly compiled.

Answer 1

There is no exhaustive list, but based on Compass , CSSPrefixer and this list from Peter Beverloo, this is what I can scrape off.

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 allow the same values ​​as their background-clip equivalents

background size

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

border-radius and friends

-moz equivalents border-top-left-radius , border-bottom-left-radius , etc. -moz-border-radius-topleft , -moz-border-radius-bottomleft etc.

-webkit-border-radius differs from the latest specification in handling two abbreviations of values. Webkit treats it as if all versions with long forms were passed in two values.

More specific:

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

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

and border-radius: 1px 2px equivalent

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

The only work I know of is to expand the two case -webkit-border-radius values ​​into it in long forms to match the correct border-radius .

display

If you want diplay:box work everywhere, you need to use prefix values ​​like this:

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

I have no idea why this is so, since all the properties of a particular box model (for example box-align ) also have prefix versions in these browsers.

---

Note that this does not include anything that is not currently part of the W3C document, such as appearance , even if it supports multiple browsers.

Answer 2

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

EDIT: Hmm. Today I roll zero. I could swear there were more browser prefixes on this site ...

Answer 3

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

caniuse.com usually provides good external links in the resource section, for example. for border-radius it is related to -webkit differences and this comprehensive rendering overview