{"id":217,"date":"2011-09-27T14:17:50","date_gmt":"2011-09-27T19:17:50","guid":{"rendered":"http:\/\/www.rymocs.com\/blog3\/?p=217"},"modified":"2011-09-27T14:17:50","modified_gmt":"2011-09-27T19:17:50","slug":"css3-resource-review-css3-info","status":"publish","type":"post","link":"http:\/\/www.rymocs.com\/blog3\/2011\/09\/27\/css3-resource-review-css3-info\/","title":{"rendered":"CSS3 resource review: CSS3.info"},"content":{"rendered":"

There are many great resources for CSS3 and in this review, I am going to highlight the CSS3.info<\/a> 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.<\/p>\n

Figure A<\/h4>\n

\"\"<\/a><\/p>\n

CSS3.info<\/a> 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.<\/p>\n

Module status<\/h2>\n

Figure B<\/h4>\n

\"\"<\/a><\/p>\n

The CSS3.info site offers a CSS3 Module Status<\/a> 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.<\/p>\n

Selectors testing<\/h2>\n

Figure C<\/h4>\n

\"\"<\/a><\/p>\n

The CSS Selectors Test<\/a> 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.<\/p>\n

I ran a CSS Selectors Test on IE 8 and 20 and of the 41 selector\u2019s 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]<\/em>, which included the test for div[align] { }, with the note, \u201cThe CSS selector should match the HTML fragment because the align attribute is present and is empty.\u201d On the :nth-child<\/em> selector, 47 out of 88 tests failed, including the test for div :nth-child(1) {\u00a0 }<\/em>, with the note, \u201cThe CSS selector should match the marked element, because it is the first and only child of the outer div element.\u201d<\/p>\n

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.<\/p>\n

Previews<\/h2>\n

Figure D<\/h4>\n

\"\"<\/a><\/p>\n

The CSS3 Previews<\/a> 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.<\/p>\n

News<\/h2>\n

Figure E<\/h4>\n

\"\"<\/a><\/p>\n

The Community News<\/a> section provides information, introductory articles, and news concerning interesting CSS3 material including such topics as \u201cCSS Animation Principles and Examples,\u201d \u201cAnimated notification messages with CSS and JQuery,\u201d and \u201cLittle-Known CSS3 Typographic Features,\u201d just to name a few examples.<\/p>\n

The CSS3.info<\/a> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/posts\/217"}],"collection":[{"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":1,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":218,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/posts\/217\/revisions\/218"}],"wp:attachment":[{"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rymocs.com\/blog3\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}