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!