web-dev-qa-db-fra.com

Modernizr avec Respond.js

J'évalue attentivement la meilleure façon d'utiliser Modernizr et Respond.js pour une conception réactive 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 requis pour la prise en charge des requêtes multimédias dans IE8 et les versions antérieures. En d'autres termes, lorsque Respond.js est fourni avec Modernizr, je n'ai qu'à charger Modernizr dans ma source pour activer Respond.js. Correct?

Deuxièmement, pensez-vous que c'est le moyen le plus efficace de prendre en charge les requêtes multimédias dans IE8 et les versions antérieures? En substance, j'inclurais un script Modernizr plus grand que celui requis 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 souhaite séparer les deux scripts, quelle est selon vous la meilleure façon de charger Respond.js si nécessaire? Une option serait d'utiliser un IE commentaire conditionnel spécifique pour charger Répondre. Une autre option consiste à utiliser yepnope et Modernizr pour tester la prise en charge des requêtes multimédias et charger Répondre si nécessaire. Ce qui serait plus efficace et sans faute.

Enfin, si je choisis de séparer les deux scripts et d'utiliser Modernizr pour charger Répondre si besoin, j'ai rencontré les deux techniques suivantes:

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

OR

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

J'ai trouvé que le second plantait IE8, mais devait juste avoir besoin d'être réécrit. Quelle technique recommanderiez-vous?

Merci pour votre aide.

javascripthtml5css3modernizrpolyfills
45
dropseed

Tout d'abord, je crois comprendre que lors du regroupement de Modernizr avec Respond.js, aucun autre codage ou test n'est requis pour la prise en charge des requêtes multimédias dans IE8 et les versions antérieures. En d'autres termes, lorsque Respond.js est fourni avec Modernizr, je n'ai qu'à charger Modernizr dans ma source pour activer Respond.js. Correct?

Eh bien, vous avez besoin d'au moins quelques requêtes multimédias CSS3 pour vous aider à démarrer. Respond.js est essentiellement une implémentation JavaScript de requêtes multimédias pour les navigateurs qui ne les prennent pas en charge (par exemple IE moins de 8). Assurez-vous simplement que la référence à Respond.js vient APRÈS votre CSS3 requêtes médias ( link ).

Donc, oui, en supposant que vous avez Respond.js fourni avec Modernizr à partir d'une construction personnalisée ou autre, et qui est chargé après votre CSS3, vous êtes tous bons. Aussi, Modernizr a besoin de plus de configuration dans le code HTML ( link )

Deuxièmement, pensez-vous que c'est le moyen le plus efficace de prendre en charge les requêtes multimédias dans IE8 et les versions antérieures? En substance, j'inclurais un script Modernizr plus grand que celui requis 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 ne prend pas en charge les navigateurs sans requêtes multimédias prêt à l'emploi. Vous devez l'ajouter dans une version personnalisée. Donc, oui, je pense qu'il est intelligent de toujours inclure la réponse. Minifiée, la bibliothèque n'ajoute qu'un peu plus de 3 Ko, et l'avoir incluse dans le fichier Modernizr n'ajoutera pas une autre requête GET. Je dirais juste de le laisser là pour être prêt à tout.

Troisièmement, j'irais avec la méthode Modernizr. J'aime utiliser de nouvelles choses, tout ce que JavaScript supplémentaire gêne.

16
Andrew

La nouvelle version de Respond inclut des tests de fonctionnalités afin que vous n'ayez pas besoin de Modernizr ou Yepnope!

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

inclus le polyfill window.matchMedia en externe de la fonction principale respond.js. Le code source de ce polyfill est ici https://github.com/paulirish/matchMedia.js , et l'inclure dès le départ rendra les choses plus faciles à maintenir à jour et permettra compression de fichier plus petite pour ceux qui l'incluent déjà via Modernizr ou autrement (si vous l'êtes, vous pouvez le supprimer de Respond.js).

Vous devez également noter que l'utilisation de yepnope.js peut entraîner un retard dans lequel vous voyez les styles de requête non multimédias avant que les styles de requête multimédias soient analysés et appliqués. La recommandation est que vous mettiez respond.js dans l'en-tête pour éviter cela autant que possible, bien qu'il soit également bon de garder vos fichiers js dans le pied de page à votre place.

5
tkane2000

Les tests de fonctionnalités pourraient être dans une nouvelle bibliothèque comme le dit tkane2000 ... Je voulais juste mentionner que vous pourriez probablement le faire également via Modernizr:

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

L'affiche originale a, je pense, une vérification de requête de média invalide '(seulement tous)' ... Ne devrait pas être une parenthèse basée sur certaines choses que j'ai lues. Une fois que j'ai supprimé les parens, respond.js semble être inclus de manière appropriée.

4
armyofda12mnkeys