La réponse ne sera ni un OUI, ni un NON, mais la question est récurrente quelque soit les nouvelles possibilités offertes dans le développement web. La principale raison de se la poser est liée aux navigateurs, la seconde est liée à l'avenir de ces nouvelles technologies. Je vous donnerai ensuite les astuces que j'ai glanée à travers le net pour vous essayer au HTML5 et au CSS3 dès aujourd'hui.
Le navigateur
source: internetbrowsersoftware
Cet outil, qui vous sert à surfer sur le web, se doit de pouvoir afficher correctement votre site web. S'il n'en existait qu'un, cela serait simple, mais il en existe des dizaines ayant évolué de version en version... Mais l'utilisateur est parfois pas trop doué et il ferme les demandes de mise à jour, ou alors l'employé de bureau dépend du bon vouloir de l'administrateur informatique ne voulant pas trop se fouler le poignet (je caricature, j'aime beaucoup les administrateurs informatiques 
).
Pour expliquer la difficulté, voici les principaux butineurs du web (il en existe d'autres, mais ils sont basés sur les même moteurs de rendu) :
- Internet explorer
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
"5 seulement ? de la rigolade tout ça!"... c'était trop simple en effet, here comes a new challenger, les versions !
Les navigateurs évoluent ainsi pour adopter les nouvelles technologies du web, mais à des rythmes très variables. Le record de lenteur revenant certainement à Internet Explorer.
L'utilisateur est, au final, seul maître à bord et il convient donc de le sensibiliser sans arrêt afin qu'il mette à jour son navigateur. Pour cela il est, je pense, nécessaire de proposer des versions de son site un peu différentes. Le CSS3 permet ainsi d'ajouter des effets de bords arrondis, d'ombrages facilement. Sur un ancien navigateur, cela ne sera pas visible, sans pour autant gêner l'ergonomie du site. Le visiteur aura tôt ou tard l'occasion de voir ce site sur un autre ordi et constatera la différence ou pas, dans ce cas, tant pis pour lui 
. Je plaisante bien sur, le site doit rester beau sur un ancien butineur.
Qu'est-ce que le HTML5 et le CSS3... est-ce que cela aura de l'avenir ?
Je répond déjà à la seconde question : oui, c'est même l'avenir du web sans aucune hésitation ! Il est donc primordial de s'y intéresser dès aujourd'hui pour ne pas manquer le train.
Je ne vais pas me fatiguer et je vous copie/colle des explications de wikipedia.
CSS3 :
"CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML."
La version 3 est une évolution majeure apportant de nouveaux sélecteurs, des nouvelles propriétés (ombrage, background multiples, dégradés en tout genre, bordures complexes et j'en passe)... Voici un site permettant de générer des effets: CSS3generator.
HTML5 :
"HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est actuellement en développement. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été initié par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 dès maintenant."
Comme vous le constatez, le HTML5 est une petite révolution pour le web, il ouvre la porte à des possibilités énormes et vient concurrencer, sinon compléter d'autres technologies comme le Flash, le PHP ou le javascript.
Dans cet article, je vais me focaliser sur les balises de structuration de page du HTML5 (en gros l'usage que l'on avait des balises xHTML), car je n'ai pas encore explorer les autres possibilités 
.
C'est bien jolie tout ça, mais j'en fait quoi aujourd'hui ?
Quelques astuces pour se mettre doucement au HTML5 et au CSS3 dès aujourd'hui
En préambule, je tenais à dire mon point de vu sur le cas Internet Explorer 6 (sorti en 2001). Il fait parti de la préhistoire du net, mais il est encore utilisé dans certaines entreprises en raison des applications développées uniquement pour ce navigateur avec ses ActiveX propriétaires. De ce fait, à mois que vous développiez un site pour entreprise, vous pouvez faire l'impasse de son support (à vous les display:inline-block et les images en PNG !!!). De plus, en terme d'usage à travers le monde, il représente un infime pourcentage.
Internet Explorer 7 (sorti en 2006) est un navigateur plus délicat, car il reste assez utilisé, mais de moins en moins en raison des mises à jours de Windows XP ainsi que de Windows 7 qui se répend assez rapidement. Je suggère de ne pas perdre trop de temps en fignolage pour ce navigateur.
Windows XP est encore beaucoup utilisé, il peut disposer d'Internet Explorer 8 (dernière version possible sur ce système), il est donc impératif de supporter ce navigateur ! Mais vous devrez recourir à de nombreuses astuces pour votre site web.
Astuce 1 :
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Cela permet, en HTML5, de forcer Internet Explorer 8 à ne PAS utiliser le mode compatibilité (mode Internet Explorer 7) et, s'il est installé, d'utiliser en priorité "Google Chrome Frame".
Astuce 2 :
Il est possible d'adopter la structuration et les balises HTML5 (hors vidéo et autre trucs trop avancés) dans tout les navigateurs internet Explorer, grâce à cette simple ligne à placer dans le <head> :
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
Pour résumer, si vous visitez votre site avec IE6, 7 ou 8, le script se chargera de faire reconnaitre les balises HTML5 au navigateur.
Ajout: il est nécessaire de transformer les nouvelles balises en type "block" avec ceci pour leur donner un comportement conforme. Ajoutez ceci sur votre feuille de styles:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Astuce 3 :
<!--[if IE 7 ]> <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
Vous remarquez que cela ajoutera une classe selon la version d'Internet Explorer. A vous de ruser sur votre feuille de style en ajoutant la classe correspondante pour spécifier les particularités des navigateurs.
Astuce 4 :
Vient le cas du CSS3... Je ne parlerais pas des transformations 3D, seulement compatibles avec webkit et encore sur des ordi pas trop vieux (cela ne fonctionnera pas si vous avez une vieille carte graphique), ni des transformations (qui fonctionnent déjà bien sous firefox, chrome et Safari et qui se dégradent correctement sous IE, mais sans l'animation bien sur).
Le standart CSS3 (tout comme HTML5) n'étant pas encore finalisé, chaque navigateur a ses propres propriété, heureusement très semblable, voir identiques. Il suffit d'ajouter des préfixes :
-moz- pour Firefox
-webkit- pour Chrome ou Safari
-o- pour opera
-ms- pour IE 9
Par exemple, voici comme ajouter une ombre :
standart : box-shadow:-2px 0 3px #000;
Fireofx : -moz-box-shadow:-2px 0 3px #000;
Vous vous retrouvez vite avec une feuille de styles gigantesque et très difficile à maintenir. Confronté à ce problème j'ai réfléchi à une solution côté serveur en PHP (il suffit de générer la feuille de style en concaténant les préfixes), mais j'ai trouvé une solution toute faite et très simple en javascript développée par Lea Verou, Prefixfree.
Télécharger le script, mettez le sur votre ftp et une simple ligne juste après l'appel de la feulle de style pour éviter l'effet de délais:
<script src="prefixfree.js"></script>
Et hop rien à faire de plus, à part effacer toutes les propriétés devenues inutiles dans votre CSS. En fait ce n'est pas aussi simple et cela nécessite une explication sur ce que réalise réellement ce script.
Il ajoute simplement, à la volée, les bons préfixes selon le navigateur utilisé. Cela ne fonctionne bien sur pas avec les propriétés "propriétaires" comme les dégradés dans les anciennes versions de safari ou iOS inférieur à la version 5. Cela ne rend pas Internet Explorer 8 compatible avec le CSS3 ! C'est uniquement pour faciliter la vie du développeur et c'est déjà pas mal 
. Comment d'habitude, lisez bien les explications/limites sur le site web de la développeuse.
Ma feuille de style est passée d'environ 500 lignes à 300 !
Astuce 5 :
Internet Explorer, ne faisant jamais comme les autres, bénéficie de filtres pouvant servir à créer des effets graphiques qui ne marcheront que chez lui... et encore en causant souvent des bugs, mais bon, cela permet parfois de faire des effets type CSS3. Je vous laisse chercher les filtres sur Google. Voici un exemple de site exposant les possibilités offertes :
top 10 des proprietes css3 compatibilite inter-navigateur
Il existe cependant une solution clé en main pour automatiser le support des effets, grâce à CSS3Pie.
J'y reviendrai quand je l'utiliserais dans mon nouveau design .
Alors, êtes-vous prêt à passer au HTML5 et au CSS3 ?
