interface Webjs tutorielComment vérifier si un navigateur prend en charge une propriété CSS en utilisant JavaScript ?Comment vérifier si un navigateur prend en charge une propriété CSS en utilisant JavaScript ?
Aperçu
Dans le monde d’aujourd’hui, différents navigateurs sont disponibles sur le système. Par conséquent, il arrive parfois que certaines propriétés des feuilles de style en cascade (C.S.S.) ne fonctionnent pas sur ce navigateur. Ainsi, pour vérifier quelles propriétés CSS sont prises en charge par un navigateur particulier, JavaScript dispose d'une méthode intégrée CSS.supports() qui vérifie si le navigateur prend en charge cette propriété particulière. La méthode supports() est prise en charge dans tous les navigateurs : Opera, Edge, Chrome et Firefox.
Grammaire
La méthode CSS.supports() prend en entrée une paire clé-valeur, qui est au format chaîne. La syntaxe de base utilisée est -
CSS.supports(“propertyName:value”);
supports() - Il s'agit d'une méthode de l'objet CSS qui vérifie si le navigateur prend en charge la propriété passée dans le paramètre supports.
propertyName - Ceci contient le nom de la propriété CSS telle que l'affichage, la position, la marge, le remplissage, le z-index, l'alignement du texte, etc.
value - Il prend la valeur d'une propriété spécifique, telle que flex, absolue, relative, 20 px, gauche, droite, etc.
Donc, pour en savoir plus sur la méthode CSS.Supports(), nous allons passer en revue quelques exemples.
Méthode 1 - Dans cet exemple, nous passerons la valeur de la clé de style CSS directement en tant que paramètre à la méthode CSS.supports(), qui déterminera ensuite si la propriété CSS donnée est prise en charge par ce navigateur.
Algorithme
Étape 1 - Utilisez la méthode supports() présente dans l'objet CSS comme CSS.supports().
Étape 2 - Transmettez toutes les propriétés des feuilles de style en cascade (CSS) comme paramètres.
Étape 3 - Imprimez la méthode CSS.supports() dans la console en utilisant console.log().
Étape 4 - Si true est renvoyé lors du passage d'un attribut, alors cet attribut particulier est pris en charge, sinon le navigateur ne le prend pas en charge.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check CSS property exist in browser using js</title>
</head>
<body>
<h1 id="Open-console-to-see-result-by-pressing-ctrl-shift-i-or-F-on-keyboard">Open console to see result by pressing (ctrl + shift + i) or F12 on keyboard</h1>
<script>
console.log(CSS.supports("float:top"));
console.log(CSS.supports("float:right"));
console.log(CSS.supports("float:bottom"));
console.log(CSS.supports("float:left"));
</script>
</body>
</html>
Sortie
La sortie du code ci-dessus est illustrée dans la figure ci-dessous. Puisque les propriétés "float:top" et "float:bottom" ne sont pas valides, elles renverront false dans la console, tandis que les propriétés "float:right" et "float:left" renverront true si elles sont valides et prises en charge par le navigateur.
Méthode 2 - Dans cette méthode, nous allons créer une interface utilisateur dans laquelle les utilisateurs pourront saisir les propriétés CSS dans les champs donnés et vérifier si leur ou leurs navigateurs prennent en charge ces propriétés CSS. Non.
Algorithme
Étape 1 - Créez deux champs de recherche, un pour la clé et un autre pour la valeur, car les propriétés CSS sont sous forme clé-valeur. Attribuez leurs identifiants spécifiques comme "propertyName" et "pval" respectivement. Créez un autre champ de sortie et un bouton HTML.
Étape 2 - Créez une fonction appelée checkCss() en JavaScript. Les fonctions fléchées seront utilisées.
Étape 3 - Accédez aux deux zones de saisie et stockez-les dans des variables, connectez les valeurs de ces zones dans les variables.
Étape 4 - Passez cette variable de concaténation dans CSS.supports() et vérifiez la condition if-else.
Étape 5 - Si true est renvoyé, la propriété CSS est prise en charge, sinon false est renvoyé et la propriété n'est pas prise en charge.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check CSS property exist in browser using js</title>
<style>
body{
min-height: 90vh;
display: flex;
place-content: center;
flex-direction: column;
text-align: center;
background-color: #0a0a0a;
color: white;
}
input{
width:13rem;
margin: 5px auto;
padding: 0.3rem;
outline: none;
}
button{
width: 5rem;
margin: 0 auto;
padding: 0.2rem;
cursor: pointer;
background-color: transparent;
box-shadow: 0 0 5px white;
border-radius: 5px;
color: white;
border: none;
}
</style>
</head>
<body>
<h1 id="CSS-Property-Validator">CSS Property Validator</h1>
<div id="output" style="width:5rem;margin: 5px auto;padding: 0.2rem;"></div>
<input type="text" id="propertyName" placeholder="Enter propertyName*">
<input type="text" id="pval" placeholder="Enter value*">
<button onclick="checkCss()">Check</button>
<script>
checkCss = () => {
var p = document.getElementById("propertyName").value;
var v = document.getElementById("pval").value;
var pv = p + ":" + v;
if(CSS.supports(pv)){
document.getElementById("output").innerText=CSS.supports(pv);
document.getElementById("output").style.background="green";
document.getElementById("output").style.color="white";
} else {
document.getElementById("output").innerText=CSS.supports(pv);
document.getElementById("output").style.background="tomato";
document.getElementById("output").style.color="white";
}
}
</script>
</body>
</html>
Sortie
La sortie du code ci-dessus est comme le montre la figure ci-dessous. Les utilisateurs peuvent saisir les propriétés CSS dans la zone de saisie donnée et vérifier si votre navigateur prend en charge ces propriétés. Comme le montre la figure ci-dessous, l'attribut "display:block" est pris en charge. par le navigateur et est valide, il renvoie true.
Le résultat est comme indiqué dans la figure ci-dessous, et false est renvoyé, donc les attributs renseignés dans la zone de saisie ne sont pas valides et ne sont pas pris en charge par le navigateur.
Conclusion
Le type de retour de la méthodesupports() est booléen car elle renvoie vrai ou faux selon que le navigateur actuel prend en charge la propriété CSS. L'interface de l'exemple 2 est particulièrement utile pour les développeurs car elle élimine le besoin de vérifier à plusieurs reprises la console ; entrez simplement le nom et la valeur de votre propriété CSS dans les champs de saisie et vous serez informé si le navigateur actuel la prend en charge.
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!
Python vs JavaScript: une analyse comparative pour les développeursMay 09, 2025 am 12:22 AMLa principale différence entre Python et JavaScript est le système de type et les scénarios d'application. 1. Python utilise des types dynamiques, adaptés à l'informatique scientifique et à l'analyse des données. 2. JavaScript adopte des types faibles et est largement utilisé pour le développement frontal et complet. Les deux ont leurs propres avantages dans la programmation asynchrone et l'optimisation des performances, et doivent être décidées en fonction des exigences du projet lors du choix.
Python vs JavaScript: Choisir le bon outil pour le travailMay 08, 2025 am 12:10 AMQue ce soit pour choisir Python ou JavaScript dépend du type de projet: 1) Choisissez Python pour les tâches de science et d'automatisation des données; 2) Choisissez JavaScript pour le développement frontal et complet. Python est favorisé pour sa bibliothèque puissante dans le traitement et l'automatisation des données, tandis que JavaScript est indispensable pour ses avantages dans l'interaction Web et le développement complet.
Python et Javascript: comprendre les forces de chacunMay 06, 2025 am 12:15 AMPython et JavaScript ont chacun leurs propres avantages, et le choix dépend des besoins du projet et des préférences personnelles. 1. Python est facile à apprendre, avec une syntaxe concise, adaptée à la science des données et au développement back-end, mais a une vitesse d'exécution lente. 2. JavaScript est partout dans le développement frontal et possède de fortes capacités de programmation asynchrones. Node.js le rend adapté au développement complet, mais la syntaxe peut être complexe et sujet aux erreurs.
Core de JavaScript: est-il construit sur C ou C?May 05, 2025 am 12:07 AMJavascriptisnotbuiltoncorc; il est en interprétéLanguageThatrunSoninesoftenwritteninc .1) javascriptwasdesignedasalightweight, interprété de LanguageForwebbrowsers.2) EnginesevolvedFromSimpleInterpreterstoJitCompilers, typicalinc, impropringperformance.
Applications JavaScript: de front-end à back-endMay 04, 2025 am 12:12 AMJavaScript peut être utilisé pour le développement frontal et back-end. L'endouage frontal améliore l'expérience utilisateur via les opérations DOM, et le back-end gère les tâches du serveur via Node.js. 1. Exemple frontal: modifiez le contenu du texte de la page Web. 2. Exemple backend: Créez un serveur Node.js.
Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AMLe choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.
Frameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AMLa puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.
La relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AMINTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Dreamweaver CS6
Outils de développement Web visuel
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
