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

Last major update on 21 November 2014.

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

Compatibility

The WebKit-based browsers still use prefixed middle syntax for gradients. That’s all noted as Alternative.

Method or property	Internet Explorer					Firefox			Safari	Chrome			Opera		Yandex
Method or property	7 and lower	8	9	10	11	33 Win	33 Mac	32 Linux	7	38 Win	38 Mac	37 Linux	26 Win	26 Mac	14.10 Win	14.10 Mac
linear-gradient	No			Yes		Yes			Yes	Yes			Yes		Yes
linear-gradient
radial-gradient	No			Yes		Yes			Yes	Yes			Yes		Yes
radial-gradient
image-orientation To rotate an image.	No					Yes			No	No			No		No
image-orientation To rotate an image.
object-fit To treat an image as if it is a background-image when it comes to fitting it in its box.	No					No			No	Yes			Yes		Yes

object-position To treat an image as if it is a background-image when it comes to positioning it in its box.	No					No			No	Yes			Yes		Yes
	Same syntax as background-position.

The following properties are not supported in any browser.

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

Desktop browser test array 2.0.3; November 2014

IE7 and lower: I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.; If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10: Trident; On separate Windows 7 virtualizations
IE11: Trident; On Windows 8.1 virtualization; On Surface
Firefox: Gecko 33/32; 33 on Win7 and Mac; 32 on Linux (can’t update)
Safari: WebKit; 7.0.5 on Mac
Chrome: Chromium 38/37; 38 on Win7 and Mac; 37 on Linux (can’t update)
Opera 26: Chromium 38; 26.0 on Win7 and Mac
Yandex 14.10: Chromium 37; 14.10 on Win7; 14.10 on Mac

Operating systems

Mac: MacBook Pro 17'' with OS 10.9.4; This is my main test station. It also runs all virtual Windows systems.
Windows: All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.; The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface: Microsoft Surface with Windows RT 8.1
Linux: Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.