Back to the index.
CSS3 Images and Replaced Content specification.
By far the most important part of Images and Replaced Content is gradients. Still, there are a few other interesting properties.
This is the desktop table. See also the mobile table.
Last major update on 8 March 2013.
If you want to study gradients, start with the Introduction to gradients.
The WebKit-based browsers still use prefixed middle syntax for gradients. That’s all noted as Alternative.
| Selector or declaration | IE9 and lower | IE10 | FF 19 Win | FF 19 Mac | Safari 6.0.2 Mac | Chrome 25 Win | Chrome 25 Mac | Yandex 1.5.1 Mac | Opera 12.14 Win | Opera 12.14 Mac |
|---|---|---|---|---|---|---|---|---|---|---|
| No | Yes | Yes | Yes | Yes | Yes | |||||
|
This entry states if the browser supports either unprefixed new syntax or -webkit-prefixed middle syntax. If the browser does not support the example below on this page it gets a No here and I don’t investigate it any further. |
||||||||||
| No | Yes | Yes | Yes | Yes | Yes | |||||
|
This entry states if the browser supports either unprefixed new syntax or -webkit-prefixed middle syntax. If the browser does not support the example below on this page it gets a No here and I don’t investigate it any further. |
||||||||||
| To treat an image as if it is a background-image when it comes to fitting it in its box. Prefixed | No | No | No | No | Yes | |||||
| Prefixed To treat an image as if it is a background-image when it comes to positioning it in its box. | No | No | No | No | Yes | |||||
The following properties are not supported in any browser.
This is the main gradient test. If a browser fails it, it gets a No and I don’t investigate it any further.
This is an example of a cross-browser linear gradient.
background: -webkit-linear-gradient(0deg,red 10%,yellow 30%,green 60%); background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);
This is an example of a cross-browser radial gradient.
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%); background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);