Share
N'est-il pas amusant de jouer avec les dernières techniques CSS, telles que les ombres et les transitions? Un seul problème: comment compenser, ou plus important encore, détecter les navigateurs qui ne les prennent pas en charge? Eh bien, il y a quelques solutions. Dans ce didacticiel et screencast, cependant, nous allons créer une fonction JavaScript qui acceptera un nom de propriété CSS en tant que paramètre et renverra un booléen, indiquant si le navigateur prend en charge ou non la propriété transmise.
Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!
Commençons par déterminer Comment nous voulons appeler notre une fonction. Nous allons garder les choses simples ici; quelque chose comme ce qui suit devrait faire l'affaire:
Accentsconagua
if (prend en charge ('textShadow')) document.documentElement.className + = 'textShadow'; Cela devrait être la finale une fonction appel. Lorsque nous passons un nom de propriété CSS à la les soutiens() fonction, ça va retourner un booléen. Si vrai, nous attacherons un nom du cours au documentElement, ou . Cela nous fournira alors un nouveau nom de classe à accrocher, à partir de notre feuille de style.
Ensuite, nous allons construire le fonction supports ().
var prend en charge = (fonction () ) ();
Pourquoi ne faisons-nous pas les soutiens égal à une fonction standard? La réponse est parce que nous avons un peu de préparation travailler en premier, et il n'y a absolument aucune raison de répéter ces tâches encore et encore chaque une fois la fonction est appelée. Dans de tels cas, il est préférable de faire les soutiens égal à tout ce qui est retourné par la fonction auto-exécutable.
Pour tester si le navigateur prend en charge des propriétés spécifiques, nous devons créer un élément * factice *, à des fins de test. Cet élément généré ne sera jamais réellement inséré dans le DOM; Pensez-y comme un mannequin d'essai!
var div = document.createElement ('div'); Comme vous le savez probablement, il existe une poignée de préfixes de fournisseur que nous pouvons utiliser lorsque vous utilisez des propriétés CSS3:
Notre JavaScript devra filtrer ces préfixes et les tester. Alors, plaçons-les dans un tableau; nous l'appellerons, vendeurs.
var div = document.createElement ('div'), vendors = 'Khtml Mme O Moz Webkit'.split ("); En utilisant le
Divisé()fonction pour créer untableaudechaîneest certes paresseux, mais cela économise une poignée de secondes!
Comme nous allons filtrer à travers cette tableau, soyons bons garçons et filles et cachez le longueur du tableau ainsi que.
var div = document.createElement ('div'), vendors = 'Khtml Mme O Moz Webkit'.split ("), len = vendors.length; le préparation travail, ci-dessus, est statique, dans la nature, et n'a pas besoin d'être répété chaque fois que nous appelons les soutiens(). C'est pourquoi nous ne l'exécutons qu'une fois, lors du chargement de la page. Maintenant revenir la une fonction qui sera effectivement attribué à la les soutiens variable.
fonction de retour (prop) ;
La beauté de
fermeturesest-ce que même siles soutiens()est égal à celui retournéune fonction, il a toujours accès audiv,vendeurs, etlenles variables.
Le test immédiat: si la propriété passée est disponible pour le divde style attribut, nous savons que le navigateur prend en charge la propriété; alors retourne vrai.
fonction de retour (prop) if (prop dans div.style) return true; ;
Pensez, par exemple, au ombre de texte Propriété CSS3. La plupart des navigateurs modernes le prennent en charge, sans avoir besoin d'un préfixe de fournisseur. Dans cet esprit, pourquoi filtrer tous les préfixes si nous n’avons pas besoin de le faire? C'est pourquoi nous plaçons ceci vérifier au sommet.
Vous êtes probablement habitué à taper les noms de propriétés CSS3, comme ceci: -moz-box-shadow. Cependant, si, dans Firebug, vous passez en revue le style objet, vous constaterez que c'est orthographié, MozBoxShadow. En tant que tel, si nous testons:
'mozboxShadow' in div.style // false
Faux sera retourné. Cette valeur est sensible à la casse.
Cela signifie que si l'utilisateur passe boîte ombre au les soutiens() fonction, ça va échouer. Réfléchissons bien et vérifions si la première lettre de l'argument est en minuscule. Si c'est le cas, nous allons corriger l'erreur pour eux.
fonction de retour (prop) if (prop dans div.style) return true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); ;
Des expressions régulières à la rescousse! Ci-dessus, nous vérifions s’il ya une seule lettre minuscule au début de la chaîne (^). Seulement à la condition qu'on en trouve, on utilise le toUpperCase () fonction pour capitaliser la lettre.
Nous devons ensuite filtrer à travers le vendeurs tableau, et tester s'il y a une correspondance. Par exemple, si boîte ombre est passé, nous devrions tester si le style attribut du div contient l'un des éléments suivants:
Si une correspondance est trouvée, nous pouvons retourne vrai, car le navigateur prend effectivement en charge les ombres de boîte!
fonction de retour (prop) if (prop dans div.style) return true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); while (len--) if (vendeurs [len] + prop dans div.style) return true; ;
Bien que nous puissions utiliser un pour déclaration pour filtrer à travers le tableau, il n'y a pas vraiment besoin de dans ce cas.
tandis que les instructions sont plus rapides à taper et nécessitent moins de caractères Ne soyez pas confus par vendeurs [len] + prop; remplacez simplement ces noms par leurs valeurs réelles: MozBoxShadow.
Mais que se passe-t-il si aucune de ces valeurs ne correspond? Dans ce cas, le navigateur ne semble pas supporter la propriété, auquel cas nous devrions retourne faux.
while (len--) if (vendeurs [len] + prop dans div.style) return true; return false;
Cela devrait le faire pour notre fonction! Testons-le en appliquant un nom du cours au html élément, si le navigateur prend en charge, par exemple, la trait de texte propriété (ce que seul webkit fait).
if (prend en charge ('textStroke')) document.documentElement.className + = 'textStroke'; Avec un classe nommer que nous pouvons maintenant crochet sur, essayons-le dans notre feuille de style.
/ * repli * / h1 couleur: noir; / * Prise en charge du trait de texte * / .textStroke h1 color: white; -webkit-text-stroke: 2px noir;
var prend en charge = (function () var div = document.createElement ('div'), vendors = 'Khtml dans div.style) return true; prop = prop.replace (/ ^ [az] /, function (val) return val.toUpperCase ();); while (len--) if (vendeurs [len] + prop in div.style) // le navigateur supporte box-shadow. Faites ce dont vous avez besoin. // Ou utilisez un bang (!) pour vérifier si le navigateur ne fonctionne pas. return true; return false;;) (); if (prend en charge ('textShadow')) document.documentElement.className + = 'textShadow'; Pour une solution plus complète, reportez-vous à la bibliothèque Modernizr.
