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.
Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
A really handy test site from Lea that reports your browser’s recognition of CSS properties.
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.
Stephen gives an excellent run-down of flexbox and how you can use it today.
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.
Most of these are pretty over the top but they’re good proofs of concept.
Here’s a geek advent calendar I missed. There are some great CSS techniques here.
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.
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.
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
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.
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).
Once again I’m getting all my CSS3 information from Jonathan. This time he’s discovered the vw and vh units which allow you to specify sizes relative to the size of the viewport.
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.
John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.
Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.
David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
Andy just debuted this at An Event Apart—lovely stuff.
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.
A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.
This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.
A really nice example of responsive web design from an unexpected source.
37 Signals document their experiments with responsive web design. Looking good.
A great explanation of the responsive enhancement of this site.
Drag the text 'round for a bit of fun.
Ethan shares his thoughts on the role of the reference design in the responsive workflow.
Lovely typographic showcases from Stan and friends.
The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.
An excellent argument in favour of vendor prefixes in CSS, from Eric.
Just in case you forget.
Jon gets flexible. This is the mark of a true web designer.
A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.
Google-hosted free-as-in-beer webfonts.
Get a glimpse behind Fontdeck's curtain.
A (webkit-only) CSS3/HTML5 take on the Doctor Who opening titles.
Microsoft, Mozilla and Opera have formally submitted the WOFF font format to the W3C.
A lovely bit of CSS3.
A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.
Edit some CSS rules and this in-browser code editor will automatically update related browser-specific declarations.
A handy shortcut for when you just can't recall the exact syntax of border-radius.
Beautifully done with HTML5 and font linking.
Test cases for font-linking.
Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.
A quick, slick primer on font linking.
A good look at choosing fonts for font linking.
It's not very often, I must confess, that I see a poem about CSS. You know a technology is in its prime when people start talking about it in rhyme.
Getting font-linking to work in all browsers.
Elliot gives a rundown of the font delivery services for the web that are on the way.
A good, clear-headed summation of font linking.
Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog
A great round-up on the current state of web typography following TypeCon 2009.
@font-face for all — Ted shows how to convert TTF files to EOT using the command line.
Another font-linking service is on the way.
Experimenting with CSS3 and HTML5 features implemented in Webkit.
A nice rundown of media queries and multiple columns in CSS3.
A good description of how font linking works.
This is just brilliant! Natalie has taken the Flash-based Pocketmod and reproduced it using HTML and CSS (including CSS transforms).
"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."
A blog of all things webkit, itself showcasing some of the CSS niceties in the rendering engine.
An excellent take on font-linking from someone who designs typefaces for a living.
Mark Pilgrim knows the score.
The slides from Richard's superb Skillswap presentation.
The selector of the beast does not exist.
Brian shows some clever uses of the little-known :target pseudo-class.
WebKit continues to steam ahead. Now with CSS transforms; you can scale and rotate your elements.