Aborder les CSS3

Certains vont bon train et créent leurs sites à pleines poignées de déclarations CSS3. D’autres, beaucoup plus frileux, craignent la non portabilité de leurs visuels sur les différents navigateurs rencontrés.

Qu’en est-il réellement ? Peut-on, ou non, utiliser des déclarations de niveau 3, voire de niveau 4 ?

Ce billet ne va pas répondre à cette question, mais devrait vous donner suffisamment de billes pour y répondre par vous-même, et au cas par cas.

Où en est-on des recommandations ?

Depuis leur apparition en 1996 les CSS n’ont cessé d’évoluer et de s’adapter aux besoins de nos présentations. Il est vrai que l’on pourrait polémiquer sur la lenteur de cette évolution et la mollesse de leurs implémentations. Mais aujourd’hui il y a CSS3 et les recommandations qui s’égrainent, module par module, finissent toujours par arriver. Pour s’en rendre compte, rendons-nous sur le tableau des travaux en cours, CSS current Work & How to participate. Sans oublier que les sélecteurs de niveaux 4 ont également fait leur apparition… mais bon, nous ne parlons pas de CSS4… bien que cela en prenne pleinement le sens.

Qu’en est-il de l’état des lieux et de l’usage des navigateurs ?

Les navigateurs ont évolués, ils se sont tous entendus afin de ne pas reproduire les erreurs du passé. Il est vrai que durant des années, chacun tirait la couverture sur lui en essayant de séduire les internautes par telle ou telle fonctionnalité plus ou moins propriétaire. Seulement lorsque les recommandations tombaient, la fête était finie, finie la compatibilité, finie la bonne gestion de telle ou telle propriété, finie la cerise sur le gâteau…

Ainsi, il fallait corriger à grands coups de patchs, de hacks et parfois même de réécriture du travail. Dans l’ensemble, exceptions près, les navigateurs contemporains sont constamment mis à jour. Il est donc plus difficile de trouver un utilisateur de Firefox qui use de la version 3.6 ou un utilisateur de Safari qui possède la version 3, que de trouver un utilisateur d’Internet Explorer sur l’avant dernière version. Il est vrai qu’on entend parfois parler d’Internet Explorer 6, mais il est également vrai qu’à écouter le site The Internet Explorer 6 countdown, celui-ci ne ferait plus trop d’émules.

Ceci établit, quelles sont les statistiques d’usage des navigateurs, qu’il s’agisse de navigateurs installés sur des Workstation, des portables ou sur des appareils mobiles ? Un petit coup d’œil sur NetMarketShare, ou sur StatCounter, nous permet de constater qu’Internet Explorer, Firefox et Chrome, tiennent à eux trois le podium de tête, avec près de 60 % d’utilisateurs d’ordinateurs. En ce qui concerne les utilisateurs mobiles, il y a équité entre Opera, Safari, Nokia et Android, pour un total de 70 % d’utilisateurs.

Il nous faut donc plutôt se concentrer en fonction des cibles utilisateurs, en préservant une compatibilité descendante d’une version antérieure, voire deux pour Internet Explorer.

CSS3 Pie

Quoiqu’il en soit, les vieilles versions d’internet explorer qui resteraient utilisées par une partie des internautes, seront toujours sourdes à l’usage de déclarations CSS3. Il faut donc utiliser un interprète traducteur. Une fois encore, la solution existe sous la forme d’une librairie .htc, ou depuis peu en .js, récupérable sur le site de CSS3Pie (traduire par CSS3 progressive Internet Explorer). Cette librairie permet d’interpréter la plupart des déclarations CSS3, y compris les dégradés.

Cependant, en fonction de votre serveur web, il peut être nécessaire d’ajouter le type Mime des fichiers htc, afin que ceux-ci soient servis dans le bon format. Le plus simple est d’user d’un fichier .htaccess et d’ajouter la déclaration de ce type Mime :

AddType text/x-component htc

Portabilité internavigateurs- – Le pré-fixage, qu’en est-il ?

Du fait que le processus de recommandation est extrêmement lent, il devenait cornélien de mettre en application l’utilisation des CSS3, sans risquer des problèmes de rétro-compatibilité, si d’aventure les recommandations finales allaient de manière différente en rapport avec les brouillons de travail. Chaque éditeur de moteur de rendu pouvant y aller de sa subjectivité, cela n’est pas fait pour aider. Devions-nous retomber dans les mauvais souvenirs de la guerre des navigateurs durant la fin des années 90, avec les ô combien détestables :

If  (mon navigateur est le plus beau ?) {
} else if (il ressemble à rien) {
} else if (et ainsi de suite)…

… ceci afin de cibler au plus juste les navigateurs (et leurs versions) et adapter les déclarations !

Aarons Gustafson l’a brillamment démontré en introduisant son approche avec eCSStender dans l’article Stop Forking with CSS3 paru sur A List Apart. Comme on peut l’imaginer, les avis divergent au sein de la communauté, entre les expérimentalistes qui souhaitent explorer de nouvelles possibilités et les puristes, qui préfèrent un code succin et valide. Quoiqu’il en soit, d’accord ou pas avec le principe, l’idée proposée à l’origine par le w3c qui consiste à préfixer les déclarations en attendant les recommandations finales, a été intégrée par les éditeurs.

Eric Meyer à posté en deux temps sur A List Apart, deux billets très intéressants sur le sujet : le premier Prefix or Posthack présente et analyse le fond, le second The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik permet de clarifier la situation sur les positionnements d’une éventuelle monoculture -webkit-.

De manière générale, chaque éditeur propose donc une version de la déclaration non-recommandée, ou peut même expérimenter diverses propriétés qu’il souhaite. Les préfixes sont simples et intuitifs… il suffit d’ajouter devant la déclaration brouillons, -moz- pour Gecko (Mozilla), -o- pour Opera, -ms- pour Microsoft (Internet Explorer), -webkit- pour webkit (Safari, Chrome, Android), -khtml- pour Konqueror.

Concrètement par exemple, une déclaration de transformation d’échelle et de rotation s’écrit :

-moz-transform: scale(1.5) rotate(2deg);
-webkit-transform: scale(1.5) rotate(2deg);
-o-transform: scale(1.5) rotate(2deg);
-ms-transform: scale(1.5) rotate(2deg);
transform: scale(1.5) rotate(2deg);

Dans certain cas, ce ne sont pas les propriétés qui sont préfixées mais les valeurs utilisées. Par exemple, lors de l’utilisation d’un dégradé, il va falloir spécifier les divers paramètres tels qu’ils ont été implémentés par le moteur de rendu en question (Pour l’exemple, seuls -webkit- et -moz- sont utilisés):

background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));

Les générateurs de CSS3

Face à une telle verbosité, il devient vite contraignant de mettre en place, et surtout de maintenir, les feuilles de style CSS qui font un usage intensif des CSS3. Il existe diverses pistes de solutions : La première, et la plus simple à mettre en œuvre, consiste à utiliser des outils générateur de code, simples d’utilisation, efficaces, continuellement mis à jour en fonction des évolutions soit des éditeurs, soit des recommandations. Bref, ce sont là de véritables outils compagnons de route, qu’il est bon d’avoir sous la main. La seule contrainte viendra du fait qu’il faut copier-coller le code, et que le processus ne pourra pas être directement et automatiquement relié à nos feuilles CSS.

Il existe divers types d’outils… du généraliste au spécialisé… il suffit de googler dessus et on en trouve toujours des nouveaux.

Voici cependant, bien que non exhaustive, une liste de quelques liens qui font l’unanimité :

• CSS3 Generator
• border-radius
• Ultimate CSS Gradient Generator
• Tools & resources for web professionals
• CSS3 Maker
• CSS3, Please
• CSStxt creates a style
• CSS menu maker
• -prefix- my css

Enfin, il existe également une nouvelle extension de Fireworks CS6, CSSproperties, qui permet en temps réel de produire l’ensemble des propriétés d’un élément sous forme de propriétés CSS, préfixées et commentées… il ne reste plus qu’à les copier-coller dans notre page HTML. L’intérêt d’une telle solution par rapport aux autres types d’outils en ligne, est qu’il est possible de directement concevoir son interface à partir d’un outil graphique et ensuite de venir ponctionner ci et là en fonction des besoins, les représentations CSS des éléments. Matt Stow a également complété et amélioré cette extension par une autre extension, CSS Professionalzr.