Devrais-je utiliser HTML5 et / ou CSS3 pour créer mon site Web?
Le nouveau contenu HTML5/CSS3 (Web8!) A l'air cool! Devrais-je commencer à l'utiliser maintenant ou rester avec css/xhtml attendre que plus de navigateurs puissent l'utiliser?
HTML5 est maintenant supporté par tous les navigateurs, même IE5! (Si vous utilisez le script html5shiv). Je recommande fortement de lire http://diveintohtml5.org C'est l'une des meilleures ressources HTML5 disponible sur le marché.
En ce qui concerne CSS3, si vous l’utilisez, veillez également à utiliser le préfixe du fournisseur, en plus de la syntaxe habituelle. par exemple.
rayon de la frontière
-moz-border-radius
-webkit-border-radius
Je crois en l'amélioration progressive. Le support css3 de IE9 semble très prometteur.
Probablement.
Il y a des parties de HTML5 que vous pouvez utiliser maintenant, aujourd'hui. Des formulaires par exemple. Si vous avez <input type="email"> dans un navigateur qui ne prend pas en charge HTML5 (oui, même IE6), vous verrez simplement la même chose que si vous utilisiez <input type="text">. Pourtant, sur un navigateur prenant en charge les éléments de formulaire HTML5, vous bénéficiez des avantages du type email: le client vérifiera la valeur sans qu'aucun JS supplémentaire ne soit nécessaire. Bien que oui, vous aurez toujours besoin de JS pour les navigateurs non HTML5, vous disposerez d'une couche de validation supplémentaire dans les navigateurs pris en charge.
Un autre question sur ce site fournit un bon aperçu des nouvelles fonctionnalités offertes par HTML5 et CSS3. Cette question contient également beaucoup de bonnes données sur les formulaires.
Parce qu'Internet Explorer (et les anciennes versions de Safari et Firefox, si rares soient-elles), ne prend pas en charge la plupart de ces fonctionnalités, il vous reste des bibliothèques JavaScript pour combler le vide. Celles-ci incluent un impact sur les performances (même si ce n’est que pour les navigateurs qui doivent les utiliser), alors faites attention à vos utilisateurs lorsque vous les utilisez.
Pour atténuer les problèmes liés au manque de prise en charge des fonctionnalités, utilisez les ressources suivantes si vous estimez que ces nouvelles fonctionnalités en valent la peine:
- html5shiv: un script JavaScript pour permettre à IE de reconnaître et de styliser les éléments HTML5.
- CSS3 Pie: un comportement attaché IE (un fichier
.htc) qui rend Internet Explorer 6-8 capable de restituer plusieurs des fonctionnalités de décoration CSS3 les plus utiles. Appliqué à un élément, il permet à IE de reconnaître et d'afficherborder-radius,box-shadow,border-image, plusieurs images d'arrière-plan etlinear-gradienten tant qu'image d'arrière-plan. . - Modernizr: une bibliothèque Javascript qui utilise la détection de fonctionnalités pour tester le navigateur actuel par rapport aux fonctionnalités CSS3/HTML5 à venir, en ajoutant des classes au <html> pour ceux qui sont supportés. Crée également un objet JavaScript global portant le même nom et contenant une propriété booléenne pour chaque fonction,
truesi pris en charge etfalsesi ce n'est pas le cas. Ajoute la prise en charge du style et de l'impression d'éléments HTML5 afin que vous puissiez utiliser des éléments tels que<section>,<header>et<nav>. - ie-css3.js: permet à Internet Explorer d'identifier les sélecteurs de pseudo-classes CSS3 et d'afficher toutes les règles de style définies avec eux. Prend en charge différents sélecteurs CSS3 en fonction de la bibliothèque JavaScript utilisée par votre site.
- DD_belatedPNG: une bibliothèque Javascript qui ajoute la prise en charge des images PNG à IE6. Vous pouvez utiliser les fichiers PNG en tant que
srcd'un élément<img />ou en tant que propriétébackground-imageen CSS. Contrairement àAlphaImageLoader,background-positionetbackground-repeatfonctionnent comme prévu et les éléments répondront à la pseudo-classea:hover. - TwinHelix IE Correction du PNG: un comportement attaché de IE (un
.htcfichier) qui ajoute la prise en charge PNG avec une opacité alpha à IE 6. Le positionnement et la répétition complets de l'arrière-plan CSS prennent en charge (y compris les sprites CSS) avec du JavaScript supplémentaire (inclus). - Peu importe: survolez: un comportement attaché IE (un fichier
.htc) automatiquement patches: hover,: active et: focus pour les bizarreries d'IE6, IE7 et IE8, vous permettant de les utiliser comme vous le feriez dans n'importe quel autre navigateur. Inclut le support AJAX, ce qui signifie que tout code HTML inséré dans le document via javascript déclenchera également les styles:hover,:activeet:focusdans IE.
Il est intéressant de noter que DD_belatedPNG résout les problèmes résolus par Whatever: hover et que le IE PNG Fix de TwinHelix avec JavaScript pur, alors que Whatever: hover et le [IE PNG Fix de TwinHelix utilisent une combinaison de JavaScript et de IE comportements attachés (.htc files).
Généralement, les personnes qui utilisent des navigateurs non-IE les mettent à niveau lorsque cela leur est demandé, et donc IE porte le poids de "Mais certains navigateurs ne supportent pas cette fonctionnalité!" plaintes. Modernizr ajoutera la possibilité d'utiliser HTML5/CSS3 à tout navigateur que vous êtes susceptible de voir et pas seulement à IE. ie-css3.js fera la même chose, vous devez simplement l'implémenter sans un commentaire conditionnel IE (ce qui signifie ), tous les navigateurs finiront par l'obtenir sauf si vous l'incluez avec des vérifications d'agent utilisateur côté serveur - cela réduira considérablement les performances de tous vos visiteurs, plutôt que de simplement vos IE utilisateurs.)
Utilisez la technologie qui convient le mieux à vos besoins.
Eric Meyer a écrit n article de Nice à propos des raisons pour lesquelles commencer à utiliser des préfixes spécifiques aux vendeurs sur les règles CSS n’est pas boiteux comme utiliser des hacks de filtres css.
Je pense que la même chose s'applique à HTML5. Si vous pouvez vérifier la compatibilité du navigateur avec différentes fonctionnalités, pourquoi ne pas l’utiliser. Tant que le site se dégrade avec élégance, redressez-vous.
Quelques autres liens utiles, lorsque vous décidez quelles fonctionnalités CSS3 vous souhaitez peut-être utiliser: http://caniuse.com/ (donne une bonne ventilation des éléments et des sélecteurs utilisables sur quelles plates-formes)
http://css3please.com/ (un terrain de jeu éditable dans la page pour gâcher les fonctionnalités de CSS3, cela donne également des conseils sur les techniques et les fonctionnalités prises en charge par les plateformes pour les styles demandés couramment, comme des coins arrondis, des arrière-plans dégradés, etc.)
Je l'utilise pour améliorer l'expérience des navigateurs modernes afin que les utilisateurs dotés d'un bon navigateur soient "récompensés" par une interface plus agréable à regarder (coins arrondis, ombres, ce genre de choses). J'imagine que vous ne devriez pas l'utiliser pour remplacer, disons, la validation de votre formulaire côté client actuel, à moins que vous n'ayez recours à une sorte de solution de secours JS.
Si vous démarrez un nouveau projet à l'aide de HTML5 qui devrait également être pris en charge par les anciens navigateurs, la meilleure option consiste à utiliser Initializr -
Il utilise HTML5 Boilerplate au niveau du serveur et ajoute quelques options qui vous sont propres pour vous fournir un modèle que vous pouvez déployer sur votre propre site. Il comprend les bibliothèques Javascript (comme HTML Shiv ou Modernizr), ce qui rendra votre site compatible avec les navigateurs plus anciens.
Cela dépend de l’audience et des fonctionnalités que vous souhaitez utiliser. Je pense qu'il faudra encore plusieurs années avant que le projet moyen puisse abandonner le soutien pour ie6 :(
Si votre site est un intranet privé et que vous contrôlez le navigateur ou avez un nombre limité de navigateurs à gérer, n'hésitez pas à travailler à la pointe de la technologie.
Sinon, peu importe ce que vous utilisez, vous devrez toujours prendre en compte le plus petit dénominateur commun. Dans ce cas, il s’agit probablement d’une combinaison de IE 6 et d’une gamme de navigateurs mobiles. Donc, si vous avancez avec HTML 5, vous avez le problème supplémentaire de vous assurer que votre site "se dégrade" bien.