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 8 March 2013.

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

Compatibility

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
Yes No Yes No Incomplete Yes No Yes No Yes No Yes No 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.

  • Opera 12.00 on Symbian does not support it.
Yes No 4.1 Yes No Incomplete Yes No Yes No Incorrect No Yes Incorrect No 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, Symbian Belle, and Tizen do not 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.
  • Opera 12.10 on Android supports new syntax. 12.00 on Symbian supports something that’s neither new nor middle syntax.
No No Almost Yes No No No No No
  • Opera Mini on BlackBerry doesn’t support cover. Those on iOS, Android, and Symbian do.
No No Yes No No No No No

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

Mobile browser test array 1.0.3; March 2013

iOS 5
WebKit 534
Default browser on iPad 2 with iOS 5.1.1
iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Sony Xperia S, Android 2.3.7
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on HTC One X, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.0.3
Chrome
WebKit 535
18 on Nexus 7, Android 4.2.1
Opera Mini
Presto
Proxy browser
7.5 on Samsung Galaxy Note I, Android 4.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia E71 (SymbianOS/9.2)
7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile 12
Presto
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7, Symbian Anna
Opera Mobile 14
WebKit 537
14.0 on Sony Xperia S, Android 2.3.7
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on Dev Alpha A device with OS 10.0.9
Xpress
Gecko
Proxy browser
2.3 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. And who knows? Ex-Nokia people have good operator contacts.
Anna
WebKit 533
Default browser on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser on Nokia PureView 808, Symbian Belle SP2
The most recent Symbian build.
UC
WebKit 533
UC 8.6.1 on Packard Bell tablet, Android 3.2.1.
The largest Chinese browser. I’m testing the full variant, not the proxy.
NetFront
WebKit 530
NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7
NetFront, by the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
WebKit 534
3.5.2 on HTC One X, Android 4.1.1
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
Tizen
WebKit 537
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.
Firefox
Gecko
18 on HTC One X, Android 4.1.1

General note on One, NetFront, and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones or game consoles.I’m working on getting more representative test devices.

Browsers by WebKit version:

530
NetFront
533
Android 2
Anna
UC
534
iOS5
Android 3 and 4
BlackBerry 6 and 7
MeeGo
Dolphin
One
535
Chrome
Belle
536
iOS6
BlackBerry PlayBook
537
Opera Mobile 14
BlackBerry 10
Tizen