Un site perso en fil rouge
Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités.
Cet article a été initialement rédigé en 2012. Le site web support de ce tutoriel a subi de nombreuses modifications depuis : la version évoquée au sein de ces pages n'est plus en ligne.
Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...).
Voyons en détails le cheminement et les écueils de cette intégration...
Les Grands Anciens
Rappel historique
Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Le premier d'entre-eux est que CSS3 est toujours en état de brouillon pour une grande partie.
Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres".
A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.
Le cas Internet Explorer
Internet Explorer 9, débarqué en 2011 annonce fièrement reconnaître une bonne partie des propriétés classiques CSS3, ce qui n'était pas le cas de son prédécesseur, mais il est encore à la traîne en ce qui concerne les technologies les plus évoluées.
Là où le bât blesse, c'est que les anciens IE6 à IE8 sont toujours vigoureux sur de vastes parcs informatiques. On parle encore début 2012 de statistiques comprises entre 6 et 10% d'usage d'Internet Explorer 6 et 7 réunis.
Vaut-il mieux utiliser des technologies obsolètes (tableaux, frames, float) pour concevoir des sites qui fonctionnent partout même sur IE6, et donc perdre du temps en production pour gérer tous les différents bugs d'affichages ? ...Ou proposer quelque chose de stable (CSS2, CSS3, voire HTML5) sur les navigateurs modernes et des "patchs" (correctifs) uniquement pour les mauvais élèves ?
En ce qui me concerne, j'ai pris la décision récemment de systématiquement privilégier la seconde alternative, que ce soit pour mon site personnel que nous allons décortiquer ici (Goetter.fr), mais aussi pour des sites professionnels, par exemple la dernière version du site de l'agence Alsacreations.fr.
La problématique est biaisée puisque les intégrateurs ont depuis plusieurs années l'habitude de procéder de la première manière et le passage à la seconde va forcément nécessiter un temps de veille technologique... un peu comme le passage des "tableaux" aux "tableless".