CSS3 Browser Support

CSS3 has been found one of the best solution for drawing the graphical representaion with script. In the present era of technology the external affords has been reduced for styling a web page. The enhanced and amazing features of CSS3 has left an admirable footprint in web designing.

The most burning problem with CSS3 specification is it’s browser support, when it doesn’t proper style a webpage on every browser. Sometimes some codes work fine on updated browsers but old browser doesn’t support it properly.

The specific prblem is raising with Internet Explorer. As an example if someone wants to render the rounded corner with border-radius feature of css3, the old Internet Explorer browser doesn’t support it. But the updated Internet explorer more than 10th version is now supporting the most features.

Below, a chart has been prepared which show the browsers that supports the CSS3 features.:



CSS3 Properties

Platform MAC WINDOWS % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
RGBA Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
HSLA Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
Box Sizing Y Y Y Y Y Y Y Y Y N N Y Y Y 35% (grade: “limited”)
Background Size Y Y Y Y Y Y Y Y Y N N N Y Y 90% (grade: “excellent”)
Multiple Backgrounds Y Y Y Y Y Y Y Y Y N N N Y Y 90% (grade: “excellent”)
Border Image Y Y Y Y Y Y Y Y Y N N N N N 85% (grade: “excellent”)
Border Radius Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
Box Shadow Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
Text Shadow Y Y Y Y Y Y Y Y Y N N N N Y 76% (grade: “excellent”)
Opacity Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
CSS Animations Y Y Y Y Y Y Y Y Y N N N N Y 66% (grade: “good”)
CSS Columns Y Y Y Y Y Y Y Y Y N N N N Y 85% (grade: “excellent”)
CSS Gradients Y Y Y Y Y Y Y Y Y N N N N Y 84% (grade: “excellent”)
CSS Reflections Y N N Y Y Y Y N N N N N N N 46% (grade: “limited”)
CSS Transforms Y Y Y Y Y Y Y Y Y N N N Y Y 90% (grade: “excellent”)
CSS Transforms 3D Y Y N Y Y Y N Y N N N N N Y 41% (grade: “limited”)
CSS Transitions Y Y Y Y Y Y Y Y Y N N N N Y 72% (grade: “good”)
CSS FontFace Y Y Y Y Y Y Y Y Y Y Y Y Y Y 98% (grade: “excellent”)
FlexBox Y Y Y Y Y Y Y Y N N N N N N 72% (grade: “good”)
Generated Content Y Y Y Y Y Y Y Y Y N N Y Y Y 35% (grade: “limited”)
DataURI Y Y Y Y Y Y Y Y Y N N Y Y Y 35% (grade: “limited”)
Pointer Events Y Y N Y Y Y Y Y N N N N N N 29% (grade: “limited”)
Display: table Y Y Y Y Y Y Y Y Y N N Y Y Y 35% (grade: “limited”)
Overflow Scrolling N N N N N N N N N N N N N N 3% (grade: “poor”)
Media Queries Y Y Y Y Y Y Y Y Y N N N Y Y 34% (grade: “limited”)

CSS3 Selectors

Platform MAC WINDOWS % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Begins with Y Y Y Y Y Y Y Y Y N Y Y Y Y 99% (grade: “excellent”)
Ends with Y Y Y Y Y Y Y Y Y N Y Y Y Y 99% (grade: “excellent”)
Matches Y Y Y Y Y Y Y Y Y N Y Y Y Y 99% (grade: “excellent”)
Root Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
nth-child Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
nth-last-child Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
nth-of-type Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
nth-last-of-type Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
last-child Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
first-of-type Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
last-of-type Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
only-child Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
only-of-type Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
empty Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
target Y Y Y Y Y Y Y Y Y N N N Y Y 89% (grade: “excellent”)
enabled Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
disabled Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
checked Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
not Y Y Y Y Y Y Y Y Y N N N Y Y 91% (grade: “excellent”)
General Sibling Y Y Y Y Y Y Y Y Y N Y Y Y Y 99% (grade: “excellent”)