J’ai regroupé dans cet article l’ensemble de mes bookmarks (merci delicious!) en rapport avec l’HTML5 et la CSS3. Plusieurs centaines de liens qui devraient pouvoir intéresser un certain nombre de développeurs web. Il y a un peu de tout et ce n’est pas franchement organisé mais c’était ça ou rien Des tutoriels, des guides, des exemples, des générateurs, des fichiers .pdf : vraiment de quoi égayer vos longues soirées asociales et étancher votre soif de connaissance (si l’on peut dire). Vous trouverez peut être quelques doublons dans cette sélection mais je n’avais ni le temps ni l’envie de la vérifier. Non mais faudrait vraiment tout faire dans cette baraque ! En l’état ces liens m’ont déjà beaucoup aidé mais libre à vous de compléter cette liste par l’intermédiaire des commentaires : toutes vos trouvailles sont les bienvenues ! NightAngel.fr est partiellement HTML5-friendly et ceux qui viennent avec Safari ou Chrome auront déjà noté l’injection de CSS3 à haute dose
Préambule
Preamble
Tous les navigateurs ne supportent pas l’HTML5 et encore moins la CSS3 ; vous trouverez les compatibilités dans les liens suivants. L’HTML5 ne pose pas de problème particuliers sur les navigateurs récents (Firefox, Safari, Chrome, etc) autres que Internet Explorer. La version 9 d’Internet Explorer devrait supporter l’HTML5 mais en attendant il est nécessaire d’utiliser un hack javascript pour les versions d’IE inférieures à 9. Pour cela il suffit d’ajouter cette ligne entre les balises HEAD de votre page (dans header.php pour ceux qui souhaitent passer leur blog WordPress en HTML5) :
All browsers don’t supports HTML5 and CSS3… much less ; you’ll find compatibility in the following links. No particular problems with HTML5 on recents browsers (Firefox, Safari, Chrome, etc) others than Internet Explorer. Internet Explorer v9 should support the HTML5 but in the meantime it’s necessary to use a javascript hack for IE versions lower than 9 :
?[Copy to clipboard]View Code HTML4STRICT1
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Un petit mot également quant aux incompatibilités de la CSS3 avec certains navigateurs. Selon moi, à l’heure actuelle, seuls les navigateurs basés sur le moteur de rendu Webkit (Safari, Chrome, etc) offrent une compatibilité et un résultat satisfaisants. La version stable actuelle (3.6) de Firefox est limitée à ce niveau là puisqu’elle reste basée sur la version 1.9.2.3 du moteur de rendu Gecko. Tout devrait rentrer dans l’ordre avec la version 3.7 (actuellement en Alpha4) qui sera basée sur Gecko 1.9.3. Voilà, c’est tout !
A word also about the CSS3 incompatibilities with some browsers. In my opinion, for the moment, only browsers based on Webkit rendering-engine (Safari, Chrome, etc) have a good compatibility. The current stable version (3.6) of Firefox is limited at this level : it’s based on v1.9.2.3 of Gecko rendering-engine. Everything should return to normal with version 3.7 (Alpha4 currently) will be based on Gecko 1.9.3. That’s it !
SmashingMagazine.com
08.01.2009 – Push Your Web Design Into The Future With CSS3 par Chris Spooner.
15.06.2009 – Take Your Design To The Next Level With CSS3 par Inayaili de Leon.
06.07.2009 – HTML 5 Cheat Sheet.
13.07.2009 – CSS3 Cheat Sheet.
16.07.2009 – HTML5 and The Future of the Web par Tim Wright.
04.08.2009 – Coding an HTML 5 Layout From Scratch par Enrique Ramirez.
02.12.2009 – Pushing Your Buttons With Practical CSS3 par ZURB.
16.12.2009 – Stronger, Better, Faster Design with CSS3 par ZURB.
25.01.2010 – The New Hotness: Using CSS3 Visual Effects par ZURB.
01.02.2010 – 50 Brilliant CSS3/JavaScript Coding Techniques.
01.03.2010 – The Future Of CSS Typography par Inayaili de Leon.
28.04.2010 – CSS3 Solutions for Internet Explorer par Louis Lazaris.
1stwebdesigner.com
04.12.2009 – 22 Advanced CSS Text Effects And Web Typography Tips par Dainis Graveris.
11.12.2009 – 33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles par Dainis Graveris.
28.02.2010 – 50 Awesome CSS3 Animations par Yanuar Prisantoso.
24.03.2010 – 22 Handy HTML5 & CSS3 Tools, Resources And Guides par Daniels Mekšs.
05.04.2010 – Amazing CSS3 Techniques You Can’t live Without par Jared White.
27.04.2010 – How to use CSS3 Orientation Media Queries par Ryan Seddon.
opera.com
13.12.2006 – Improve your forms using HTML5! par Anne Van Kesteren.
25.10.2007 – Styling Forms with Attribute Selectors – Part 1 par Christopher Schmitt.
09.01.2008 – Progressive Enhancement with CSS3: A Better Experience for Modern Browsers par Peter Gasston.
21.02.2008 – CSS text shadows and background sizing par Christopher Schmitt.
21.08.2008 – CSS 3 attribute selectors par Christopher Schmitt.
08.01.2009 – HTML 5 Canvas—The Basics par Mihai Sucan.
html5doctor.com
16.06.2009 – Headers in HTML 5 par Richard Clark.
18.06.2009 – The Video Element par Tom Leadbetter.
20.06.2009 – How to get HTML5 working in IE and Firefox 2 par Remy Sharp.
30.06.2009 – Designing a Blog with HTML 5 par Bruce Lawson.
02.07.2009 – HTML 5 + XML = XHTML 5 par Bruce Lawson.
09.07.2009 – Native Drag and Drop par Remy Sharp.
17.07.2009 – HTML 5 Boilerplates par Remy Sharp.
zenelements.com
CSS3 rgb & rgba par Alex (twitter).
CSS3 hsl & hsla par Alex (twitter).
CSS3 Opacity par Alex (twitter).
CSS3 Gradients par Alex (twitter).
CSS3 RGB & RGBA par Alex (twitter).
CSS3 Background Images (Sizing and Multiple Images) par Alex (twitter).
CSS3 Box & Images Shadows par Alex (twitter).
CSS3 Text Shadow par Alex (twitter).
CSS3 Multiple Columns par Alex (twitter).
css3 embed a font face par Alex (twitter).
westciv.com
Style Master CSS Editor for Windows and Mac OS X.
Text Shadow.
CSS3 Property Tests.
Apple’s Navigation Bar Using Only CSS
admixweb.com
08.03.2010 – How to Create a Fancy Image Gallery with CSS3 par Teylor Feliz .
16.03.2010 – Creating an Animated CSS3 Horizontal Menu par Teylor Feliz .
12.05.2010 – Creating a Bubble Coda Style with CSS3 par Teylor Feliz .
css3.info
HSLA Colors.
HSL Colors.
Opacity.
Border-image: Using Images for Your Border.
Word-Wrap.
Border-radius: create rounded corners with CSS.
Box-shadow, one of CSS3’s best new features.
Css3 Attribute selectors.
18.11.2006 – A border-radius solution with CSS3 par Peter Gasston.
04.01.2007 – Vendor Specific Extensions to CSS3 par Joost de Valk.
06.01.2007 – Using CSS3 selectors to highlight hyperlinks par Peter Gasston.
16.01.2007 – Semantic Code: Put More In, Get More Out par Peter Gasston.
15.07.2007 – Using CSS 3 selectors to apply link icons par Peter Gasston.
30.07.2007 – A Mock-Up Interface Using CSS3 Color par David Storey.
18.09.2007 – Liquid Faux Columns with Background-Size par Peter Gasston.
13.02.2008 – Making an Image Gallery with :Target par Peter Gasston.
28.02.2008 – Tooltips with CSS3 par James Hopkins.
08.07.2009 – A Marriage Made in Heaven? HTML 5 and CSS3 par Frederick Townes.
w3.org
CSS Color Module Level 3.
CSS Template Layout Module.
Cascading Style Sheets Current Work de w3.org
W3C: Selectors
CSS Working Group Blog
W3C’s CSS3 Roadmap
HTML 5 differences from HTML 4
The Web Developer’s Guide to HTML 5
Accessibility Features of CSS
css4design.com
07.07.2009 – Quelques notes, beaucoup de liens (et un peu de mauvaise foi) sur HTML5
21.10.2009 – HTML5 et CSS pour l’intégrateur web
02.02.2010 – HTML5 — Une orientation encore trop « littéraire » et pas assez « web »
14.03.2010 – Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
20.03.2010 – HTML5 — Pas de balise aside dans un hgroup ?
19.04.2010 – Générateurs de CSS3 pour tous les navigateurs (ou presque)
24.04.2010 – HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»
CSS3 & HTML5 : Storm Links !
10.08.2010 – 70 Must-Have CSS3 and HTML5 Tutorials and Resources par Ray Cheung de webappers.com.
04.12.2007 – A Preview of HTML 5 par Lachlan Hunt de alistapart.com.
12.04.2010 – 7 Useful CSS3 Code Generators par Ferman de pelfusion.com.
09.05.2010 – Everything You Need to Know about CSS3 Color Techniques par Aygul Zagidullina de pelfusion.com
12.07.2009 – CSS3 Color Names
04.05.2008 – Not As Clear As It Seems: CSS3 Opacity and RGBA par Tim Kadlec de timkadlec.com.
23.03.2010 – Quick Tip: Understanding CSS3 Gradients par Jeffrey Way de tutsplus.com.
19.05.2008 – Introduction to CSS3 – Part 5: Multiple Columns par David Appleyard de designshack.co.uk.
13.05.2008 – Introduction to CSS3—Part 4: User Interface par David Appleyard de designshack.co.uk.
04.12.2006 – Rounded Corner Boxes the CSS3 Way par Andy Budd de 24ways.org.
02.10.2008 – Overview of CSS3 Structural Pseudo-Classes de javascriptkit.com.
19.02.2009 – Box Shadow par Onsitus de flepstudio.org.
15.02.2010 – Get Started with CSS 3 de webmonkey.com.
10.01.2006 – CSS3 Selectors Explained de 456bereastreet.com.
14.08.2005 – Multiple Backgrounds par Justin Halsall de mind-productions.com.
02.03.2010 – Speed Up with CSS3 Gradients par Chris Coyier de css-tricks.com.
01.02.2008 – Overriding the Default Text Selection Color with CSS par Chris Coyier de css-tricks.com.
31.10.2008 – @font-face in IE: Making Web Fonts Work par Jon Tan de jontangerine.com.
09.12.2008 – The Fundamental Problems with CSS3 par Matt Wilcox de mattwilcox.net.
The CSS3 ‘Box-Sizing’ Concept par James Hopkins de idreamincode.co.uk.
Web Designer’s Browser Support Checklist par findmebyip.com.
CSS3 Generator par Randy Jensen (twitter).
Web Browser CSS3 Support par David Hammond de webdevout.net.
Making Your Backgrounds Transparent with CSS 3 Opacity par Jennifer Kyrnin de about.com.
RGBA – Color with Transparency de greenevillage.net.
HSLA – Color with Transparency de greenevillage.net.
CSS3 Borders Preview de cssportal.com.
CSS Border Radius par Jacob Bijani.
Font-Face Kit Generator de fontsquirrel.com.
Cross Browser CSS3 Rule Generator
SlideShare Presentation: Colors in CSS3 par Lea Verou.
Super Awesome Buttons with CSS3 and RGBA + Démo
CSS at Ten: The Next Big Thing
Fonts Available for @font-face Embedding de webfonts.info.
Six Questions: Eric Meyer on CSS3
Creating a Polaroid Photo Viewer with CSS3 and jQuery par Marco Kuiper de marcofolio.net.
CSS: Transition Timing Functions
CSS Trick: Hidden Messages
The Potential of Web Typography par Ian Lynam & Craig Mod de craigmod.com.
HTML 5 and CSS3: The Techniques You’ll Soon Be Using
When Can I Use… (Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies)
Yes, You Can Use HTML 5 Today!
A Selection of Supported Features in HTML5
HTML5 id/class Name Cheatsheet
Preparing for HTML 5 with Semantic Class Names
HTML 5: Nav Ambiguity Resolved
HTML 5 Drag and Drop + Microformats = a whole world of possibilities
Semantics in HTML 5
Thinking About HTML 5 canvas Accessibility
Comparison of layout engines (HTML 5)
12 resources for getting a jump on HTML 5
More on developing naming conventions, Microformats and HTML5
CSS3 Transparency: The Opacity Property
CSS3 Text-Wrapping
CSS3 Color Names
CSS3 Links Creation and Usage
CSS3 Unleashed: Tips, Tricks and Techniques
When can I use…
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
Vendor-specific Properties
Vendors—browser makers—are free to implement extensions to the CSS specifications that, in most cases, are proprietary to their browser.
CSS: border-radius and -moz-border-radius
Css3 opacity: transparency of an element in css
CSS3 box-sizing attribute
css3 transform
Pure CSS3 AT-AT Walker
Opera logo With CSS
Social Media Icons in Pure CSS
Pure CSS3 Analogue Clock
Realistic Looking Button with CSS3
Super Awesome Buttons with CSS3 and RGBA
Matrix Animation With WebKit CSS3
Speed Up with CSS3 Gradients
Working With RGBA Colour
Cross Browser Pure CSS3 Horizontal Accordion
Cross Browser Pure CSS3 Vertical Accordion
Animated CSS3 Horizontal Menu
Create a Fancy Image Gallery with CSS3
Sliding Navigation without JavaScript
Design a Prettier Web Form with CSS3
Overriding The Default Text Selection Color With CSS
Practical Uses of CSS3
Tabbed Navigation Using CSS3
Quickie CSS3 Tricks with Fallbacks
A Look at Some of the New Selectors Introduced in CSS3
Classic CSS Techniques Made Simple with CSS3
Fun with :target (CSS3)
Make Cool and Clever Text Effects with CSS text-shadow
Animation Using CSS Transforms
Going Nuts with CSS Transitions
The Shadow effect in CSS3
Simple CSS3 Rounded Corners With Support For IE
CSS3 Dropdown Menu
Slick Menu using CSS3
Depth and Nice 3D Ribbons Only Using CSS3
Animated CSS3 Cube using 3D Transforms
Auto Scrolling Parallax Effect without JavaScript
Clever Lists with CSS3 Selectors
Pure CSS Opacity and How to Have Opaque Children
CSS3 Two Column List Layout
Futurebox, Lightbox Without the JavaScript
Hidden Messages
jQuery Style Menu With CSS3
Webkit CSS3 Generator
CSS3 learning tool
Introduction to CSS3
5 Techniques to Acquaint You With CSS 3
30 Essential CSS3 Resources
Dan Cederholm’s Handcrafted CSS Workshop
Introducing the CSS3 Multi-Column Module
Stay on :target with CSS3
CSS3 Exciting Functions and Features: 30+ Useful Tutorials
CSS3 support in Internet Explorer 6, 7, and 8
Keith Clark – IE CSS3 pseudo selectors
47 Amazing CSS3 Animation Demos
The Basics of CSS3
CSS3 Techniques You Should Know
5 CSS3 Techniques For Major Browsers using the Power of jQuery
CSS3 Examples and Best Practices
10 examples of futuristic CSS3 techniques
Browser support for CSS3 and HTML5, We’ve tested all the A-grade browser…
Beautiful CSS3 Search Form
10 Best Tutorials To Learn CSS3
5 CSS3 Design Enhancements That You Can Use Today
CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
Creating Polaroid Style Images with Just CSS
12 Excellent CSS3 Button and Menu Techniques
CSSDesk – Dynamic CSS Sandbox
All There Is To Know About HTML5 and CSS3
Coding a CSS3 & HTML5 One-Page Website Template
15 Useful HTML5 Tutorials and Cheat Sheets
CSS3 rounded corners for every browser ?
CSS3 loading spinners without images
50 Excellent Tutorials for Web Development Using CSS3
HTML 5 And CSS3 Cheat Sheets Collection
47 CSS Tips & Tricks To Take Your Site To The Next Level.
Create Beautiful CSS3 Typography
15 Useful CSS3 and HTML5 Templates and Frameworks
HTML5 Unleashed: Tips, Tricks and Techniques
15 CSS3 Navigation and Menu Tutorials and Techniques
A Collection of HTML5 Resources and Tutorials
Kick-ass CSS3 Support in IE6, 7, and 8
12 Really Useful CSS3 Tips And Techniques
15 Useful Resources to Get Clued Up on HTML5
Table of CSS3 border-radius Compliance
25 Useful CSS3 Techniques and Tutorials
Our solar system… An experiment with CSS3 border-radius, transforms & animations.
CSS Infos : Webkit CSS Properties
CSS Infos : Firefox CSS Properties
SublimeVideo – HTML5 Video Player
HTML5 Canvas and Audio Experiment
How to Make an HTML5 iPhone App par Alex Kessinger de sixrevisions.com.
html5media – Project Hosting on Google Code
23 Essential HTML 5 Resources par Ryan Carson de carsonofied.com.
RGraph: HTML5 canvas graph library based on the HTML5 canvas tag
HTML5 Reset Stylesheet
Detecting HTML5 Features
HTML 5 Visual Cheat Sheet by Woork par Antonio Lupetti.
HTML5 differences from HTML4
Browser support for CSS3 and HTML5
HTML5 Canvas Cheat Sheet
14.02.2009 – 12 resources for getting a jump on HTML 5
Rethinking Forms in HTML5 par John Cox de tutsplus.com.
How HTML5 Will Change the Way You Use the Web par Kevin Purdy de lifehacker.com.
HTML5 drag and drop in Firefox 3.5
Music Notation with HTML5 Canvas
Projekktor Zwei – Free HTML5 Video Player
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 video Libraries, Toolkits and Players
Embed Videos In Your Web Pages Using HTML5
HTML5 Website Layout Tutorials and Inspiration
HTML5 Rocks My Socks Off par Shane Jeffers.
html5shiv – Project Hosting on Google Code
5 Exciting Things to Look Forward to in HTML 5
Why HTML5 Isn’t Going to Save the Internet
Decoding the HTML 5 video codec debate
Everything you need to know about HTML5
HTML5 video and H.264 – what history tells us and why we’re standing with the web
How HTML 5 Is Already Changing the Web
html5lib – Google Code
Build Web applications with HTML 5
22.03.2010 – « HTML5″ versus Flash: Animation Benchmarking
Choosing The Best CSS Framework: A Complete Guide
25+ Great HTML 5 Resources to Get You Started
How to build a desktop WYSIWYG editor with WebKit and HTML 5
Safari CSS Reference
CSS 3, tout le monde est prêt, sauf IE8 …
Ovale et forme elliptique avec CSS3 sans image
La transparence de couleur avec RGBa en CSS3
Welcome to HTML5 and CSS3 – Tools, Resources & Frameworks
To be continued…J’encourage vivement les personnes intéressées à suivre le blog css4design.com (Twitter) de Bruno Bichet (Twitter) qui reste une référence française. Il existe une multitude d’autres sites intéressants mais c’est mon coup de coeur à moi