Web Directions @media 2010

Slides for this presentation are now available on Slideshare or to download as PDF. The example files used in these slides can be downloaded here. Please note these examples are essentially rough and ready demos. Where I’ve added some jQuery to replace the CSS3 properties I have just popped it inline – in the real world you would want to wrap this stuff in conditional comments or test for support etc. They just serve to show how this stuff works at the most simple level.

Resources

• When Can I Use: compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
• css3.info
• Lots of useful stuff at dev.opera.com
• jQuery look: Tim Van Damme – recreating CSS3 effects in non-supporting browsers using jQuery

Selectors

• Selectors module
• 24 Ways: Cleaner Code with CSS3 Selectors
• Sitepoint CSS Reference: nth-child

Fonts

• Fonts module
• A List Apart: Web Fonts at the Crossing
• 24 Ways: Designing for the Switch

Color

• Color module
• 24 Ways: Working with RGBA Color

Background and Borders

• Background and Borders module
• Snook.ca: Multiple backgrounds and CSS Gradients
• Opera Developer Community: Beautiful UI Styling with CSS3

Media Queries

• Media Queries
• A List Apart: Responsive Web Design

JavaScript

• ie-css3.js
• Modernizr
• eCSStender