CSS3 resource review: CSS3.info
There are many great resources for CSS3 and in this review, I am going to highlight the CSS3.info website, which encourages examination and study of CSS3 and implementing it for the web. In addition to lots of resource material, the site offers several important and useful sections including a CSS3 Preview of functions and features implemented in current browsers, a Module Status table, and a CSS Selectors Test. The site also has a community news section that includes introductory articles and news concerning interesting CSS3 material.
Figure A
CSS3.info touts itself as the place to go for everything you need to know about CSS3. The resource offers frequent updates on a variety of topics including previews, resources, news, tutorials, modules, W3C, book reviews, browsers, and more.
Module status
Figure B
The CSS3.info site offers a CSS3 Module Status table which splits out the multiple modules and provides the latest update and upcoming information, including proposed, candidate, last call, working draft, announced, and several profiles designed to suit media such as print, TV, mobile, and reader. For instance, the Selectors and CSS Color modules are complete in the proposed recommendation as last updated on December 15, 2009 and October 28, 2010 respectively.
Selectors testing
Figure C
The CSS Selectors Test helps you determine if your browser is compatible with the large number of CSS selectors. Once you start the CSS Selectors test, you can click on each selector to see the results, including a small example and explanation for each of the tests.
I ran a CSS Selectors Test on IE 8 and 20 and of the 41 selector’s passes, 1 was buggy and 20 were unsupported; a total of 574 tests were run with only 345 passing. Some of the failed selectors included 2 out of 7 for the E[attribute], which included the test for div[align] { }, with the note, “The CSS selector should match the HTML fragment because the align attribute is present and is empty.” On the :nth-child selector, 47 out of 88 tests failed, including the test for div :nth-child(1) { }, with the note, “The CSS selector should match the marked element, because it is the first and only child of the outer div element.”
Running the selectors test on Firefox 6.02 from the 41 selectors, there were 41 passes, with 0 being buggy, and 0 unsupported; all 547 of the tests passed, and Chrome 13.0.782.220 m had the same results.
Previews
Figure D
The CSS3 Previews section provides a showcase of some of the exciting new functions and features as they are implemented in Firefox, Konqueror, Opera, or Safari/Webkit. Several of the available previews include borders, backgrounds, color, text effects, user interface, selectors, and web fonts.
News
Figure E
The Community News section provides information, introductory articles, and news concerning interesting CSS3 material including such topics as “CSS Animation Principles and Examples,” “Animated notification messages with CSS and JQuery,” and “Little-Known CSS3 Typographic Features,” just to name a few examples.
The CSS3.info website is a great resource with which to start your CSS3 stylesheets, allowing you to find inspiration, learn new techniques, and add more impact to your website designs.