CSS3

CSS3 is the 3rd level and latest version of CSS, the stylesheet language of web used to control the styling of a website. CSS3 or CSS Level 3 is the latest version of css. CSS3 includes CSS 1, CSS 2, CSS 2.1 ( previous version of css) and CSS3 specifications . CSS3 is the third level of CSS specifications.

CSS3 is integral part of HTML5

CSS2 Vs CSS3
CSS2 Vs CSS3

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 presentational tasks. 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 CSS1, CSS2, CSS2.1 and CSS3. Here are some new features in CSS3. Here is a list of css3 features.

CSS3 Features
CSS3 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.
Flexbox Flexbox is used to build one dimensional or 1d layout is CSS3.
Grids CSS3 Grids are used to build two dimensional or 2d layout is CSS3.
@font face Embedded various fonts family. Font Face
@media Condition based CSS to create Responsive Web Design.

CSS3 viewport width and viewport height

CSS3 introduced some new units for width, height and font size. These units are vw, vh and vmin. Viewport width or Viewport height are related to device viewport, i.e visible screen of device to user.

viewport width vs viewport height
viewport width (vw) Vs viewport height (vh)

How to use viewort width and viewport height?

  1. 1vw = 1% of viewport width.
  2. 50vw = 50% of viewport width.
  3. 100vw = 100% of viewport width.
  4. 1vh = 1% of viewport height.
  5. 50vh = 50% of viewport height.
  6. 100vh = 100% of viewport height.
  7. 1vmin = 1% vw or vh, whichever is smaller.
  8. 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>   
.box{
    height:100vh;
}                         
h1{ 
    font-size:5vw;
}
h2{
    font-size:4vw;
}
p{    
    font-size:2vw;
}
</style>

<div class="box">
    <h1>Header 1</h1>          
    <h2>Header 2</h2>          
    <p>This is a paragraph</p>  
</div>        
           

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+

CSS3 Vendor Specific prefixes

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

CSS3 Prefixes

  1. -webkit-
  2. -moz-
  3. -ms-
  4. -o-

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

Webkit layout engine was developed by Apple is also used by Mozilla and Edge browsers now.