CSS

Created 2011 February 25. Modified 2011 April 20.

Reference

• CSS 2.1 (w3.org)
  • Properties
  • Index
• CSS 3 Roadmap (w3.org)

Reading

• CSS (w3.org)
  • Articles and Tutorials
  • Current Work
• CSS Current Status (w3.org)
• HTML & CSS (w3.org)
  Overview of HTML and CSS

Tools

• CSS3 Generator (css3generator.com) Handy!

Performance

• Don't use ID selectors in CSS (Dave Gregory 2011 screwlewse.com)
• Don't use IDs in CSS selectors? (Oli Studholme 2011 oli.jp)

Vendor Prefixes

Standards and new stuff hand-in-hand, brilliant!

• How to avoid common CSS3 mistakes (Chris Coyier 2011 March netmagazine.com)

Techniques

• Wrapping Long URLs and Text Content with CSS (Jeff Starr 2010 June perishablepress.com)

Hiding Content

• Hiding Content for Accessibility (Snook 2011 February snook.ca)
• When and How to Visually Hide Content (Dennis Lembree 2011 March designfestival.com)

Containing Floats

• Better float containment in IE using CSS expressions (Nicolas Gallagher 2011 April nicolasgallagher.com)
• A new micro clearfix hack (Nicolas Gallagher 2011 April nicolasgallagher.com)
• clearfix Reloaded + overflow:hidden Demystified (Thierry Koblentz 2010 September yuiblog.com)
• IE less than 8 will contain floats given the following: .contain {display:inline-block;} .contain {display:block;} The first line makes the element hasLayout true and therefore contain floats. The second line makes the element display as a block again.
• A more reliable way to clear floats without structural markup (tjkdesign.com)
• Methods for Containing Floats (ejeliot.com)
• 9.4.1 Block formatting contexts - Visual formatting model (w3.org)
• Containing Floats Made Easy! (visibilityinherit.com)

  .clearfix:after {
  	content:" "; 
  	display:block; 
  	height:0;
  	font-size:0; 
  	clear:both; 
  	visibility:hidden;
  }
  .clearfix {display:inline-block;}
  /* mac hide \*/
  * html .clearfix {height:1%;}
  .clearfix {display:block;}
  /* End hide */

• Contained Floats, enclosing floats with pure CSS known as the clearfix technique (csscreator.com)

  .floatcontainer:after{
  	content: ".";
  	display: block;
  	height: 0;
  	font-size:0;
  	clear: both;
  	visibility:hidden;
  }
  .floatcontainer{
  	display: inline-block;
  }
  /* Hides from IE Mac \*/
  * html .floatcontainer {height: 1%;}
  .floatcontainer{display:block;}
  /* End Hack */

• The New Clearfix Method (perishablepress.com)

  /* new clearfix */
  .clearfix:after {
  	visibility: hidden;
  	display: block;
  	font-size: 0;
  	content: " ";
  	clear: both;
  	height: 0;
  }
  * html .clearfix             { zoom: 1; } /* IE6 */
  *:first-child+html .clearfix { zoom: 1; } /* IE7 */

• ClearFix is out! We're moving on (nclud.com)

  .clear {
  	display:inline-block;
  }
  .clear:after {
  	display:block; 
  	visibility:hidden; 
  	clear:both; 
  	height:0; 
  	content: "."; 
  }