Comment utiliser les requêtes de fonctionnalité CSS

Le monde de la conception Web est en constante évolution et il est passionnant de suivre les nouvelles tendances de conception en CSS. Si vous êtes l'un des premiers à adopter CSS, vous avez peut-être déjà hâte d'utiliser des éléments tels que les dispositions de grille CSS, les modes de fusion CSS ou quelque chose avec une flexibilité typographique qui permet de créer facilement des lettrines avec CSS.

Avec autant de nouvelles avancées en matière de CSS, il est passionnant de savoir que de nouvelles façons de concevoir des sites Web sont dans le domaine du possible. Traditionnellement, les concepteurs devaient attendre pour créer des sites avec ces nouvelles techniques en raison du problème de prise en charge des navigateurs. Vous ne voulez pas créer pour vos clients un site que la plupart des navigateurs ne peuvent pas prendre en charge, n'est-ce pas ? Cela peut souvent être décevant pour ceux qui «conçoivent à l'avance», mais tout espoir n'est pas perdu. Le plus souvent, il existe un moyen de créer une bonne expérience pour tous les utilisateurs, quel que soit le navigateur qu'ils utilisent. Nous ne pouvons pas faire grand-chose pour forcer le support de navigateur souhaité de nos clients, mais il existe des moyens de donner vie à nos conceptions, même avec des limitations. C'est là qu'interviennent les requêtes de fonctionnalité CSS.

Comment tenir compte de la prise en charge inégale des navigateurs dans la conception Web

Les termes « dégradation gracieuse » et « amélioration progressive » vous disent quelque chose ? Ce sont probablement deux termes que vous utilisez régulièrement lorsque vous discutez des moyens d'aider avec les limitations des anciens navigateurs. Même si vous n'appelez pas ces approches par leur nom, vous avez probablement mis les concepts de celles-ci en action.

Avant de plonger dans les requêtes de fonctionnalités CSS, il est important de comprendre les moyens courants de traiter les incohérences du navigateur. Ces deux approches existent depuis bien plus longtemps et offrent deux manières différentes de penser le design.

Dégradation progressive

En plus de sonner comme un nom de groupe des années 90, la dégradation gracieuse utilise l'idée de fournir toutes les cloches et tous les sifflets dans les navigateurs plus modernes, mais se "dégradera gracieusement" à un niveau de fonctionnalité inférieur dans les navigateurs plus anciens.

Il est tentant d'opter pour le facteur "wow" tout le temps en utilisant tous les nouveaux attributs CSS brillants que vous pouvez, mais il est important de ne pas perdre de vue ce qui est le plus important, à savoir le contenu réel du site. C'est pourquoi vos visiteurs sont là; ils doivent pouvoir visualiser et interagir facilement avec le contenu du site. Dans les navigateurs plus anciens, l'expérience peut ne pas être aussi agréable, mais elle fournira à vos utilisateurs une fonctionnalité de base adéquate pour qu'ils puissent toujours voir le contenu du site sans que des éléments apparaissent cassés ou manquants sur la page.

Amélioration progressive

Fondamentalement, l'amélioration progressive est comme la dégradation gracieuse, sauf en arrière. L'approche est similaire, mais elle fait les choses dans l'autre sens. Une expérience utilisateur de base est prévue pour tous les navigateurs afin qu'il y ait une cohérence avec la façon dont les choses sont rendues à un niveau de base, pour garantir que le contenu peut être visualisé de manière adéquate et que l'utilisateur peut effectuer toutes les tâches nécessaires avec ce qui est fourni. Des fonctionnalités plus avancées sont alors intégrées et seront disponibles pour les navigateurs qui peuvent les afficher.
Une bonne façon d'y penser est que la dégradation gracieuse commence de manière complexe dans le but de fournir une expérience simple en cas de besoin. Les améliorations progressives commencent simplement et s'ajoutent ensuite à l'expérience riche en fonctionnalités souhaitée.

Modernisateur

Comment créer une mise en page simple avec CSS Grid Layouts

Si vous vous êtes déjà essayé à la conception d'impression, vous savez d'où vient l'idée des mises en page en grille. Une grille est un outil de mesure précis utilisé pour positionner des éléments de conception sur une page. Cette idée vous revient souvent...

Modernizer est l'outil le plus largement adopté dans une amélioration progressive. Modernizr est une bibliothèque JavaScript qui vérifie si un navigateur prend en charge les technologies Web de nouvelle génération. Je n'entrerai pas dans tous les détails techniques ici, mais en gros, Modernizer vérifie si une fonctionnalité est disponible dans le navigateur et renvoie true ou false . Cela permet aux développeurs de tester certaines des nouvelles technologies et de fournir des solutions de rechange pour les navigateurs qui ne les prennent pas en charge. Il devient nécessaire de noter quand les polyfills sont nécessaires.

C'est une bonne solution, mais Modernizer nécessite JavaScript, qui est de petite taille mais encore plus lent que d'utiliser uniquement CSS. Et même si ce n'est pas courant, que se passe-t-il si JavaScript ne s'exécute pas ? Cela va à l'encontre de l'objectif, ce qui fait des requêtes de fonctionnalités une option assez attrayante pour gérer les incohérences du navigateur.

Requêtes de fonctionnalité CSS

Les requêtes de fonctionnalité CSS sont un moyen d'effectuer une méthode de détection de fonctionnalité native du navigateur. Ces requêtes analysent si oui ou non un navigateur a correctement implémenté une propriété CSS. Essentiellement, le navigateur "indique" si une certaine propriété ou valeur CSS est prise en charge ou non. Le résultat détermine s'il faut ou non appliquer un bloc de CSS ou non.

Lors de l'utilisation des requêtes de fonctionnalité CSS, il est utile d'être dans l'état d'esprit de la dégradation gracieuse ou de l'amélioration progressive. Les concepteurs peuvent adopter une approche de dégradation progressive lorsque certaines fonctionnalités ne sont pas prises en charge. Les feuilles de style utiliseront les nouvelles fonctionnalités lorsqu'elles seront disponibles, mais se dégraderont gracieusement lorsque ces fonctionnalités ne seront pas prises en charge par le navigateur.

Pour la plupart, il existe une assez bonne prise en charge des navigateurs pour les requêtes de fonctionnalités CSS. Gardez à l'esprit qu'ils ne sont actuellement pas pris en charge par tous les navigateurs, en particulier les anciennes versions d'Internet Explorer. Assurez-vous de faire référence à Can I Use pour obtenir des informations à jour. Ne soyez pas découragé par le manque de prise en charge d'IE pour les requêtes de fonctionnalités. Lors de la planification de votre site, pensez au plan CSS global et à ce qui n'aura pas de support et partez de là.

Exemples de requêtes de fonctionnalités

Pour bien comprendre les requêtes de fonctionnalité CSS, il est utile de les voir en action en écrivant de petits tests dans votre CSS pour voir si une fonctionnalité particulière est prise en charge ou non. Cela vous aidera à écrire et à appliquer le CSS en fonction de ce qui est (ou n'est pas) pris en charge par un navigateur et à optimiser votre page pour l'ensemble de fonctionnalités disponibles.

Dispositions de grille CSS

Prenons CSS Grid Layouts par exemple. Ils ont été un sujet brûlant dans la communauté des concepteurs Web, mais comme ils ne sont pas encore courants, nous pouvons utiliser les requêtes de fonctionnalités pour les tester. Nous utiliserons la règle @supports et ciblerons les navigateurs prenant en charge la grille. Vous remarquerez peut-être que la syntaxe d'une requête de fonctionnalité (le symbole @ ) ressemble beaucoup à une requête multimédia, ce qui les rend faciles à écrire et à mémoriser.

Si le navigateur comprend display: grid , dans la déclaration CSS Feature Query, les styles entre parenthèses seront appliqués. Si ce n'est pas le cas, il sera ignoré dans notre solution de secours.

// fallback code for older browsers (and those that do not support Feature Queries)
.content {
height: 400px;
background-color: purple;
color: white;
}
// start grid CSS

@supports (display: grid) {
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
}


Comme vous pouvez le voir, différents styles sont spécifiés, selon que le navigateur prend en charge ou non les dispositions de grille. Seuls les navigateurs expérimentaux comprennent actuellement display: grid , ils afficheront donc les éléments suivants :

 Comment un navigateur prenant en charge les dispositions de grille CSS rendrait le code.
		


Quant aux navigateurs plus anciens, ils afficheront le fallback, qui a un fond violet :
 Comment un navigateur qui ne prend pas en charge les dispositions de grille CSS rendrait le code.

Personnalisation du texte avec lettrines
Les lettrines sont une capacité CSS assez astucieuse qui donne une élégance supplémentaire à la typographie. Cette propriété indique au navigateur une lettre plus grande, comme la façon dont les lettrines sont généralement conçues. Par exemple, la première lettre du premier mot d'un paragraphe peut avoir la taille de cinq lignes de texte. La lettre pourrait être en gras, avec une petite marge sur le côté droit.
Cependant, ils ne sont pas universellement pris en charge, il est donc préférable de proposer une solution de secours dont le style est similaire à celui affiché par un navigateur pris en charge. Dans cet exemple, nous utiliserons la même couleur, le même style gras et la même police serif pour le design. Nous pouvons prendre en compte la prise en charge limitée initial-letter en créant ce style par défaut comme solution de secours.
Regardons un exemple pour créer une lettrine avec une approche différente plutôt que d'utiliser initial-letter . (Ce sera votre code de secours.)

p::first-letter {
float: left;
font-size: 5em;
line-height: 1;
font-weight: bold;
margin-right: .2em;
color: #00FFFF;
font-family: serif;
}


Cela fonctionne, mais vous pouvez créer des lettrines plus efficacement en utilisant des requêtes de fonctionnalités CSS et en utilisant tout le potentiel de CSS avec initial-letter . Voici à quoi cela ressemblerait :
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
p::first-letter {
-webkit-initial-letter: 5;
initial-letter: 5;
color: #00FFFF;
font-weight: bold;
margin-right: 0.5em;
font-family: serif;
}
}


Remarquez quelque chose d'un peu différent ici? Nous avons une certaine logique dans notre requête de fonctionnalité avec or . Actuellement, initial-letter n'est prise en charge que dans Safari 9, cela nécessite donc un préfixe -webkit . C'est aussi une bonne idée d'inclure la version sans préfixe (la prise en charge des navigateurs augmentera à l'avenir). Gardez à l'esprit que lorsque vous expérimentez, vous pouvez utiliser or , and , et not dans vos requêtes de fonctionnalités.
Voici ce qui est rendu à partir d'un navigateur qui prend en charge la propriété initial-letter :

Nouveaux effets d'image
Il y a tellement de nouveaux effets d'image qui peuvent être réalisés avec CSS. La prise en charge du navigateur varie bien sûr, mais certains de ces nouveaux effets sont plutôt sympas. Qui aurait pensé que les superpositions n'étaient plus seulement un calque Photoshop ? Jetons un coup d'œil aux mix-blend-modes et comment ils peuvent être appliqués aux images, lorsqu'ils sont pris en charge.
En plus de déterminer si un navigateur prend en charge ou non une fonctionnalité spécifique, les requêtes de fonctionnalité sont un outil permettant de regrouper des déclarations CSS afin qu'elles s'exécutent en groupe. L'exemple suivant semble complexe, mais une fois décomposé, il aura plus de sens.
Voici un extrait de code HTML simple auquel une classe est appliquée sur la <article> .
&amp;amp;amp;lt;article class=&amp;amp;quot;feature-img&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;quot;example-img.jpg&amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/article&amp;amp;amp;gt;


Le CSC :
@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {

.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}


Comme vous le savez déjà, la condition doit inclure à la fois une propriété et une valeur. Dans l'exemple ci-dessus, vous vérifiez la propriété mix-blend-mode et la valeur de overlay pour cette propriété. Certains navigateurs Android plus anciens nécessitent le préfixe -webkit- pour les dégradés linéaires, il a donc été inclus dans le bloc @supports . Gardez à l'esprit que lorsque vous regroupez plusieurs conditions, l'utilisation correcte des parenthèses est nécessaire.
Plus précisément, ce bloc recherche des navigateurs qui permettent le mix-blend-mode de superposition et la possibilité de rendre un linear-gradient . Si cela est pris en charge, l'image aura une superposition avec un dégradé qui lui sera appliqué, lui donnant une couleur rouge.
 L'image originale est affichée à gauche. Lorsqu'un navigateur prend en charge le mix-blend-mode: overlay , il applique une superposition rouge à l'image avec un dégradé.

Pour les navigateurs qui ne prennent pas en charge le mix-blend-mode , vous utiliserez cette syntaxe avec not . Certains styles seraient appliqués, mais très limités par rapport à ceux de la requête ci-dessus.
@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}


 L'image d'origine est affichée sur la gauche, qui n'a pas de CSS qui lui est appliqué. L'image de droite est ce que les navigateurs qui ne prennent pas en charge mix-blend-mode: overlay s'affichera.

Si vous n'avez jamais utilisé CSS Feature Queries auparavant, il s'agit d'une bonne introduction aux possibilités d'adopter cette approche. Il y a tellement de nouveautés intéressantes avec CSS, et les requêtes de fonctionnalités CSS permettent d'utiliser certaines des nouvelles fonctionnalités qui ne sont pas encore entièrement prises en charge.

		
		
Vous voulez plus de conseils de conception? Abonnez-vous à La mise en page!
		
Nous vous enverrons les derniers tutoriels de conception et l'inspiration directement dans votre boîte de réception, une fois par semaine.
		

		
		Oui s'il vous plaît!