Published on

CSS 3 New Features and Uses

Published in: Technology
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1.  CSS 3 Stands for Cascading Style Sheets Level 3. CSS 3 is actually not a replacement for CSS2. CSS 3 is actually an extension to the CSS 2.1 specification which was published May 1998. CSS 3 work began around the time the CSS 2 specification was published for recommendation. Some of the earliest drafts were published June 1999.
  2. 2.  CSS 3 will extend the CSS 2.1 standard with smaller specification documents called “Modules.” The Good News: This overly preserves backward compatibility with CSS 2.1. All the features that are in CSS 2.1 will be in CSS 3. The Bad News: Browsers can pick and choose which modules they want to adopt. This creates a more chaotic development environment and therefore slower adoption rate.
  3. 3.  Different Modules have different adoption rates. Some have been pushed for recommendation by the W3C, some have been dropped entirely. It is recommended to stay with W3C Recommended (REC), Proposed Recommended (PR), and Candidate Recommended (CR) modules for production environments. Working drafts and Announcements should be reconsidered for implementation into any environment due to the early nature and instability across browsers at this time. One important thing to remember: just because a module has been pushed for recommendation, doesn’t mean a browser will automatically adopt it.
  4. 4.  Alternate Row Styling › :nth-child , :first-of-type, :last-of-type Examples › Every odd element - :nth-child(odd) › Every even element - :nth-child(even) › Every third element - :nth-child(3n) › Third element only - nth-child(3) › First Two elements - :nth-child(-n+2) › Last two elements - :nth-last-child(-n+2) › Everything but first and last elements - :not(:first- of-type):not(:last-of-type)
  5. 5.  Allows you to set conditional styles based upon element attributes Examples › [att^=val] – Represents an element with the att attribute whose value begins with the ‘val’ prefix. › [att$=val] - Represents an element with the att attribute whose value ends with the ‘val’ suffix. › [att*=val] - Represents an element with the att attribute whose value contains at least one instance of the substring ‘val’.
  6. 6.  :rgba › RGB is already part of the CSS 2.1 spec, but the new addition is the „a‟. It stands for alpha. It allows you to set the opacity of the particular element in question.
  7. 7.  :hsl & :hsla › Along with RGB, you can now use Hue, Saturation, and Lightness values.
  8. 8.  opacity: › Allows you to set the opacity of an element.
  9. 9.  Opacity or RGBA? › The opacity effect can be achieved with both opacity and rgba. The key difference is the opacity value sets for the element and all of it‟s children. Rgba only sets the alpha level of its current element.
  10. 10.  Multiple Backgrounds › You can now specify multiple background images in an element. › Examples  background-image: url(image-1.png), url(image-2.png);  background-position: center bottom, left top;
  11. 11.  background-size: › Allows you to specify the size of the background image in question
  12. 12.  border-image: › Allows you to create image borders around your elements.
  13. 13.  border-radius: › Allows you to create rounded corners in your elements
  14. 14.  box-shadow: › Allows you to create a drop shadow effect on your elements.
  15. 15.  Allows you to change styles of elements based the width and height of the viewport. This allows you to dynamically change the style of your page without changing the content. This will enable singular development across devices, including mobile, by dynamically changing how the style displays based upon minimum and maximum widths of the viewport. › @media all and (min-width: ) {…} › @media all and (max-width: ) {…}
  16. 16.  There are also several „Profiles‟ designed to suit different media. › Print – Widely adopted. (LC) status. › TV Profile – Meant to address the color specifications tailored to the needs and constraints of TV devices. (CR Status). › Mobile Profile – Aimed at achieving interoperability between full and constrained mobile devices. (LC Status).
  17. 17.  Be weary of any module below Candidate Recommendation in a Production Environment.
  18. 18.  Think Progressive Enhancement › Website and app visuals that are critical to the user experience should not be dependent on CSS3. CSS3 should be used to enrich and enhance an already fully- functional experience.
  19. 19.  Use Fallbacks › Be sure to list the most important elements first, so it serves as the fallback. › Use alternate style sheets for different browsers or browser-specific syntax as a fallback when appropriate.
  20. 20.  Modernizr › Modernizr is a javascript library that allows you to use the features of HTML5 and CSS 3 while not sacrificing the compatibility of older browsers. › It is a great starting point for developers who have projects or clients that “require” a newer feature but still want to maintain backward compatibility.
  21. 21.  This is by no means an exhaustive list of everything CSS 3 can do. The development is gaining momentum, so be sure to look for changes, new modules, and enhancements in the coming months. I encourage you to try out some of the new features in CSS 3. You will be very surprised at how far it has come. Thanks for listening!