Modernizr with Respond.js

J'évalue soigneusement la meilleure façon d'utiliser Modernizr et Respond.js pour un design réactif et j'ai quelques questions pour la communauté.

Tout d'abord, je crois comprendre que lors du regroupement de Modernizr avec Respond.js, aucun autre codage ou test n'est nécessaire pour le support de requête média dans IE8 et ci-dessous. En d'autres termes, lorsque Respond.js est livré avec Modernizr, je dois simplement charger Modernizr dans ma source pour obtenir Respond.js actif. Correct?

Deuxièmement, pensez-vous que c'est le moyen le plus efficace d'obtenir un support pour les requêtes média dans IE8 et ci-dessous? Essentiellement, j'inviterais un script Modernizr plus grand que nécessaire pour les navigateurs qui prennent déjà en charge les requêtes multimédias. Ne serait-il pas plus efficace de séparer les deux scripts et de charger uniquement Respond.js si un test pour les requêtes multimédias échoue?

Troisièmement, si je voudrais séparer les deux scripts, qu'est-ce que vous croyez est le meilleur moyen de charger Respond.js si nécessaire? Une option serait d'utiliser un commentaire conditionnel spécifique à IE pour charger Répondre. Une autre option est d'utiliser yepnope et Modernizr pour tester le support de requête médiatique et charger Répondre si nécessaire. Ce qui serait plus efficace et résistant aux pannes.

Enfin, si je choisissais de séparer les deux scripts et d'utiliser Modernizr pour charger Réponds si nécessaire, j'ai rencontré les deux techniques suivantes:

<script> yepnope({ test : Modernizr.mq('(only all)'), nope : ['js/libs/respond.min.js'] }); </script>

 <script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

J'ai constaté que le deuxième crash IE8, mais il faut simplement réécrire. Quelle technique recommanderiez-vous?

Merci pour votre aide.

Tout d'abord, je crois comprendre que lors du regroupement de Modernizr avec Respond.js, aucun autre codage ou test n'est nécessaire pour le support de requête média dans IE8 et ci-dessous. En d'autres termes, lorsque Respond.js est livré avec Modernizr, je dois simplement charger Modernizr dans ma source pour obtenir Respond.js actif. Correct?

Bien, vous avez besoin d'au moins certaines requêtes média CSS3 pour vous aider à démarrer. Respond.js est essentiellement simplement une implémentation JavaScript des requêtes multimédias pour les navigateurs qui ne les supporte pas (p. Ex. IE inférieur à 8). Assurez-vous simplement que la référence à Respond.js vient APRÈS vos requêtes médias CSS3 ( lien ).

Donc, oui, en supposant que vous avez répondu. Js regroupés avec Modernizr à partir d'une création personnalisée ou autre, et qui est chargé après votre CSS3, vous êtes tous bien. De plus, Modernizr a besoin de plus de configuration dans votre HTML ( lien )

Deuxièmement, pensez-vous que c'est le moyen le plus efficace d'obtenir un support pour les requêtes média dans IE8 et ci-dessous? Essentiellement, j'inviterais un script Modernizr plus grand que nécessaire pour les navigateurs qui prennent déjà en charge les requêtes multimédias. Ne serait-il pas plus efficace de séparer les deux scripts et de charger uniquement Respond.js si un test pour les requêtes multimédias échoue?

Modernizr n'est pas compatible avec les navigateurs sans requêtes multimédias . Vous devez l'ajouter dans une version personnalisée. Donc, oui, je pense qu'il est judicieux de toujours répondre. Minimisée, la bibliothèque ajoute un peu plus de 3kb, et l'avoir inclus dans le fichier Modernizr n'ajoutera pas une autre requête GET. Je dirais que laissez-le ici pour être prêt à tout.

Troisièmement, j'irais avec la méthode Modernizr. J'aime utiliser de nouvelles fonctionnalités, tout ce qui reste sur le chemin du JavaScript.

La nouvelle version de Répond inclut des tests de fonctionnalités afin de ne pas avoir besoin de Modernizr ou Yepnope!

Voici la révision: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

A inclus la fenêtre.matchMedia polyfill à l'extérieur de la fonction principale response.js. Le code source de cette polyfill est ici https://github.com/paulirish/matchMedia.js , et l'inclure dans la boîte facilitera la mise à jour et permettra une plus petite compression de fichiers pour ceux qui incluent déjà Via Modernizr ou autrement (si vous l'êtes, vous pouvez le supprimer de Respond.js).

En outre, vous devriez noter que l'utilisation de yepnope.js pourrait provoquer un délai dans lequel vous voyez les styles de requête non média avant que les styles de requête des médias ne soient analysés et appliqués. La recommandation est que vous mettez reply.js dans l'en-tête pour éviter autant que possible, bien qu'il soit également utile de garder vos fichiers js dans le pied de page.

Les tests de fonctionnalité pourraient être dans la nouvelle lib comme tkane2000 dit … Je voulais juste mentionner que vous pourriez probablement le faire via Modernizr aussi:

  <script> Modernizr.load({ test: Modernizr.mq('only all'), nope: 'js/respond.min.js' }); </script>

L'affiche originale a pensé que la vérification des requêtes des médias non valide '(uniquement toutes)' … Ne devrait être aucune parenthèse basée sur certaines choses que j'ai lues. Une fois que j'ai supprimé les parens, répond.js semble être inclus de manière appropriée.