Share
Dans ce didacticiel, nous allons passer en revue deux approches pour détecter si un navigateur prend en charge certaines fonctionnalités CSS ou non. Le premier tire parti de Modernizr, une bibliothèque JavaScript populaire, et le second propose des requêtes, une solution CSS prometteuse..
Alors commençons!
Comme mentionné ci-dessus, Modernizr est une bibliothèque JavaScript légère qui détecte les fonctionnalités HTML5 et CSS3 dans votre navigateur. Tant que votre page est chargée, celle-ci fonctionne en arrière-plan et effectue des tests de fonctionnalités. Ensuite, il stocke les résultats en tant que propriétés d’un objet JavaScript et en tant que classes de html élément. Plus sur cela plus tard.
Pour installer et utiliser Modernizr, vous pouvez visiter son site et télécharger la version préférée..
Remarque: la version actuelle de Modernizr est la 2.8.3 au moment de la rédaction, bien que la version 3 soit presque prête. En fait, l’équipe derrière la bibliothèque compte la lancer dans les semaines à venir. Un bref aperçu de cette nouvelle version est disponible ici. En outre, vous pouvez en obtenir la version bêta en visitant ce lien.
Une fois téléchargé, placez le fichier JavaScript dans votre projet et incluez-le dans le de votre page html. Dernier point mais non le moindre, pour activer la fonctionnalité de Modernizr, vous devez ajouter le non-js classe à la html élément.
Dans les deux prochaines sections, je couvrirai les principes de base de Modernizr. Pour des concepts plus avancés, assurez-vous de lire la documentation..
Comme discuté ci-dessus, Modernizr ajoute un certain nombre de classes au html élément. Les noms de classe dépendent de la prise en charge du navigateur. Si le navigateur ne reconnaît pas certains des tests de fonctionnalité, Modernizr ajoute le non- préfixe avant ses noms de classe intégrés. Par exemple, supposons que nous testions les effets de réflexion, la html L'élément sur Chrome 40 ressemble à ceci:
Alors que sur Firefox 35:
Remarquez aussi le js classe. Lorsque Modernizr s'exécute, en supposant que JavaScript soit activé dans notre navigateur, il remplace l'ancien non-js classe avec le nouveau.
Sur la base des résultats obtenus lors des tests de Modernizr, nous pouvons personnaliser nos feuilles de style..
Pour commencer, voici le code HTML de base que nous utiliserons pour la suite du tutoriel:
Réflexions CSS
En utilisant les classes données par Modernizr, nous modifions les styles des h2 élément comme suit:
h2 color: # c0ccdb; taille de police: 3em; .cssreflections h2 -webkit-box-reflect: inférieur à -45m -webkit-gradient (linéaire, gauche en haut, gauche en bas, à partir de (transparent), couleur-stop (0%, transparent), à (rgba (255, 255, 255, 0,75))); .no-cssreflections h2 text-shadow: 0 1px 0 # 136ed1, 0 2px 0 # 126ac9, 0 3px 0 # 1160b6, 0 4px 0 # 105cad, 0 5px 0 # 0f56a2, 0 6px 1px rgba (0,0, 0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2) , 0 5px 10px rgba (0,0,0, 0,25), 0 10px 10px rgba (0,0,0, 0,2), 0 20px 20px rgba (0,0,0, 0,15);
Les navigateurs Webkit prenant en charge les réflexions affichent le h2 élément comme suit:
Alors que le reste d’entre eux (du moins ceux qui soutiennent la ombre de texte propriété) appliquera un effet différent, basé sur un effet de texte 3D de Mark Otto:
Voici l'exemple sur Codepen:
La seconde façon de vérifier les résultats obtenus par les tests de Modernizr est d'utiliser JavaScript. Comme déjà mentionné, Modernizr crée un objet avec les noms de propriétés des fonctions configurées pour les tests. La plupart du temps, leurs valeurs reviennent soit vrai ou faux.
La capture d'écran ci-dessous montre comment Firefox 35 affiche l'objet Modernizr (onglet Console):
Comme on peut voir le Modernzir.cssreflections la propriété retourne un faux valeur. Cela se produit car Chrome, Safari et Opera sont les seuls navigateurs prenant en charge les réflexions (au moment de la rédaction)..
Voici comment nous pourrions reproduire l’exemple précédent avec JavaScript en ajoutant le réflexion et pas de réflexion cours à notre manuellement:
Accentsconagua
var element = document.getElementById ('réflexion'); if (Modernizr.cssreflections) element.className = 'réflexion'; else element.className = 'pas de réflexion'; Puis coiffez avec le CSS correspondant:
.réflexion / * applique la propriété de réflexion * / .no-reflect / * applique la propriété text-shadow * /
Et la nouvelle démo sur Codepen:
Sans aucun doute, Modernizr est un outil précieux dans l'arsenal de chaque développeur frontend. Mais ne serait-il pas préférable de reproduire les tests de Modernizr avec du CSS pur? Heureusement, nous pouvons le faire en utilisant des requêtes de fonctionnalités. Ce sont des règles conditionnelles qui nous permettent d’appliquer différents styles en fonction de la prise en charge du navigateur. Ils fonctionnent comme des requêtes de médias. Et oui, en plus de l'édition CSS, ils utilisent également JavaScript.
Prêt à regarder?
Pour définir les requêtes d’entités dans notre CSS, nous devons utiliser le @les soutiens et @supports not règles. Leur syntaxe ressemble à ceci:
@supports (condition de test) / * applique les règles * / @supports not (condition de test) / * applique les règles * /
La condition comprend valeur de la propriété paires de fonctionnalités que nous voulons tester. Les navigateurs prenant en charge les fonctionnalités appliquent les règles de cible, que nous spécifions dans @les soutiens règle. Sinon, les styles au sein de la @supports not règle sont exécutés.
En utilisant le ET et / ou OU opérateurs logiques, nous pouvons créer des tests complexes. Cependant, gardez à l'esprit que ces opérateurs doivent être séparés par des parenthèses.
Voyons deux exemples. Comme nous le savons déjà, notre code HTML est extrêmement simple! C'est juste un h2 élément.
Dans ce premier exemple, nous utilisons le Couleur de fond propriété pour spécifier la couleur de fond de la corps élément. Pour rendre les choses plus intéressantes, nous créons également une variable CSS. La prise en charge du navigateur est divisée en catégories suivantes:
En fonction de ces circonstances, le corps l'élément montrera un autre Couleur de fond.
Voici le code CSS basé sur les hypothèses ci-dessus:
corps --bg-color: # 98FB98; couleur de fond: kaki; @supports (background-color: var (- bg-color)) body background-color: var (- bg-color); @supports not (background-color: var (- bg-color)) body background-color: tomato;
Par exemple sur Safari, qui appartient à la troisième catégorie, notre élément ressemblerait à ceci:
Ensuite, Chrome, qui peut interpréter la requête de fonctionnalité, mais ne prend pas en charge les variables CSS, appartient à la deuxième catégorie:
Enfin, Firefox, qui appartient à la première catégorie:
Et l'exemple intégré sur Codepen:
Dans ce cas, nous étendrons la condition de test pour qu'elle contienne un seconde règle. Plus précisément, nous ciblons maintenant les navigateurs qui prennent en charge non seulement les réflexions mais également les effets de trait de texte..
Voici le code pour ce comportement:
@supports ((/ * condition de réflexions * /) et (-webkit-text-stroke: 1px tomato)) h2 / * applique la propriété de réflexion * / -webkit-text-stroke: 1px tomato; @supports not ((/ * condition de réflexion * /) et (/ * condition de trait * /)) h2 / * application de la propriété text-shadow * /
Par exemple, les navigateurs (au moment de la rédaction de ce document, uniquement Chrome 28+) prenant en charge les requêtes de fonction, les réflexions et les effets de trait de texte afficheront le texte. h2 élément comme suit:
Vous trouverez ci-dessous l'exemple intégré à Codepen:
Les requêtes de fonctionnalité peuvent également être définies via JavaScript. Pour ce faire, nous devons utiliser le CSS.supports méthode. Voici ses paramètres possibles:
CSS.supports (propertyName, propertyValue) CSS.supports (condition de test)
Le résultat de cette méthode est un Booléen valeur indiquant si le navigateur prend en charge la ou les fonctionnalités. Enfin, nous devrions envelopper les paramètres entre guillemets simples ou doubles.
En utilisant l'édition JavaScript des requêtes sur les fonctionnalités, notre dernier exemple peut être reproduit comme suit:
var result = CSS.supports ('(/ * condition de réflexion * /) et (/ * condition de trait * /)'); var element = document.getElementById ('réflexion'); if (résultat) element.className = 'réflexion'; else element.className = 'pas de réflexion'; La démo correspondante:
De manière générale, la prise en charge par le navigateur des requêtes de fonctionnalités est bonne. Au moment de la rédaction de cet article, Firefox (22+), Chrome (28+) et Opera (12.1+) prennent tous en charge cette fonctionnalité CSS. Espérons que les prochaines versions d'IE comprendront les règles de condition (elles y travaillent!).
Si vous souhaitez utiliser des requêtes de fonctionnalités dans vos projets, mais que vous êtes un peu sceptique quant aux navigateurs les comprenant, vous trouverez ci-dessous quelques polyfill utiles:
Dans ce didacticiel, j'ai présenté deux méthodes utiles que vous pouvez utiliser pour fournir des expériences fiables entre navigateurs. Tirer parti de Modernizr et / ou de requêtes sur les fonctionnalités vous aidera à comprendre les avantages de la conception pour fonctionnalités et pas pour navigateurs. Modernizr est la solution stable actuelle, mais les requêtes sur les fonctionnalités arrivent, vous avez donc le choix!
