HTML - Moderniseur

Lucas D. -

Démarrage

Pour commencer à utiliser Modernizr dans votre projet, vous devez inclure la bibliothèque Modernizr dans votre fichier HTML. Il existe deux principales façons de le faire : télécharger Modernizr et l'inclure dans votre projet ou utiliser un réseau de diffusion de contenu (CDN).

Le téléchargement de Modernizr est simple. Visitez le site officiel de Modernizr (https://modernizr.com/) et cliquez sur le bouton "Download". Vous pouvez choisir entre la version de développement, qui inclut des commentaires et n'est pas minifiée, ou la version de production, qui est minifiée pour de meilleures performances. Une fois téléchargé, placez le fichier JavaScript Modernizr dans le répertoire de votre projet et incluez-le dans votre fichier HTML en utilisant la balise <script>, de préférence dans la section <head> :

Conseil: Inclure Modernizr en utilisant un fichier téléchargé

<head>
  <script src="path/to/modernizr.js"></script>
</head>

L'utilisation d'un CDN est une autre façon d'inclure Modernizr dans votre projet. Vous pouvez utiliser le CDN cdnjs en ajoutant cette balise <script> à votre fichier HTML :

Conseil: Inclure Modernizr en utilisant un CDN

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

Assurez-vous de remplacer 2.8.3 par la version de Modernizr que vous souhaitez utiliser. L'utilisation d'un CDN permet des temps de chargement plus rapides car le navigateur de l'utilisateur peut l'avoir mis en cache à partir d'autres sites web.

Une fois que vous avez inclus Modernizr dans votre projet, vous pouvez commencer à utiliser ses capacités de détection de fonctionnalités pour vérifier les fonctionnalités HTML5 et CSS3 et charger des polyfills et des solutions de repli si nécessaire.

Détection de fonctionnalités

La détection de fonctionnalités est une technique utilisée pour vérifier si un navigateur prend en charge une fonctionnalité ou une fonctionnalité particulière. Elle vous permet d'écrire du code conditionnel qui exécute différents chemins en fonction de la présence ou de l'absence d'une fonctionnalité. Modernizr est une bibliothèque qui simplifie la détection de fonctionnalités pour HTML5 et CSS3.

Avec Modernizr, vous pouvez détecter la prise en charge de diverses fonctionnalités HTML5 et CSS3. Il ajoute des classes à l'élément <html> indiquant quelles fonctionnalités sont prises en charge par le navigateur.

Conseil: Utilisation de Modernizr avec HTML5 et CSS3

<p>Si le navigateur prend en charge l'élément HTML5 <canvas>, Modernizr ajoutera la classe canvas à l'élément <html>. Sinon, il ajoute la classe no-canvas à la place.</p>

Vous pouvez utiliser ces classes pour appliquer différents styles ou comportements basés sur la prise en charge des fonctionnalités dans votre CSS :

Conseil: Application de différents styles basés sur la prise en charge des fonctionnalités

.canvas {
  /* Styles pour les navigateurs qui prennent en charge canvas */
}

.no-canvas {
  /* Styles de repli pour les navigateurs qui ne prennent pas en charge canvas */
}

Dans votre code JavaScript, vous pouvez utiliser Modernizr pour vérifier programmatiquement la prise en charge des fonctionnalités :

Conseil: Vérification de la prise en charge des fonctionnalités en JavaScript

if (Modernizr.canvas) {
  // Code pour les navigateurs qui prennent en charge canvas
} else {
  // Code de repli pour les navigateurs qui ne prennent pas en charge canvas
}

Modernizr fournit également une méthode appelée Modernizr.testAllProps() qui vous permet de tester plusieurs propriétés CSS à la fois. Elle prend le nom d'une propriété comme premier argument et une valeur optionnelle comme deuxième argument. Elle renvoie true si le navigateur prend en charge la propriété avec la valeur spécifiée :

Conseil: Utilisation de la méthode Modernizr.testAllProps

if (Modernizr.testAllProps('background', 'linear-gradient(to bottom, #000, #fff)')) {
  // Code pour les navigateurs qui prennent en charge les dégradés linéaires
} else {
  // Code de repli pour les navigateurs qui ne prennent pas en charge les dégradés linéaires
}

En utilisant les capacités de détection de fonctionnalités de Modernizr, vous pouvez écrire un code intelligent et adaptatif qui gère élégamment différents niveaux de prise en charge des navigateurs. Cela vous permet d'utiliser des fonctionnalités modernes HTML5 et CSS3 tout en fournissant des solutions de repli pour les navigateurs plus anciens.

Chargement conditionnel

Le chargement conditionnel est une technique utilisée pour charger des ressources spécifiques, telles que des polyfills ou des solutions de repli, en fonction de la prise en charge par le navigateur d'une fonctionnalité particulière. Avec Modernizr, vous pouvez utiliser le chargement conditionnel pour charger des ressources uniquement lorsque c'est nécessaire, améliorant ainsi les performances et réduisant les téléchargements inutiles.

Les polyfills sont des scripts qui imitent le comportement des fonctionnalités modernes dans les anciens navigateurs qui ne les prennent pas en charge nativement. Les solutions de repli sont des alternatives ou des styles utilisés lorsqu'un navigateur ne prend pas en charge une fonctionnalité particulière. Modernizr vous permet de charger des polyfills et des solutions de repli de manière conditionnelle en fonction des résultats de la détection de fonctionnalités.

Pour utiliser le chargement conditionnel avec Modernizr, vous pouvez utiliser la méthode Modernizr.load(). Cette méthode prend un objet ou un tableau d'objets comme argument. Chaque objet représente une ressource à charger et les conditions dans lesquelles elle doit être chargée.

Conseil: Exemple : Chargement conditionnel utilisant Modernizr.load()

Modernizr.load({
  test: Modernizr.classlist,
  nope: 'classList.js', // Polyfill pour classList
});

La propriété test spécifie la fonctionnalité à tester, dans ce cas, Modernizr.classlist. Si le navigateur ne prend pas en charge l'API classList, le fichier polyfill classList.js sera chargé en utilisant la propriété nope.

Vous pouvez également utiliser Modernizr.load() pour charger différentes ressources en fonction de plusieurs tests de fonctionnalités :

Conseil: Exemple : Chargement conditionnel basé sur plusieurs tests de fonctionnalités

Modernizr.load([
  {
    test: Modernizr.geolocation,
    yep: 'geolocation.js', // Script pour utiliser la géolocalisation
    nope: 'geolocation-fallback.js' // Script de repli
  },
  {
    test: Modernizr.localstorage,
    yep: 'localstorage-feature.js', // Script pour utiliser le stockage local
    nope: 'localstorage-fallback.js' // Script de repli
  }
]);

Plusieurs tests de fonctionnalités sont spécifiés dans un tableau. Si le navigateur prend en charge la géolocalisation, le script geolocation.js sera chargé. Sinon, le script geolocation-fallback.js sera chargé à la place. De même, si le navigateur prend en charge le stockage local, le script localstorage-feature.js sera chargé ; sinon, le script localstorage-fallback.js sera chargé.

Le chargement conditionnel avec Modernizr vous aide à charger les ressources de manière sélective en fonction des capacités de votre navigateur. Cela vous permet de fournir une expérience adaptée tout en optimisant les performances en ne chargeant que les ressources nécessaires.

Personnalisation de Modernizr

Modernizr vous permet de créer des versions personnalisées pour les besoins de votre projet. Par défaut, Modernizr inclut de nombreux tests de fonctionnalités, mais vous n'aurez peut-être pas besoin de tous. Créer une version personnalisée vous permet de sélectionner uniquement les tests nécessaires, réduisant ainsi la taille du fichier et améliorant les performances.

Pour créer une version personnalisée de Modernizr, visitez le site officiel de Modernizr (https://modernizr.com/download/) et utilisez le générateur en ligne. Le générateur fournit une interface où vous pouvez sélectionner des tests spécifiques pour votre version personnalisée.

Dans le générateur en ligne, vous trouverez une liste de tests de fonctionnalités disponibles regroupés par catégories telles que "HTML5", "CSS" et "JavaScript". Vous pouvez parcourir ces catégories et sélectionner les tests pertinents pour votre projet. Par exemple, si votre projet utilise la vidéo et l'audio HTML5, vous pouvez sélectionner ces tests spécifiques.

Vous pouvez également combiner plusieurs tests de fonctionnalités pour créer des conditions plus complexes. Modernizr vous permet d'utiliser des opérateurs logiques comme ET (&&) et OU (||) pour combiner les tests. C'est utile lorsque vous vérifiez une combinaison de fonctionnalités avant de charger une ressource ou d'appliquer un style.

Conseil: Exemple : Combinaison de tests de fonctionnalités

if (Modernizr.touch && Modernizr.geolocation) {
  // Code pour les appareils qui prennent en charge à la fois le tactile et la géolocalisation
} else {
  // Code de repli pour les appareils qui ne prennent en charge ni le tactile ni la géolocalisation
}

Une fois que vous avez sélectionné les tests de fonctionnalités souhaités et les avez combinés selon vos besoins, générez votre version personnalisée de Modernizr. Le générateur en ligne créera un fichier JavaScript qui inclut uniquement les tests sélectionnés, résultant en une taille de fichier plus petite par rapport à la bibliothèque complète.

Après avoir téléchargé votre version personnalisée, incluez-la dans votre projet comme n'importe quel autre fichier JavaScript :

Conseil: Exemple : Inclusion d'une version personnalisée de Modernizr

<head>
  <script src="chemin/vers/modernizr-personnalise.js"></script>
</head>

En créant une version personnalisée de Modernizr, vous optimisez les performances en n'incluant que les tests de fonctionnalités nécessaires. Cela se traduit par des temps de chargement plus rapides et réduit le code inutile dans votre projet.

N'oubliez pas de maintenir votre version personnalisée à jour à mesure que votre projet évolue. Si de nouvelles fonctionnalités ou dépendances nécessitent des tests supplémentaires, mettez à jour votre version personnalisée en revisitant le générateur en ligne.