Niveau Niveau débutant

Osez HTML5 et CSS3 !

Tutorielhtml

Publié par le , mis à jour le (424034 lectures)

positionnement xhtml créer un menu en css arrondis @font-face ie8 IE6 html5 accessiweb ie7 css3 ombrages rotation transition

Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes. La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2012?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs?". Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde.

Posons le décor

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...

goetter.fr

Les Grands Anciens

Rappel historique

W3CAvant 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

browsersInternet 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".