Adactio: Links

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).

Sizing with CSS3’s vm and vh units - Snook.ca

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.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

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.

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

Bruce Lawson’s personal site : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

Let the Web move you-CSS3 Animations and Transitions | Web Directions

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 Weil

Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.

Layer Styles

A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

Font sizing with rem - Snook.ca

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 Emery Online: Response

David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.

FFFFALLBACK - A simple tool for bulletproof web typography.

A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.

Media Query Test

Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.

Madmanimation

Andy just debuted this at An Event Apart—lovely stuff.

Ribot - interface innovation

Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.

Showcase: Pop-Up Book in HTML and CSS | eleqtriq

A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

The New Bulletproof Font-Face Syntax | Fontspring

Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.

Getting to work with new web technologies

This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.

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

Adding CSS3 support to legacy versions of Internet Explorer using JavaScript. I like the fact that, although it requires a JavaScript library, it works with multiple libraries.

The Year in Pictures: Passages — USA TODAY

A really nice example of responsive web design from an unexpected source.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

Deaxon's CSS playground

A very impressive collection of CSS demos using no JavaScript. I like the clever use of :target to create tab functionality.

Yiibu - About this site...

A great explanation of the responsive enhancement of this site.

David DeSandro

Drag the text 'round for a bit of fun.

With Good References — Unstoppable Robot Ninja

Ethan shares his thoughts on the role of the reference design in the responsive workflow.

Lost World's Fairs

Lovely typographic showcases from Stan and friends.

Webtype

The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.

A List Apart: Articles: Prefix or Posthack

An excellent argument in favour of vendor prefixes in CSS, from Eric.

Is CSS3 part of HTML5?

Just in case you forget.

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

Jon gets flexible. This is the mark of a true web designer.

Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher — Blog & Ephemera

A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.

Google Font Directory

Google-hosted free-as-in-beer webfonts.

FontDeck: Exclusive Sneak Peek | Design Shack

Get a glimpse behind Fontdeck's curtain.

Doctor Who: The WebKit Implementation

A (webkit-only) CSS3/HTML5 take on the Doctor Who opening titles.

WOFF File Format 1.0 Submission Request to W3C

Microsoft, Mozilla and Opera have formally submitted the WOFF font format to the W3C.

CSS3 Background-Clip Text & @font-face

A lovely bit of CSS3.

border-image-generator - In Case of Stairs

A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.

CSS3 Please! The Cross-Browser CSS3 Rule Generator

Edit some CSS rules and this in-browser code editor will automatically update related browser-specific declarations.

CSS Border Radius

A handy shortcut for when you just can't recall the exact syntax of border-radius.

Times Skimmer by The New York Times

Beautifully done with HTML5 and font linking.

Web fonts test

Test cases for font-linking.

High Performance Web Sites :: @font-face and performance

Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.

@font-face

A quick, slick primer on font linking.

@font-face in Depth

A good look at choosing fonts for font linking.

CSS3 And Me « Trent Walton

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.

Bulletproof @font-face syntax « Paul Irish

Getting font-linking to work in all browsers.

The Font-as-Service | i love typography, the typography and fonts blog

Elliot gives a rundown of the font delivery services for the web that are on the way.

Font in your face | Nimbupani Designs

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.

How to create EOT files without Microsoft WEFT — Edward O’Connor

@font-face for all — Ted shows how to convert TTF files to EOT using the command line.

Kernest.com | @font-face central

Another font-linking service is on the way.

HTML5 Video + CSS Visual Effects

Experimenting with CSS3 and HTML5 features implemented in Webkit.

CSS3 – a big storm is coming | Reinhold Weber

A nice rundown of media queries and multiple columns in CSS3.

beautiful fonts with @font-face at hacks.mozilla.org

A good description of how font linking works.

Dinky pocketbooks with WebKit transforms | Natalie Downe

This is just brilliant! Natalie has taken the Flash-based Pocketmod and reproduced it using HTML and CSS (including CSS transforms).

The League of Moveable Type

"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."