Compatibilité avec CSS3

CSS3 pose des problèmes de compatibilité

Il me semble qu’utiliser la sémantique HTML5 et certaines fonctionnalités de l’API HTML5 comme la géolocalisation pour les mobiles doit être utilisé dès aujourd’hui. Par contre, utiliser du CSS3, me parait risqué vu les problèmes de comptabilité que cela pose. Dans l’immédiat nous en somme au stade d’apprentissage et non de mise en production, et pourtant, les commandes arrivent déjà.

Il faut avoir à l’esprit que :

• HTML5 et CSS3 sont deux choses différentes
• Aucune contre-indication pour utiliser CSS2 avec HTML5
• La majorité des navigateurs ne supportent pas CSS3
• CSS3 n’est pas encore un standard du Web

Quant à dire que l’on va créer un site avec du CSS3 compatible avec IE6, IE7, IE8 et d’autres versions de navigateur est évidemment impossible puisque CSS3 n’existe pas pour ces navigateurs, même la dernière version du navigateur de Microsoft est assez douteuse.

Dans la majorité des cas, il est préférable d’utiliser une bibliothèque JavaScript comme jQuery afin d’éviter tous ces problèmes de compatibilité. De plus, les effets d’animation en jQuery seront le plus souvent supérieurs à ce que propose CSS3.

La relation oubliée entre Navigateur/Technique

Afin d’avoir une idée plus précise, voici un tableau qui reprend pour le mois de juin 2011 la liste des navigateurs les plus utilisés et leurs compatibilités avec certaines techniques en CSS3.

Compatibilité de quelques propriétés en CSS3 sur les 9 navigateurs Web les plus utilisés en juin 2011

Rang	Navigateur	Part de marché	Css animation	Background Size	CSS Transitions	CSS Columns	CSS 2D Transforms
1er	IE 8	22.15%	non	non	non	non	non
2d	Firefeox 4	19.19%	non	oui	oui	oui	oui
3eme	Chrome 12	12.1%	oui	oui	oui	oui	oui
4eme	Firefox 3.6	9.97%	non	non	non	oui	oui
5eme	IE 9	7.87%	non	oui	non	non	oui
6eme	Safari 5	5.8%	oui	oui	oui	oui	oui
7eme	Chrome 11	5.53%	oui	oui	oui	oui	oui
8eme	IE7	5.16%	non	non	non	non	non
9eme	Firefox 5	4.11%	oui	oui	oui	oui	oui

Sources : http://www.findmebyip.com/litmus/ et http://gs.statcounter.com/

Décharge vers l’OS

Un autre aspect à prendre en considération et qu’une interface entièrement conçut en CSS3, va diminuer le poids des pages Web, mais quand n’est-il des ressources mémoire/processeur du système d’exploitation ? Seront-elles suffisantes pour calculer les dégradés et les ombrés ?

Testez une interface en CSS3 sur certains téléphones mobiles, c’est à ce moment-là que l’on se rend qu’il est encore trop tôt pour utiliser ce qui n’est pas encore un standard.