Points de base
getComputedStyle pour charger ou uniquement dans les navigateurs pris en charge ou exécuter le script. "Couper la moutarde" est un terme inventé par Tom Maslen de la BBC. Cette méthode utilise JavaScript pour vérifier les fonctionnalités du navigateur, puis charger plus de CSS et JavaScript pour fournir une expérience "améliorée";
Récemment, l'intérêt pour la "coupe de la moutarde" a augmenté, tel que "migrer vers Flexbox grâce à" Couper la moutarde "et" coupe de moutarde côté serveur ", et des améliorations plus largement progressives.
Méthode d'amélioration
Cependant, d'après mon expérience, même une expérience "noyau" très basique peut causer des problèmes sur certains navigateurs très anciens, donc je veux améliorer cela pour voir s'il est possible de le rejeter complètement ne laissant que HTML derrière.
Bien sûr, la solution évidente est d'utiliser JavaScript pour charger conditionnellement tous les CSS (si le navigateur passe le test "Cutting the Mustard"), mais cela me semble trop rude; L'appareil sera puni pour n'avoir aucun style. J'ai donc cherché un moyen de résoudre ce problème en utilisant CSS uniquement et j'ai trouvé un ancien article de Craig Buckler. Après de nombreuses expériences et ajustements, j'ai trouvé la méthode suivante:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
Analysons ce qui se passe ici.
Principe de travail
La requête multimédia pour le premier élément <link> permet uniquement à la feuille de styles d'être chargée dans les navigateurs suivants:
La requête multimédia pour le deuxième élément <link> permet uniquement à la feuille de styles d'être chargée dans les navigateurs suivants:
Lorsqu'il est utilisé en conjonction, cette technique ne charge pas de feuilles de style à moins que le navigateur ne soit le suivant:
Remarque: La feuille de style n'est chargée qu'une seule fois quel que soit le nombre d'éléments <link>.
Les requêtes multimédias peuvent être combinées en un élément <link> par des déclarations de séparation des virgules, comme indiqué ci-dessous:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
Cependant, je préfère personnellement les séparer parce que je trouve plus facile de voir ce qui se passe.
Donc, si vous construisez les balises de manière sémantique et accessible, les navigateurs hérités sont toujours en mesure de visualiser le contenu que vous ne stylisez pas en HTML ordinaire.
C'est bien sûr très subjectif, mais mon point est que quiconque utilise encore ces navigateurs devrait être en mesure d'obtenir ce dont ils ont besoin. Il est très probable qu'en fournissant à ces navigateurs CSS pour les navigateurs plus récents, un contenu sera interrompu, ce qui peut signifier que la page est complètement inutilisable. En utilisant cette méthode, ils peuvent obtenir au moins une page propre. Plus important encore, vous n'aurez plus jamais besoin de tester dans ces navigateurs. Vous avez terminé! Du moins, en théorie.
Bien sûr, vos besoins de soutien peuvent varier, mais l'avantage de cette technologie est que vous pouvez y construire. Par exemple, si vous devez ajouter la prise en charge de IE8, vous pouvez utiliser des annotations conditionnelles pour charger la même feuille de style uniquement pour ce navigateur:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
avec une requête multimédia cible comme suit: <link>
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
autres , cela ajoutant simplement la prise en charge de cet ensemble d'autres navigateurs.
<link> Vous pouvez également modifier la requête multimédia principale pour l'élément
<link>
Oui, je suppose qu'ils le sont, mais cela dépend de votre définition. Les requêtes multimédias sont conçues pour tester les fonctionnalités du navigateur avant d'appliquer CSS, et c'est exactement ce que nous voulons faire dans ce cas, bien que indirectement.
Néanmoins, je suis satisfait de la technologie, que ce soit le piratage ou non, et cela fonctionne bien dans tous mes tests, et je prévois de l'utiliser bientôt pour le site de production.
inefficacité
Dans tous les tests que j'ai effectués jusqu'à présent, je n'ai trouvé qu'une seule situation où les choses ne fonctionnent pas comme prévu. Sur Android 4.4, les navigateurs UC ne répondent pas aux requêtes multimédias. Pour autant que je sache, les navigateurs UC utilisent des versions plus anciennes de WebKit, ce qui explique cela.
Si vous souhaitez prendre en charge ce navigateur, vous pouvez forcer le chargement CSS avec un petit nombre d'agents utilisateur reniflant:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
En prime, pour autant que je sache, JavaScript ne peut pas être désactivé dans les navigateurs UC Android, de sorte que les feuilles de style doivent toujours être chargées à moins que les défaillances du réseau, etc.
Bien sûr, si vous constatez que vous devez prendre en charge d'autres navigateurs spécifiques, vous pouvez toujours ajouter à la condition de reniflement de l'agent utilisateur, mais je recommande de l'utiliser avec prudence car elle viole ce type de CSS uniquement But de la technologie.
J'ai fait une page de test pour tester la méthode de base sur différents navigateurs. Si vous trouvez que des navigateurs ne fonctionnent pas comme prévu, ou si vous trouvez d'autres requêtes multimédias qui peuvent ajouter une prise en charge d'un navigateur ou d'un navigateur spécifique, faites-le moi savoir dans les commentaires ou posez une question dans le référentiel GitHub.
Chargez le script?
ok, si vous utilisez CSS pour détecter la prise en charge du navigateur, vous voudrez probablement charger ou exécuter certains ou tous les scripts du navigateur que vous prenez en charge. Alors, comment pouvons-nous faire cela?
D'accord, il y a plusieurs façons de le faire, mais j'ai trouvé que le plus facile est le suivant:
getComputedStyle pour déterminer si votre attribut est défini sur l'élément corporel. Par exemple, la valeur par défaut de l'attribut clear est none. Le régler sur le corps both a peu d'effet sur l'écran de la page (si c'est le cas, vous devez utiliser d'autres propriétés). Ainsi, le code de votre feuille de style ressemblera à ceci:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
dans votre page (ou fichier de script):
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
Code final
Qu'il s'agisse d'un piratage ou non, ce que j'essaie de montrer ici est une méthode réutilisable pour détecter des navigateurs relativement nouveaux et empêcher les navigateurs plus âgés d'appliquer des styles ou d'exécuter des scripts, ce qui leur a montré affichant uniquement le HTML de la page. Il y a très peu de code requis et cela devrait vous permettre de vous concentrer sur la construction de fonctionnalités merveilleuses pour des navigateurs plus modernes en utilisant des technologies plus modernes sans s'en soucier.
Bien que vous n'ayez peut-être pas besoin de tout ce que j'ai fourni ici, assembler toutes les pièces donnera les résultats suivants:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)">
J'ai fait une autre page de test avec tout le contenu supplémentaire ( SitePoint supprime occasionnellement la démo vieille des années hébergée sur des pages HTML distinctes. Nous le faisons pour réduire le code obsolète (avec des vulnérabilités publiques) utilisateurs.
remerciements
Je ne serais pas en mesure de le faire sans le travail de Browserstack, puis-je utiliser et le personnel de Browserhacks et Jeff Clayton, donc grâce à toutes les personnes impliquées, faites-moi savoir si vous avez des idées ou des commentaires.
FAQ sur les requêtes de médias CSS et "Couper la moutarde" (FAQ)
Dans le contexte des requêtes multimédias CSS, "Couper la moutarde" est utilisée pour décrire une technologie dans laquelle un site Web ou une application Web vérifie si le navigateur de l'utilisateur prend en charge certaines fonctionnalités avant de fournir une expérience complète. Si le navigateur ne peut pas "couper la moutarde", un site Web ou une version d'application plus simple et plus basique sera disponible. Cette approche garantit que tous les utilisateurs peuvent accéder au contenu du site Web, quelle que soit la fonctionnalité de leur navigateur.
Pour déterminer si le navigateur "coupe la moutarde", vous pouvez utiliser des tests JavaScript simples. Ce test vérifie si le navigateur prend en charge certaines fonctionnalités telles que querySelector et localStorage. Si le navigateur réussit le test, il est considéré comme «couper la moutarde» et peut gérer l'expérience complète du site Web ou de l'application.
"Couper la moutarde" est importante car elle garantit que votre site Web ou votre application Web est accessible à tous les utilisateurs, quelle que soit la fonctionnalité de leur navigateur. En fournissant une version plus simple du site Web aux navigateurs qui ne peuvent pas "couper la moutarde", vous pouvez vous assurer que tous les utilisateurs ont accès à votre contenu.
Oui, vous pouvez utiliser les requêtes multimédias CSS sans javascript. Cependant, l'utilisation de JavaScript avec CSS Media Queries vous permet de fournir aux utilisateurs une expérience plus personnalisée en fonction de leurs capacités de navigateur.
, querySelector et localStorage. Ce sont toutes des fonctionnalités prises en charge par des navigateurs modernes, mais peuvent ne pas être disponibles dans les navigateurs plus âgés. addEventListener
Que se passe-t-il si le navigateur ne peut pas "couper la moutarde"?
Puis-je personnaliser l'expérience que je fournis à un navigateur qui ne peut pas "couper la moutarde"?
Un inconvénient potentiel de l'utilisation de la technologie «Couper la moutarde» est qu'il nécessite un temps de développement supplémentaire pour créer et tester des versions simplifiées de sites Web ou d'applications. Cependant, les avantages de s'assurer que tous les utilisateurs ont accès au contenu l'emportent souvent sur ce désavantage.
Oui, la technologie de «couper la moutarde» est toujours pertinente aujourd'hui. Bien que les navigateurs modernes prennent en charge une grande variété de fonctionnalités, il y a encore de nombreux utilisateurs utilisant des navigateurs plus anciens qui peuvent ne pas les soutenir. En utilisant la technologie «Couper la moutarde», vous pouvez vous assurer que votre site Web ou votre application est accessible à tous les utilisateurs.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Pièce de dragon d'inscription Bitcoin
La différence entre le langage C et Python
Quelle est la différence entre l'écran d'origine et l'écran assemblé ?
Python est-il front-end ou back-end ?
Quel logiciel est Twitter ?
Que signifie la fréquence d'images ?
Le programme d'installation ne peut pas créer une nouvelle solution de partition système
Java conserve deux décimales
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
