CSS - images and replaced content

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 mobile table. See also the desktop table.

Last major update on 26 November 2014.

If you want to study gradients, start with the Introduction to gradients.

Compatibility

[an error occurred while processing this directive] [an error occurred while processing this directive]
linear-gradient
No Yes No Yes Yes slow Yes Yes No Yes No Yes No 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.

  • Puffin loads the gradients as if they are images, and slow ones at that.
radial-gradient
 Yes No Yes Yes slow Yes Yes No Yes No Yes No 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.

  • Android 4.0 doesn’t support ellipse; only circle. If you explicitly define circle everything is fine, but if you don’t it uses circles nonetheless and does other things wrong, too.
  • Puffin loads the gradients as if they are images, and slow ones at that.
image-orientation
To rotate an image. 		No No No No No No No Yes
object-fit
 No Yes No No Yes No No No No No
  • Opera Mini on BlackBerry doesn’t support cover. Those on iOS, Android, and Symbian do.
object-position
 No No No Yes No No No No No

Same syntax as background-position.

Main gradient test

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

Tested browsers

[an error occurred while processing this directive]