En route pour CSS3

Tous les développeurs en ont rêvés, mais quand sera-t-il prêt ?

Entrons dans le vif du Sujet

I CSS3, le W3C change de méthodes

Sous la poussée des développeurs et éditeurs de navigateurs, le W3C a changé sa méthode de travail pour une approche modulaire :

Plutôt que d’essayer de faire entrer des douzaines de mise à jour dans une seule spécification monolithique, ne serait bien plus simple et plus efficace est actualisée séparément différents segments de la spécification. L’utilisation de module permettra de mettre à jour CSS de manière plus précise et opportune, permettant ainsi à la spécification dans son ensemble d’évoluer de manière plus flexible et optimale.

Ainsi CSS3 est en fait une série de modules...

Cette approche segmenté a permis à certaines partie de la spécification évolué plus vite que d’autres, tout en encourageant les éditeurs de navigateurs implémenter les morceaux les plus abouties avant que CSS3 ne soit prêt dans son intégralité.

II Les préfixes propriétaires

A partir des spécifications du W3C, chaque éditeur de navigateur(vendor) peut construire ses propres propriétés CSS en les faisant précéder d'un préfixe propriétaire (lorsque la spécification atteint le stade recommandations candidate CR, le préfixe sera supprimé, cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes) :
 

Propriété Navigateur
-o-  opera opera
-moz- mz Gecko (Mozilla)
 -webkit- chromeChrome, safariSafari, Android...
-ms- ie Microsoft (Internet Explorer)
 -khtml- ieKHTML (Konqueror)


Le tout doit être suivi du nom de la propriété souhaitée ou anticipée.

Exemple
Par exemple la très attendue propriété border-radius destinée à arrondir les sommets des boîtes sans utiliser d'images a étét introduite par :
  •  -moz-border-radius sous Gecko (2.0 à 3.6)
  •   -webkit-border-radius sous WebKit
  • sans préfixe sous Opera 10.5 
  • puis suite à sa finalisation sans préfixe sous  Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.

Cette convention qui permet d’accélérer les progrès des éditeurs de navigateurs contraint les développeurs de pages web à multiplier les déclarations pour parvenir à un accord sur tous les navigateurs. Ca n’allègera pas notre feuille CSS…

III Attention : Choisir soigneusement le domaine d'application

Les propriétés CSS3 sont encore interprétées de façon très variables d'une navigateur à l'autre.

Dès lors qu'en tant que professionnel, je ne suis pas sur que les utilisateurs percevront la même chose : où puis-je me permettre de les utiliser ?

Il faut actuellement encore réduire l'usage des propriétés CSS3 à des domaines non critiques :

D'apr├Ęs CSS3 pour les WebDesigner, Dan Cederholm, Eyrolles, p5
Critique Non critique
Identité visuelle Interaction
Utilisabilité Récompense visuelle
Accessibilité Réactivité
Mise en page Mouvement

Par exemple, CSS3 prévoit des modules sur la mise en page, actuellement très peu implémentés. Ce domaine étant critique pour "l'expérience utilisateur", il n'est pas recommandé de les utiliser.

En revanche, l'interaction (par hover, focus, élément de formulaire) est un domaine non critique idéal pour en faire notre terrain de jeu même pour une commande professionnelle. Nous pourrons sur ce domaine utiliser les transitions sont maintenant au statu de "brouillon de spécification" (d'autres navigateurs sont en train d'adopter).

Nous pourrons y combiner


IV Les principales propriétés CSS3 utilisables aujourd'hui

Propriété Supportée par
border-radius ie9 mz1+ chrome3+ opera10.5+ safari3+
text-shadow   mz3.1+ chrome2+ opera9.5+ safari1.1+
box-shadow ie9 mz3.5+ chrome3+ opera10.5+ safari3+
images d'arrière-plan multiples ie9 mz3.6+ chrome2+ opera9+ safari1.3+
opacity ie9 mz1.5+ chrome1+ opera10.5+ safari1.2+
RGBA ie9 mz3+ chrome3+ opera10.5+ safari3.2+

V Ordre des règles

La version sans préfixe doit être placé en dernier, ainsi lorsque la propriété sera implémenté selon des recommandations définitive, c'est cette dernière qui sera pris en compte par le navigateur.

VII Choix des règles étudiées

La portée des règles est très variable selon leur états d'avancement, alors lesquelles faut-il étudiées ?

Nous ne citerons que les mieux supportées. Ce choix reste arbitraire puisque demain, de règles nouvellement généralisées manqueront à ce parcours.

VII L'avancement des modules (avril 2011, http://www.css3.info/modules/ )

Module Last Update Upcoming
Proposed Recommendation(?)
Selectors (Complete) 15 Dec 09 REC
CSS Color (Complete) 28 Oct 10 REC
Candidate Recommendation (?)
CSS Namespaces (High Priority) 23 May 08 PR
CSS Backgrounds & Borders (High Priority) 15 Feb 11 PR
CSS Multi-column Layout (High Priority) 17 Dec 09 PR
Media Queries (High Priority) 27 Jul 10 PR
CSS Marquee (Medium Priority) 05 Dec 08 PR
CSS Ruby (Medium Priority) 14 May 03 WD
CSS Basic User Interface (Medium Priority) 11 May 04 PR
CSS Style Attributes (Medium Priority) 21 Oct 10 PR
Last Call (?)
CSS Paged Media (Medium Priority) 10 Oct 06 CR
Working Draft (?)
CSS Values & Units (Medium Priority) 19 Sep 06 WD
CSS Cascading & Inheritance (Medium Priority) 15 Dec 05 WD
CSS Text (Medium Priority) 15 Feb 11 WD
CSS Writing Modes (Medium Priority) 01 Feb 11 WD
CSS Generated Content for Paged Media (Medium Priority) 08 Jun 10 WD
CSS Fonts (Medium Priority) 24 Mar 11 LC
CSS Basic Box Model (Medium Priority) 09 Aug 07 WD
CSS Template Layout (Medium Priority) 29 Apr 10 WD
CSS Speech (Medium Priority) 16 Dec 04 WD
CSS Grid Positioning (Medium Priority) 05 Sep 07 WD
CSS Flexible Box Layout (Medium Priority) 22 Mar 11 WD
CSS Image Values & Replaced Content (Medium Priority) 17 Feb 11 WD
CSS 2D Transformations (Medium Priority) 01 Dec 09 WD
CSS 3D Transformations (Medium Priority) 20 Mar 09 WD
CSS Transitions (Medium Priority) 01 Dec 09 WD
CSS Animations (Medium Priority) 20 Mar 09 WD
CSSOM View (Low Priority) 04 Aug 09 WD
CSS Syntax (Low Priority) 13 Aug 03 WD
CSS Lists (Low Priority) 07 Nov 02 WD
CSS Reader Media Type (Low Priority) 24 Feb 04 ?
CSS Generated & Replaced Content (Low Priority) 14 May 03 WD
CSS Line Layout (Low Priority) 15 May 02 WD
CSS Hyperlink Presentation (Low Priority) 24 Feb 04 WD
CSS Presentation Levels (Low Priority) 13 Aug 03 WD
Announced (?)
CSS Line Grid (Medium Priority) n/a WD
CSS Scoping (Medium Priority) n/a WD
CSS Grid Layout (Medium Priority) n/a WD
CSS Regions (Medium Priority) n/a WD
CSS Extended Box (Low Priority) n/a WD
CSS Object Model (Low Priority) n/a WD
CSS Tables (Low Priority) n/a WD
CSS Positioning (Low Priority) n/a WD
CSS Math (Low Priority) n/a WD
CSS Aural Style Sheets (Low Priority) n/a WD
Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Vous devez :