HTML5 et CSS3 sans culpabilité

Toutes les fonctionnalités HTML5 ou CSS3 ne prennent pas naturellement en charge les navigateurs. Pour compenser cela, des développeurs entreprenants ont créé un certain nombre d’outils vous permettant d’utiliser ces technologies aujourd’hui, sans laisser de traces pour les utilisateurs qui vivent encore à l’âge de pierre..

---

Prologue

Éléments sémantiques HTML5

La bonne nouvelle est que, sauf pour Internet Explorer, vous pouvez créer davantage de balisage sémantique en utilisant les nouveaux éléments HTML5, même dans les navigateurs qui ne les prennent pas officiellement en charge. N'oubliez pas de définir le mode d'affichage approprié: bloc. L'extrait suivant doit faire référence à tous les éléments nécessaires:

 article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block; 

Commentaires conditionnels IE

La mise en œuvre de nombreuses solutions de ce didacticiel implique l’inclusion de JavaScript dans certaines versions d’Internet Explorer. Voici un bref aperçu: l’expression de test est placée entre crochets. Nous pouvons vérifier les versions spécifiques ou les versions ci-dessus ou ci-dessous une version indiquée. lt et gt signifier plus bas que et plus grand que, respectivement, alors que lte et gte signifier inférieur ou égal à et Plus grand ou égal à.

Voici quelques exemples rapides:

 [si IE 6]

Vérifie si le navigateur est Internet Explorer 6.

 [si gt IE 6]

Vérifie une version d'Internet Explorer plus grand plus de 6.

---

Outil 1: HTML5 Shiv

Dans tout IE, à l'exception de la version la plus récente (IE9), vous ne pouvez pas appliquer de styles aux éléments que le navigateur ne reconnaît pas. Vos nouveaux éléments HTML5 époustouflants, dans toute leur splendeur, sont insensibles aux règles CSS dans cet environnement. C'est là que html5shiv de Remy Sharp (parfois appelé html5 shim) vient à la rescousse. Il suffit de l'inclure dans votre page section et vous serez en mesure de style les nouveaux éléments HTML5 parfaitement.

Notez que les commentaires conditionnels ne chargent le code html5shiv que si la version d'Internet Explorer est inférieure à 9. D'autres navigateurs, tels que Firefox et Chrome, ignoreront également cette balise et n'exécuteront pas le script, économisant ainsi de la bande passante..

html5 shiv est basé sur une solution de contournement simple: il demande à IE de créer les éléments avec JavaScript (ils n'ont même pas besoin d'être insérés dans le DOM).

 document.createElement ('header');

À ce stade, ils peuvent être coiffés normalement. De plus, les versions les plus récentes intègrent IE Print Protector, ce qui corrige un bug où les éléments HTML5 disparaissent lors de l'impression de la page…

---

Outil 2: Moderniser

Modernizr vous permet de fournir un style de "sauvegarde" dans les navigateurs qui ne prennent pas en charge certaines fonctionnalités HTML5 et CSS3..

Modernizr est peut-être le plus connu de ces outils, mais il est aussi assez mal compris (le nom n’aide pas). Respirez à fond: contrairement aux idées reçues, Modernizr le fait ne pas activer les fonctionnalités HTML5 et CSS3 dans les navigateurs qui ne les prennent pas en charge (bien Est-ce que inclure html5shiv pour vous permettre d'utiliser des éléments HTML5 dans IE < 9).

Outre la fonctionnalité html5shiv, Modernizr fait une chose et une seule chose: il exécute une série de tests de détection de fonctionnalités lorsqu’il est chargé, puis insère les résultats dans le classe attribut du étiquette.

L'objectif principal de Modernizr est de vous permettre d'offrir un style de "sauvegarde" dans les navigateurs qui ne prennent pas en charge certaines fonctionnalités HTML5 et CSS3. Ceci est quelque peu différent de la dégradation gracieuse traditionnelle, dans laquelle nous utilisons le même style CSS dans tous les navigateurs, puis nous l'ingérons de manière à ce que, lorsque des fonctionnalités spécifiques manquent, le résultat reste acceptable..

Voici un exemple de fonctionnement de Modernizr: si un navigateur prend en charge rayon de la frontière et le nombre de colonnes propriété, les classes suivantes seront appliquées:

Par contre, si les mêmes propriétés ne sont pas prises en charge - par exemple dans IE7 -, vous trouverez:

À ce stade, vous pouvez ensuite utiliser ces classes pour appliquer un style unique aux navigateurs dotés de fonctionnalités différentes. Par exemple, si vous souhaitez appliquer un style différent à un paragraphe, selon que les colonnes CSS sont prises en charge ou non, vous pouvez procéder comme suit:

 .csscolumns p / * Style lorsque les colonnes sont disponibles * / .no-csscolumns p / * Style lorsque les colonnes ne sont pas disponibles * /

Si un navigateur ne supporte pas les colonnes, le .csscolumns la classe ne sera pas présente dans le corps et le navigateur n'aura jamais la possibilité d'appliquer la règle qui l'utilise.

Certains pourraient objecter que cela nous ramène à la construction d'un site différent pour chaque navigateur. Il est vrai que rien ne vous empêche d'écrire autant de déclarations de style utilisant des fonctionnalités CSS3 avancées que votre feuille de style devient pratiquement vide lorsque ces règles ne peuvent pas être appliquées..

Si vous souhaitez utiliser Modernizr d'une manière qui a du sens, vous devez compter sur votre talent en matière de conception pour concevoir des styles alternatifs ne brisant pas la conception et ne nécessitant pas de jeter le reste de la feuille de style. Par exemple, vous pouvez essayer de remplacer les ombres portées sur les lettres, lorsqu'elles ne sont pas disponibles, par un caractère gras ou par une transparence de couleur différente..

Usage

Pour utiliser Modernizr, incluez le fichier minifié et appliquez une classe de non-js au élément. Cette dernière précaution vous permet de fournir des styles lorsque JavaScript est complètement désactivé. évidemment, dans ces cas, Modernizr ne peut pas vous aider du tout. Si JavaScript est activé, Modernizr entrera en service et remplacera le non-js avec les résultats de ses opérations de détection de caractéristiques.

    … 

Si vous êtes prêt à accepter que tous les sites Web ne doivent pas s'afficher de manière identique sur tous les navigateurs, vous constaterez que Modernizr est un outil essentiel de votre ceinture de développement Web.!

---

Outil 3: CSS universel IE 6

Sur la même note, le designer Andy Clarke a mis au point une solution élégante pour résoudre le manque de conformité aux normes d'IE6. Appelée "Universal IE6", cette feuille de style est exclusivement consacrée à la typographie. La clé consiste à utiliser des commentaires conditionnels pour masquer toutes les autres feuilles de style dans IE 6..

  / * Feuilles de style pour les navigateurs autres qu'Internet Explorer 6 * /  

Note importanteRemarque: n'oubliez pas d'inclure la dernière version, car les instructions destinées aux anciennes versions flottent toujours sur le Web. Le résultat final ressemble à ceci:

Vous n'avez aucun travail à faire pour supporter IE 6 sur un nouveau site.

Cette approche présente un avantage assez évident par rapport aux feuilles de style alternatives classiques: vous n'avez aucun travail à faire pour prendre en charge IE 6 sur un nouveau site. L'inconvénient, bien sûr, est que le site affiche très peu de votre conception. De plus, vos fondations HTML doivent également être solides, pour que la page soit utilisable même avec la plupart des styles désactivés..

Notez que Universal IE6 CSS n’inclut aucun style pour les éléments exclusivement HTML5 tels que

ou