CSS Reset (with HTML5 elements)

http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
http://html5doctor.com/html-5-reset-stylesheet/


An Inside View of the CSS Working Group (w3c)

http://fantasai.inkedblade.net/weblog/2011/inside-csswg/


Image Sizing via CSS Experiments

http://clagnut.com/sandbox/imagetest/

http://unstoppablerobotninja.com/demos/resize/fix/


Fluid Layout Info
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/


Setting up a Print CSS

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/



Image Replacement Techniques


Rundle/Phark Update

Rundle/Phark (text-indent: -5000px) apparently can create performance issues in browsers so the updated method used is:

http://www.dotnetnuke.com/Resources/Blogs/EntryId/3536/New-CSS-Image-Replacement-Technique-to-Improve-Performance.aspx

.hide-text {
         text-indent: 100%;
         white-space: nowrap;
         overflow: hidden; }

HTML Markup
Note: the title attribute acts as a tooltip is some browsers - similar to the alt attribute text on the img element.
<nav class="hide-text" id="social">
<ul>
<li><a id="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a id="twitter" href="#" title="Twitter">Twitter</a></li>
</ul>
</nav>


CSS

/*#social { text-indent: -5000px; } don't use any more, use the .hide-text styling below instead */
#facebook { display: block; background-color: #000; color: #FFF; background-image: url(assets/images/facebook-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }
#twitter { display: block; background-color: #000; color: #FFF; background-image: url(assets/images/twitter-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }
 
/* new technique to speed up performance http://www.dotnetnuke.com/Resources/Blogs/EntryId/3536/New-CSS-Image-Replacement-Technique-to-Improve-Performance.aspx */
.hide-text {
         text-indent: 100%;
         white-space: nowrap;
         overflow: hidden; }






Gilder-Levin


HTML Markup
Note: the title attribute acts as a tooltip is some browsers - similar to the alt attribute text on the img element.
<nav id="social">
<ul>
<li><a id="facebook" href="#" title="Facebook"><span></span>Facebook</a></li>
<li><a id="twitter" href="#" title="Twitter"><span></span>Twitter</a></li>
</ul>
</nav>



CSS

#facebook {position: relative; display: block; width: 48px; height: 48px;}
#facebook span { position: absolute; background-image: url(assets/images/facebook-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }
#twitter {position: relative; display: block; width: 48px; height: 48px;  }
#twitter span { position: absolute; background-image: url(assets/images/twitter-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }



Mezzo Blue List (a bit dated)

http://mezzoblue.com/tests/revised-image-replacement/


Nine Techniques (with great feedback on plusses and minuses)

http://css.dzone.com/news/nine-techniques-css-image-repl




Print CSS - Expand All Hidden Tabs, Accordion Sections


Create a style sheet for media="print".
<link rel="stylesheet" type="text/css" href="style.css" media="print" />

Then in your CSS make sure to style all sections that can be set to display:none through JavaScript to:

#section1 {
    display: block !important;
    visibility: visible;
}

This should make everything print out.




Experiments in CSS


Download these files and comment out or uncomment various embedded styles to see what happens.

Horizontal Display of Global Navigation Links in Unordered List (with gap fix)



Floats


Positioning


Specificity


Styling an Unordered List of People


Typography with CSS



Image Replacement with Rundle/Phark and Gilder/Levin



Image Replacement with Gilder/Levin



Two Images on List Item and a Child Element with Rundle/Phark



CSS Drop Down Menu with IE 8 fix


Note: IE 8 hides the drop down if there is no background color on the ul. There also is rumor of a z-index issue with IE.




Links to Information about CSS


50 New Useful CSS Techniques, Tools and Tutorials

http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/



Be a CSS Team Player: CSS Best Practices for Team-Based Development

http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx


Understanding Specificity

Specificity Wars

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html


CSS Floats 101

http://www.alistapart.com/articles/css-floats-101/


Listamatic (CSS-Styled Lists)

http://css.maxdesign.com.au/listamatic/


CSS3 Generator

http://css3generator.com/


Selectivizr CSS3 pseudo-class and attribute selectors for IE 6-8

http://selectivizr.com/



CSS3 Bookshelf

http://www.steveworkman.com/bookshelf

CSS3 Bookshelf Process Notes

http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/



CSS3 Experiment Our Solar System in CSS3

http://neography.com/journal/our-solar-system-in-css3/



CSS3 Box Shadow and Text Experiments (awesome!)

http://www.zurb.com/playground/css-boxshadow-experiments


CSS3 Flexbox

http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/


CSS Sprites Without Using Background Images

http://www.sohtanaka.com/web-design/css-sprites-wout-background-images/



15-CSS Habits to Develop for Frustrating-Free Coding

http://www.noupe.com/css/15-css-habits-to-develop-for-frustration-free-coding.html



Don't use @import

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/


CSS Rules of Thumb - Mike West

http://mikewest.org/2010/02/CSS-rules-of-thumb




Multiple IE's for Testing Pages


http://www.askvg.com/how-to-run-multiple-internet-explorer-versions-simultaneously/

http://tredosoft.com/Multiple_IE

http://www.positioniseverything.net/articles/multiIE.html

IE Only Stylesheets

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/


JavaScript PNG Fix for IE

http://labs.unitinteractive.com/unitpngfix.php




MezzoBlue Article

Lots of image replacement techniques
http://www.mezzoblue.com/tests/revised-image-replacement/


Negative margins for unordered and ordered lists

The browser sets the margin value for indenting ul and ol so setting a negative margin may not work the same way in every browser. There is no W3C standard for determining the indent value.
http://www.webmasterworld.com/forum83/97.htm


Firefox spacing issue

http://css-tricks.com/forums/viewtopic.php?f=2&t=1588
Same issue.
Adding a 1px border the same color as the background works.
Adding a 0.01px margin to the top of the wrapper worked.
Using “position: relative” on the wrapper, header divs did not work.


List of CSS Contents and Compatibility across browsers

http://www.quirksmode.org/css/contents.html


CSS file error when validating local file

When you use the @charset declaration on your stylesheet it does not validate locally. You can comment it out or remove it for testing. Just remember to put it back in.
If you have trouble validating your CSS with a charset declaration after you have uploaded it to your web server, it may be that there is an invisible UTF-8 byte order mark before the @charset. This may be put there by some editors (Notepad) as outlined in the following text. Notepad may also do this to some script files as well.
“It is a good idea to always declare the encoding of external CSS style sheets. (It is not necessary for CSS embedded in a document.) This is done by adding a statement to the top of the file such as:
@charset “utf-8”;.
Note that this must be the very first thing in the file. It is particularly important if your style sheet contains non-ASCII values for the content property, or refers to non-ASCII element or attribute names or values, but it will also become more important in the future to use such a declaration with any CSS file.
(One thing to watch out for when dealing with CSS is the UTF-8 signature or byte order mark (BOM). This is an optional character at the beginning of a UTF-8 that is added automatically by some editors (such as Windows Notepad), and that indicates that this is a UTF-8 file. Unfortunately, some user agents currently fail to recognize the initial statement in a CSS file if the signature is present. For more information about this, see the Internationalization Working Group FAQ, Unexpected characters or blank lines.)”
http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0390


Some Advanced CSS Techniques

I found this on the Web Standards Group reading list:
http://www.smashingmagazine.com/2009/08/10/mastering-css-advanced-techniques-and-tools/


Working With RGBA Colour

http://24ways.org/2009/working-with-rgba-colour


Useful Coding Solutions for Designers and Developers

http://www.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/


CSS3 Gallery Example

(Uses JQuery)
http://www.3site.eu/examples/gallery/


Drop shadow with CSS for all web browers - Robert's talk

http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/


Creating Beveled Images with CSS

http://www.sitepoint.com/blogs/2010/03/05/creating-beveled-images-with-css/


.