CSS 3A New Standard For Web Design
What is CSS 3?
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.
A New “Modular” Approach
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.
The New CSS 3 Modules
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.
Selectors
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)
Attribute Selectors
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’.
CSS Color
: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.
CSS Color
:hsl & :hsla› Along with RGB, you can now use Hue,
Saturation, and Lightness values.
CSS Color
opacity:› Allows you to set the opacity of an
element.
CSS Color
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.
CSS Background
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;
CSS Background
background-size:› Allows you to specify the size of the
background image in question
CSS Borders
border-image: › Allows you to create image borders around
your elements.
CSS Borders
border-radius:› Allows you to create rounded corners in
your elements
CSS Borders
box-shadow: › Allows you to create a drop shadow effect
on your elements.
Media Queries
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: ) {…}
Profiles
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).
Best Practices & Useful Tips
Be weary of any module below Candidate Recommendation in a Production Environment.
Best Practices & Useful Tips
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.
Best Practices & Useful Tips
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.
Best Practices & Useful Tips
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.
Wrap Up
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!
Top Related