Comme vous le savez, la création de sites Web réactifs est bien plus importante que la largeur. Vous avez besoin de capteurs qui vous permettent de modifier les sites en fonction d'autres facteurs.
La meilleure façon d’améliorer nos retours sur le capteur de votre utilisateur, ou votre navigateur, est d’utiliser une bibliothèque JavaScript appelée Modernizr. Dans cet article, j'expliquerai pourquoi, lorsque vous dépassez la largeur, Modernizr est un outil si précieux.
Dans le développement frontal, les développeurs avaient l'habitude d'ajuster un site en fonction des contraintes du moteur de mise en page utilisé par un navigateur particulier. En 2003, il n'y avait que trois navigateurs: Netscape, Internet Explorer et Opera. Firefox, Safari et le premier navigateur mobile, Opera Mini, ont été lancés en 2005. Chrome n’a été publié qu’en 2008.
Actuellement, il existe cinq principaux navigateurs, chacun avec sa propre version mobile. Sur l'ensemble de ces navigateurs, il existe également des versions plus anciennes que les utilisateurs n'ont pas mises à niveau. De la même manière que la création de plusieurs mises en page pour plusieurs tailles d'écran devient finalement un jeu à somme nulle, il en va de même pour la création de multiples interfaces pour plusieurs navigateurs.
Nous utilisons la conception Web réactive pour accueillir de nouveaux navigateurs mobiles de pointe. Mais, tout en prenant en compte les nouveaux navigateurs, il est important de ne pas le faire au détriment des navigateurs plus anciens.
Historiquement, l'optimisation est le produit de la création d'un site pour les navigateurs les plus populaires, puis d'un ajustement pour garantir que le site ressemble à un ensemble de navigateurs populaires. Les conceptions devraient s'adapter aux capacités de tous les navigateurs.
L'amélioration progressive est une stratégie pour faire face à l'incapacité des navigateurs à prendre en charge les fonctionnalités modernes. Il existe une tentation de créer pour les fonctionnalités les plus récentes, mais, dans un site Web réactif, la conception d’un site est contextuelle par rapport à la structure sur laquelle il est visualisé. La conception Web réactive est devenue populaire car elle résout le contexte changeant le plus évident - la taille de l'image - mais le contexte d'un navigateur est beaucoup plus profond que la taille de la fenêtre d'affichage.
SVG constitue une excellente solution pour les écrans haute résolution, mais qu'en est-il de son support dans les anciens navigateurs? Il n'est pas pris en charge dans IE 8 ou une version antérieure, vous devez donc utiliser une solution de secours si vous prenez en charge ce navigateur. Vous pouvez identifier le navigateur et proposer des styles alternatifs par rapport à ce navigateur, mais vous devrez alors proposer ces mêmes styles alternatifs pour chaque navigateur ne prenant pas en charge le format SVG.
Ne serait-ce pas plus simple si vous pouviez simplement écrire un style qui serait utilisé contre tous les navigateurs qui ne supportaient pas SVG? De cette façon, vous n'auriez pas à suivre les rapports de bogue des utilisateurs de versions antérieures. Vous pouvez simplement régler le repli une fois et l’oublier.
Traditionnellement, la détection des fonctionnalités a été effectuée en détectant l'agent utilisateur du navigateur. Cela se fait via JavaScript, à l'aide de l'objet navigateur. L'objet navigateur date des jours de Netscape et était le meilleur outil du développeur en matière de compatibilité entre navigateurs.
Si vous avez Chrome et que vous avez activé DevTools, ouvrez l'inspecteur Web de votre navigateur en cliquant avec le bouton droit sur une page et en sélectionnant Inspecter l'élément. Cliquez ensuite sur Console et, après le curseur, tapez "navigator.userAgent" et appuyez sur Entrée. Cela retournera l'agent utilisateur de votre navigateur actuel, qui est une chaîne de texte utilisée pour identifier le navigateur utilisé. Chrome renvoie les éléments suivants:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35À bien des égards, l’objet de navigation est l’un des meilleurs capteurs dont nous disposons pour informer notre système de ce dont notre utilisateur est capable; Cependant, ce n'est pas très favorable pour l'avenir. Il base les actionneurs de votre site sur de nombreuses hypothèses sur ce que le navigateur fait et ne supporte pas. Il n'est pas non plus fiable car les utilisateurs peuvent le configurer pour accéder à des sites que le navigateur n'est peut-être pas en mesure de prendre en charge.
Modernizr est une bibliothèque JavaScript permettant de détecter des fonctionnalités dans le navigateur. Il est chargé dans la tête de votre page et s'exécute pendant un chargement de page. L'ajout à votre site est aussi simple que l'ajout de toute autre bibliothèque JavaScript, telle que jQuery, mais une fois ajouté, Modernizer vous donne un contrôle incroyable sur le rendu de votre page et garantit à chaque utilisateur une expérience de qualité.
Ayant été chargé, Modernizr exécute une série de vérifications sur le navigateur de l'utilisateur pour déterminer les fonctionnalités prises en charge par le navigateur et créer un objet JavaScript que vous pouvez utiliser pour tester. Modernizr ne crée pas de support pour ces fonctionnalités. cela vous permet simplement de fournir un support de secours pour les fonctionnalités modernes. Par exemple, dans le cas de SVG, Modernizr nous permet de fournir une image de repli pour les navigateurs sans support SVG.
Modernizr applique également un ensemble de classes à la balise HTML, ce qui vous permet de modifier le code CSS de la page en utilisant les classes CSS correspondantes. Ces classes CSS vous permettent d'utiliser des systèmes CSS pour créer des actionneurs qui ajusteront vos pages pour permettre les améliorations progressives disponibles pour une page.
Au lieu d'utiliser l'agent utilisateur, Modernizr détecte les entités directement en exécutant une série de tests JavaScript qui renvoient des valeurs booléennes (true ou false). Cela dicte les classes définies sur la balise html et vous permet d'utiliser JavaScript pour détecter si une fonctionnalité est disponible.
L'installation de Modernizr est aussi simple que de créer un lien vers la bibliothèque JavaScript en haut de la page, mais lorsque le processus d'installation se complique, vous devez créer la version dont vous avez besoin. Modernizr est disponible en téléchargement en deux versions, la version de développement et la version de production.
La version de développement est un fichier complet non compressé de 42 Ko. Cette version est géniale si vous maîtrisez bien le JavaScript et que vous souhaitez apporter des modifications aux tests qu’elle effectue. Comme il n'est pas compressé, il est facile à lire et à enrichir, mais il est préférable de le laisser aux développeurs qui comprennent bien JavaScript.
Pour ceux d'entre vous qui ne sont peut-être pas totalement experts en JavaScript ou qui souhaitent créer rapidement une version personnalisée de Modernizr, la version de production de la bibliothèque entre en jeu. L'outil de création de version de production sur le site vous permet de créer une version avec uniquement les tests dont vous avez besoin.
Cela est pratique lorsque vous savez que vous avez seulement besoin d'un certain ensemble de tests. Par exemple, votre site peut ne pas tirer parti des ombres des boîtes CSS, mais il peut avoir besoin de prendre en charge les dégradés CSS. À l'aide de l'outil de génération, vous pouvez inclure les tests dont vous avez besoin et exclure ceux dont vous n'avez pas besoin, en conservant le trim du code source et le temps de chargement total de votre utilisateur.
Pour notre exemple, je vais travailler sur la version de développement. Je trouve que lorsque je crée un site, il est préférable de travailler avec la version complète, puis une fois que vous connaissez les fonctionnalités que vous utiliserez sur votre site, réduisez la version.
Faisons une détection simple des fonctionnalités avec Modernizr. Nous allons commencer avec un site échantillon brut.
Utilisons ce petit test pour détecter si notre navigateur est compatible avec SVG. Par souci de simplicité, nous ajouterons simplement deux balises span à la page pour détecter le support.
Huzzah! You have SVG support.BOO! You don't have SVG support.Si vous testez cela dans un navigateur prenant en charge SVG, vous verrez le message "Huzzah! Vous avez le support SVG. "Alors que si vous avez un navigateur qui ne supporte pas SVG, vous trouverez le" BOO! Vous n'avez pas de support SVG. "
Cet exemple est assez rudimentaire, mais il montre l’idée fondamentale d’utiliser Modernizr pour résoudre les problèmes entre navigateurs. Si nous utilisions le même correctif avec l'ancienne méthode de l'agent utilisateur, nous devions avoir une feuille de style pour chaque navigateur qui ne prend pas en charge SVG et modifier notre CSS pour chacun. (Pour les personnes intéressées, les seuls principaux navigateurs dépourvus de support SVG sont Internet Explorer 7 et moins.)
En ajoutant la classe svg / no-svg au fichier HTML de la page, votre CSS dispose désormais d'un sélecteur permettant de remplacer les règles CSS existantes. Comme il se trouve sur la balise parent-most, il peut remplacer d'autres classes de la page.
Ainsi, dans ce cas, les deux balises span sont affichées: none ;. S'il n'y a pas de support SVG, la déclaration display: inline sur la balise span avec la classe .no remplace l'affichage: hidden grâce à la règle no-svg sur la balise html.
Essayons un exemple plus utile de la même idée. Nous pourrions vouloir avoir une image de fond SVG sur la page, qui revient à un format PNG si le navigateur ne supporte pas SVG. Par défaut, nous utiliserons l’image PNG. De cette façon, le SVG n'est pas servi s'il n'est pas nécessaire et devient une amélioration progressive.
Maintenant, nous avons un crâne SVG génial qui aura l'air génial et net pour les utilisateurs avec des écrans haute résolution, et qui a toujours l'air bien pour les utilisateurs avec des navigateurs plus anciens.
Il y a une grande quantité d'informations à apprendre sur Modernizr. Nous vous avons montré comment cela fonctionne avec les capacités multi-navigateurs sans avoir à mémoriser ou à maintenir une liste courante des navigateurs compatibles SVG.
Il fonctionne exceptionnellement comme un système permettant de servir vos actuateurs utilisateurs pour créer des sites Web rapides et hautement fonctionnels.
Utilisez-vous Modernizr dans vos projets? Quelles autres méthodes avez-vous utilisées pour diffuser du contenu réactif? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image des lignes divergentes via Shutterstock.