Skip to navigation | Skip to content

Share your knowledge. Make a difference.

CSS 3 Tips

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 0 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #11231 in Tech & Geek, #229026 overall

Rated G. (Control what you see)

What Is CSS 3?

 

CSS 3 Demo Page

CSS 3 is the next version of the CSS (Cascading Style Sheet) specification, and a current working draft by the Wirld Wide Web Consortium (W3C). The draft attempts to monularize the specification to allow easier updating in the future. Here's the abstract of the current draft (retrieved December 10th 2007):

"The members of the CSS&FP Working Group have decided to modularize the CSS specification. This modularization will help to clarify the relationships between the different parts of the specification, and reduce the size of the complete document. It will also allow us to build specific tests on a per module basis and will help implementors in deciding which portions of CSS to support. Furthermore, the modular nature of the specification will make it possible for individual modules to be updated as needed, thus allowing for a more flexible and timely evolution of the specification as a whole."

Major Updates in CSS 3 

In addition to modularization, there are several other major additions or changes in CSS 3. Here are the ones that should be most interesting to web designers.
  • Multi-Column Layout
  • New Selectors
  • Improved Color Control

Multi-Column Layouts in CSS 3 

The multi column layout module in CSS 3 adds functionality to flow the content of an element into multiple columns. This will be important in designing CSS layouts, because the space on wide screen resolutions can be more effectively used without forcing long lines of text.

Firefox has partial support of the functions of CSS 3 multi column layout: It supports -moz-column count, -moz-column width and a few other CSS attributes. They work like column-width and column-count in the CSS 3 draft module do.

CSS 3 Selectors 

In addition to the selectors found in CSS 2, many additional selectors are added. The most useful of the many new CSS 3 selectors are the attribute selectors [a^=v], [a$=v] and [a*=v], and the nth-child selector.

With the attribute selectors, targeting only some elements is easy without the need of adding classes. Targeting all images from a certain location, all links with a certain relationship, etc. is very simple. The newest browser versions support these selectors, though some incompletely.

The nth-child selector allows highlighting of every other row in a table, of every other paragraph in a long piece of text, or many other meat tricks. The selector is supported partially by the current version of Firefox.

Color Improvements in CSS 3 

The most widely supported and the most interesting addition to color handling in CSS 3 is alpha support. This functions both through opacity, and the new RGBA color values. Opacity works in all major browsers except Internet Explorer. RGBA colors are currently only supported by Safari 3 and Firefox 3 beta.

CSS Guidebooks 

Brought to you by Amazon

CSS Mastery: Advanced Web Standards Solutions

Amazon Price: $23.09 (as of 12/02/2008) Buy Now

CSS: The Missing Manual

Amazon Price: $23.09 (as of 12/02/2008) Buy Now

Head First HTML with CSS & XHTML

Amazon Price: $26.39 (as of 12/02/2008) Buy Now

Comments 

Anything to Add?

If you have anything to add, please let us know what you think are the most interesting additions in CSS 3.

Lensmaster

suppeerrgurl25 wrote

thanks for the info!

Reply Posted September 20, 2008

Lensmaster

suppeerrgurl25 wrote

thanks for the info!

Reply Posted September 20, 2008

Lensmaster

suppeerrgurl25 wrote

thanks for the info!

Reply Posted September 20, 2008

Lensmaster

suppeerrgurl25 wrote

thanks for the info!

Reply Posted September 20, 2008

Lensmaster

suppeerrgurl25 wrote

thanks for the info!

Reply Posted September 20, 2008

 
1 of 2 pages
X
Sutocu

About Sutocu

Sutocu is a web designer and an Internet marketer - simply for the challenge. He likes to share everything he has learned with other marketers.

Sutocu's Pages

See all of Sutocu's pages

X

Happy holidays!

The red bow is special. Whenever you see a red bow on a Squidoo page, it means the page is raising money for charity.

Buy something from the page, and we'll automatically make a donation to charity, thanks to you.