CSS3

CSS3 is the latest version of CSS, the stylesheet language used to control the presentational layer of web. CSS3 is the latest version of css, the stylesheet language of web. CSS3 includes both CSS 2, CSS 2.1 ( previous version of css) and CSS3 specifications . CSS3 is the third level of CSS specifications.

CSS3 tutorial
CSS3 Vs CSS2

CSS3 includes some new features, like new CSS3 selectors, rounded corners, box shadows, RGBA, HSL and HSLA colors, box sizing, Opacity, CSS3 Gradients, transitions, transformations, animations, multi-column layout, flex-box, embedded fonts and Responsive web design . Here are the new features in CSS3.


As CSS is a part of HTML5 now, we have to use CSS for all style related changes. We can't use HTML presentational Attributes for styling, like, align, valign, color, bgcolor etc, and presentational tags like center, font, big tags etc.


CSS3 Features

CSS3 includes all specifications of CSS2, CSS2.1 and CSS3. Here are some new features in CSS3. Here is a list of css3 features.

CSS3 Features
New Features Uses
New Selectors Better Selections of HTML Elements. CSS3 selectors
Shadows Effect Box shadow and text shadow for shadow effects. Box shadow
Rounded Corners Easily round the corners of images and block elements. Border Radius
Gradients Linear, Radial and Repeating gradients for backgrounds. CSS3 Gradients
Opacity Reduce opacity of Elements and Background colors using rbga colors. Opacity
Transitions Hover and Focus element with time and timing functions.CSS3 Transition
Transformations Rotate, Scale, Skew and Translate any object. CSS3 Transform
Animations Animate any object without using flash. CSS3 Animations
Multi Column layout Create multiple columns layouts.
@font face Embedded various fonts family
@media Condition based CSS to create Responsive layouts.

Viewport width and viewport height

CCS3 introduced some new units for font size. These units are vw, vh and vmin. Viewport width or Viewport height are related to device viewport. They even increase or decrease if browser's window size is changed.

1vw = 1% of viewport width.

1vh = 1% of viewport height.

1vmin = 1% vw or vh, whichever is smaller.

1vmax = 1% vw or vh, whichever is larger.

Use of viewport Width and Height

Header 1

Header 2

This is a paragraph with font size 2vw.

<style>                    
h1{ 
    font-size:5vw;
}
h2{
    font-size:4vw;
}
p{    
    font-size:2vw;
}
</style>

<h1>Header 1</h1>          
<h2>Header 2</h2>          
<p>This is a paragraph</p>          
           

1vw= 13.66px if screen resolution is 1366*768

1vw= 14.4px if screen resolution is 1440*900

1vw= 3.6px if screen resolution is 360*640

1vh= 6.4px if screen resolution is 360*640

vw and vh browser support

Chrome Firefox Safari Internet Explorer Edge
34+ 19+ 7+ 10+ 12+

CSS3 Browsers Compatibility

CSS3 is supported in html5 based browsers only. IE 8 and lesser doesn't support CSS3 and its features. IE 9 Supports CSS3, but not fully.. Some features are missing. But IE10 and above, Edge, Chrome 4, Firefox 4, Safari 5.1 and above browsers supports css3. For better user experience, please use latest browsers.

Chrome Firefox Safari Internet Explorer Edge
4+ 3.6+ 5.1+ 9+ 12+

Vendor Specific prefix

To Avoid cross browser compatibility of css3 based properties in latest and old browsers, user vendor specific prefix.


<style>
.logo{
border-radius:10px;            /*For all Latest Browsers*/
-webkit-border-radius:10px;    /*For Chrome & Safari */
-moz-border-radius:10px;       /*For Mozilla Based Browsers*/
-ms-border-radius:10px;        /*For IE 9 and above*/
-o-border-radius:10px;         /*For Opera 11 and above browsers*/
}  
</style>