Comment écrire HTML5 rétrocompatible?

Question

Je voudrais commencer à utiliser les fonctions de base de HTML5, mais en même temps, garder mon code rétrocompatible avec les anciens navigateurs (dégradation gracieuse). Par exemple, je voudrais utiliser les propriétés CSS3 frais pour faire des coins arrondis. Y at-il tutoriel disponible pour l'écriture HTML5 grâce dégradable?

En outre, quels navigateurs dois-je soutenir pour que mon application. est fonctionnel pour au moins 95% des visiteurs? Quels sont les moyens de tester les navigateurs sans douleur?

Answer 1

Quand on parle de HTML5 ou CSS3, vous devez vous diriger vers:

Quand puis-je utiliser ...

Comme on le voit, nous sommes encore très loin d'utiliser cela.

En outre, étant donné que les anciennes versions des navigateurs ne supporteront pas HTML5 ou CSS3, cependant, vous pouvez faire ce que l'on appelle:

Amélioration progressive et Graceful dégradation

Voici quelques ressources aussi:

• Galerie des sites HTML5 (Vous pouvez apprendre et obtenir l'idée d'eux)
• Créer des sites Web modernes utilisant HTML5 et CSS3

Answer 2

Les navigateurs qui, collectivement, couverture 95% du monde: Firefox, Chrome, IE6 / 7/8. La meilleure façon de les tester est de les installer sur votre ordinateur.

Answer 3

Vous voulez utiliser des balises html et css compatible avec les navigateurs mobiles.

Pour tout CSS3 envelopper dans javascript conditionnel. Je la largeur appareil est assure toujours atleast 240px, rien en dessous de c'est vieux, merdique, regard mobile.

Vous pouvez utiliser un petit boilerplate mobile pour CSS, pour réinitialiser les balises de base que vous utilisez (les rendre les regarder dans la même différents navigateurs). Comme pour tout passe-partout, vous devriez regarder le css pour voir si elle est surpuissant WAY.

Pour un contrôle guide complet sur les directives W3 mobile CSS2: http: //www.w3.org/TR/2000/WD-css-mobile-20001013

Une autre bonne ressource est cette table de compatibilité: http://www.quirksmode.org/m/ css.html

Answer 4

La dégradation Graceful est tout au sujet de faire des compromis - si vous pouviez tout faire dans la version inférieure, vous auriez probablement. Pour prendre l'exemple des coins arrondis que vous citez, il peut acceptable pour vous (ou votre client) à vivre sans eux, où il n'existent pas renderer extensions CSS spécifique pour les soutenir (ce qui est la façon dont http://www.ipswich-angle.com/ poignées , par exemple, je crois). D'autres options concernant les images sont là, mais il est largement tributaire de ce que vous et votre client compromis sont prêts à faire.

Answer 5

Un service comme browsershots.org est tout à fait utile de vérifier comment votre site rend sur les différents navigateurs et systèmes d'exploitation. Vous devez attendre dans une file d'attente pendant un certain temps, mais cela vaut la peine de faire cela.

Answer 6

J'allais faire un commentaire, mais je me suis emporté ..

W3Schools a des suggestions pour l'utilisation des éléments du web sémantique sur votre site. Il suggère d'utiliser une bibliothèque Javascript appelé html5shiv.js pour ajouter le support style pour IE8 et ci-dessous afin que vous peut trouver des fichiers javascript qui simulent une fonctionnalité spécifique intégrée dans HTML5 comme JSON2.js et Webforms2.js .

Enfin cet article donne un exemple complet d'émuler une forme HTML5 avec beaucoup de nouveaux attributs / fonctionnalité.

En ce qui concerne la construction du site, je vous recommande la construction d'un site HTML4 en utilisant d'abord des éléments sémantiques librement (avec html5shiv) et le test avec IE7. Alors que vous construisez des parties du site qui nécessitent de nouvelles fonctionnalités, la recherche d'un fichier Javascript qui fournira des navigateurs plus anciens avec les mêmes fonctionnalités, par exemple: quand il est temps d'ajouter votre premier coin arrondi ou un dégradé peut-être ajouter CSS3Pie . Rappelez-vous toujours aussi bien que votre boîte modèle; Rayon des frontières et des gradients sont pris en charge dans WebKit, ainsi que l'API de mozilla tant css3 attributs que vous aurez besoin d'ajouter 3 fois:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Malheureusement, je ne dispose pas d'une bonne ressource pour la façon dont les API webkit / mozilla comparer avec des fonctionnalités HTML5.

La seule fonctionnalité que j'ai eu du mal à trouver un soutien pour les sélecteurs CSS3 dans les navigateurs plus anciens, souvent, vous pouvez vous en sortir avec cela, je veux dire que si tu ne vas pas mettre à jour votre IMHO navigateur, vous pouvez vivre avec quelques frontières à double épaisseur ou manquant de style autre rangée dans les tableaux.

Peut-être qu'un jour il y aura un site que vous pouvez télécharger votre code qui vous dira des choses comme « chrome 20.xyz ne supporte pas les coins arrondis, ajouter -webkit-border-radius pour ajouter le support » mais en attendant l'ajout d'une compatibilité descendante après la fait sera quasi impossible pour les sites complexes.