Grid by Example
We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.
Link tags: css3
84
IE-friendly mobile-first CSS with Sass 3.2
Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).
CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
The CSS3 Test
A really handy test site from Lea that reports your browser’s recognition of CSS properties.
HTML5 Please
This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.
Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
deCSS3 - a bookmarklet for graceful degradation.
This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.
Learn You a Flexbox for Great Good! | The Haystack.
Stephen gives an excellent run-down of flexbox and how you can use it today.
Leaving Old Internet Explorer Behind — Joni Korpi
Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.
Typography Effects with CSS3 and jQuery
Most of these are pretty over the top but they’re good proofs of concept.
HTML5 and CSS3 Advent 2011
Here’s a geek advent calendar I missed. There are some great CSS techniques here.
Polyfilling The HTML5 Gaps With JavaScript
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher
If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.
Animatable: One property, two values, endless possiblities
Lea documents a whole bunch of CSS animation possibilities.
#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.
zomigi.com » Essential considerations for crafting quality media queries
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
CSS3 Secrets 10 things you might not know about CSS3
This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).
Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices
This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.
dConstruct and Responsive Design - Ubelly
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).