Respond
1.4.2
Copyright 2011 : Scott Jehl, scottjehl.com
Sous licence MIT.
L'objectif de ce script est de fournir un script rapide et léger (3 Ko minifiés / 1 Ko gzippé) pour permettre des conceptions Web réactives dans les navigateurs qui ne prennent pas en charge les requêtes multimédias CSS3 - en particulier Internet Explorer 8 et versions antérieures. Il est écrit de telle manière qu'il corrigera probablement également la prise en charge d'autres navigateurs non pris en charge (plus d'informations à ce sujet bientôt).
Si vous n'êtes pas familier avec les concepts entourant le Responsive Web Design, vous pouvez lire ici et également ici
Page de démonstration (les couleurs changent pour montrer que les requêtes multimédias fonctionnent)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}Référencez le script respons.min.js (1 Ko min/gzippé) après tout votre CSS (plus il s'exécute tôt, plus les utilisateurs d'IE ont de chances de ne pas voir un flash de contenu non multimédia)
Ouvrez Internet Explorer et pompez vos poings avec délice
Respond.js fonctionne en demandant une copie vierge de votre CSS via AJAX, donc si vous hébergez vos feuilles de style sur un CDN (ou un sous-domaine), vous devrez configurer un proxy local pour demander le CSS pour les anciens navigateurs IE. Les versions précédentes recommandaient une approche x-domain obsolète, mais un proxy local est préférable (pour des raisons de performances et de sécurité) plutôt que de tenter de contourner les limitations inter-domaines.
Quelques notes à garder à l’esprit :
L'objectif de ce script est volontairement très restreint : seules les requêtes multimédias de largeur minimale et maximale et tous les types de médias (écran, impression, etc.) sont traduits vers des navigateurs non pris en charge. Je voulais garder les choses simples en termes de taille de fichier, de maintenance et de performances, j'ai donc intentionnellement limité la prise en charge aux requêtes essentielles à la création d'une conception réactive (mobile-first). À l'avenir, je retravaillerai peut-être un peu les choses pour inclure un crochet permettant d'intégrer des fonctionnalités supplémentaires de requête multimédia - restez à l'écoute !
Les navigateurs qui prennent en charge nativement les requêtes multimédias CSS3 ne peuvent pas exécuter ce script le plus rapidement possible. Lors des tests de prise en charge, tous les autres navigateurs sont soumis à un test rapide pour déterminer s'ils prennent en charge les requêtes multimédias ou non avant de procéder à l'exécution du script. Ce test est désormais inclus séparément en haut et utilise le polyfill window.matchMedia trouvé ici : https://github.com/paulirish/matchMedia.js . Si vous incluez déjà ce polyfill via Modernizr ou autrement, n'hésitez pas à supprimer cette partie.
Ce script ne repose sur aucun autre script ou framework (à part le polyfill matchMedia inclus) et est optimisé pour la livraison mobile (~ 1 Ko de taille totale de fichier min/gzip)
Comme vous pouvez le deviner, cette implémentation est assez stupide en ce qui concerne les règles d'analyse CSS. C'est une bonne chose, car cela lui permet de courir très vite, mais son relâchement peut également provoquer un comportement inattendu. Par exemple : si vous entourez une requête multimédia entière dans un commentaire dans l'intention de désactiver ses règles, vous constaterez probablement que ces règles finiront par être activées dans les navigateurs ne prenant pas en charge les requêtes multimédias.
Respond.js n'analyse pas le CSS référencé via @import, et ne fonctionne pas non plus avec les requêtes multimédias dans les éléments de style, car ces styles ne peuvent pas être redemandés pour l'analyse.
En raison de restrictions de sécurité, certains navigateurs peuvent ne pas autoriser ce script à fonctionner sur les URL file:// (car il utilise xmlHttpRequest). Exécutez-le sur un serveur Web.
Si la demande du fichier CSS qui inclut un style spécifique à MQ est à l'origine d'une redirection, Respond.js échouera silencieusement. Les fichiers CSS doivent répondre avec un statut 200.
Actuellement, les attributs multimédias sur les éléments de lien sont pris en charge, mais uniquement si la feuille de style liée ne contient aucune requête multimédia. S'il contient des requêtes, l'attribut media sera ignoré et les requêtes internes seront analysées normalement. En d’autres termes, les instructions @media dans le CSS sont prioritaires.
Apparemment, si les fichiers CSS sont codés en UTF-8 avec Byte-Order-Mark (BOM), ils ne fonctionneront pas avec Respond.js dans IE7 ou IE8. Noté dans le numéro 97
AVERTISSEMENT : l'inclusion de règles @font-face dans une requête multimédia entraînera le blocage d'IE7 et d'IE8 pendant le chargement. Pour contourner ce problème, placez les règles @font-face au grand jour, en tant que sœurs des autres requêtes multimédias.
Si vous avez plus de 32 feuilles de style référencées, IE générera une erreur, Invalid procedure call or argument . Concaténez votre CSS et le problème devrait disparaître.
Les mappages sources Sass/SCSS ne sont pas pris en charge ; @media -sass-debug-info cassera respons.js. Noté dans le numéro 148
Internet Explorer 9 prend en charge les requêtes multimédia CSS3, mais pas dans les frames lorsque le CSS contenant la requête multimédia se trouve dans un fichier externe (cela semble être un bug dans IE9 — voir https://stackoverflow.com/questions/10316247/media-queries -fail-inside-ie9-iframe). Consultez ce commit pour un correctif si vous rencontrez ce problème. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
Les requêtes multimédias imbriquées ne sont pas prises en charge
Fondamentalement, le script parcourt le CSS référencé dans la page et exécute une ou deux expressions régulières sur leur contenu pour rechercher les requêtes multimédias et leurs blocs de CSS associés. Dans Internet Explorer, le contenu de la feuille de style est impossible à récupérer dans son état pré-analysé (ce qui dans IE 8- signifie que ses requêtes multimédias sont supprimées du texte), donc Respond.js demande à nouveau les fichiers CSS en utilisant Ajax et analyse la réponse textuelle à partir de là. Assurez-vous de configurer correctement la mise en cache de vos fichiers CSS afin que cette nouvelle demande ne parvienne pas réellement au serveur, mais plutôt au cache de votre navigateur.
À partir de là, chaque bloc de requête multimédia est ajouté à l'en-tête dans l'ordre via des éléments de style, et ces éléments de style sont activés et désactivés (lire : ajoutés et supprimés du DOM) en fonction de la façon dont leur largeur min/max se compare à la largeur du navigateur. L'attribut media sur les éléments de style correspondra à celui de la requête dans le CSS, il pourrait donc s'agir de "écran", "projecteur" ou ce que vous voulez. Tous les chemins relatifs contenus dans le CSS seront préfixés par le href de leur feuille de style, de sorte que les chemins d'image seront dirigés vers leur destination appropriée.
Bien sûr, quelques-uns :
Ce n'est pas le seul script polyfill CSS3 Media Query ; mais c'est peut-être le plus rapide.
Si vous recherchez une prise en charge plus robuste de CSS3 Media Query, vous pouvez consulter https://code.google.com/p/css3-mediaqueries-js/. Lors des tests, j'ai constaté que ce script était sensiblement lent lors du rendu de conceptions réactives complexes (à la fois en termes de taille de fichier et de performances), mais il prend en charge beaucoup plus de fonctionnalités de requête multimédia que ce script. Un grand coup de chapeau aux auteurs ! :)
