Le développement web évolue à grande vitesse, et les navigateurs modernes intègrent régulièrement de nouvelles fonctionnalités CSS. Cependant, tous les utilisateurs n’utilisent pas le même navigateur ni la même version. C’est là qu’entrent en jeu les feature queries CSS, un outil puissant pour vérifier le support navigateur CSS et adapter les styles selon les capacités réelles du navigateur.
Dans cet article, nous allons explorer ce que sont les feature queries CSS, comment fonctionne css supports, et pourquoi elles sont indispensables pour créer des sites modernes, robustes et compatibles avec différents navigateurs.
Qu’est-ce que les feature queries CSS ?
Une feature query CSS est une règle conditionnelle qui permet de vérifier si un navigateur prend en charge une fonctionnalité CSS précise.
Ces requêtes font partie du module CSS Conditional Rules, le même module qui définit les media queries. Cependant, contrairement aux media queries qui testent les caractéristiques de l’environnement (taille d’écran, orientation, résolution), les feature queries CSS permettent de tester le support navigateur CSS pour des fonctionnalités spécifiques.
| Media Queries | Feature Queries CSS |
|---|---|
| Testent l’environnement (écran, résolution, orientation) | Testent le support navigateur CSS |
Utilisent @media |
Utilisent @supports |
| Dépendent du matériel | Dépendent du navigateur |
| Adaptatif à l’écran | Adaptatif aux capacités CSS |
En résumé :
- Les media queries s’adaptent à l’écran.
- Les feature queries CSS s’adaptent au support navigateur CSS.
Syntaxe de base de css supports
La syntaxe des feature queries CSS repose sur la règle @supports, qui accepte une condition sur la propriété CSS à tester. On peut également utiliser la fonction supports() dans un @import.
/* Exemple simple de css supports */
@supports (<condition-de-support>) {
/* Règles CSS appliquées si le support navigateur CSS est présent */
}
/* Exemple avec supports() dans @import */
@import url("styles.css") supports(<déclaration CSS>);
Exemple simple de feature query CSS
Imaginons que vous souhaitiez vérifier si un navigateur supporte la propriété row-gap. Voici un exemple concret :
HTML
<div class="box">
Si votre navigateur prend en charge row-gap, la bordure sera en pointillés et le texte sera rouge.
</div>
CSS
body {
font:1.2em/1.5 sans-serif;
}
.box {
border:4px solid blue;
color: blue;
padding:1em;
}
/* Feature queries CSS pour row-gap */
@supports (row-gap:10px) {
.box {
border:4px dashed darkgreen;
color: red;
}
}
Dans cet exemple, si le support navigateur CSS pour row-gap est présent, les styles définis dans le bloc @supports sont appliqués.
Les feature queries CSS permettent de tester non seulement la propriété CSS mais aussi ses valeurs spécifiques, garantissant un contrôle précis du rendu selon le navigateur.
Tester des valeurs CSS spécifiques
Les feature queries CSS sont également utiles pour vérifier si un navigateur supporte certaines valeurs CSS, par exemple :
@supports (color: AccentColor) {
/* Styles appliqués si le support navigateur CSS pour cette valeur est présent */
}
@import"/css/styles.css" supports(color: AccentColor);
Grâce à cette approche, vous pouvez adapter vos styles à chaque navigateur, en utilisant le css supports pour vérifier la compatibilité et optimiser l’expérience utilisateur.
Tester l’absence de support avec @supports not
Il est aussi possible de cibler les navigateurs qui ne supportent pas une fonctionnalité CSS :
@supports not (display:grid) {
.layout {
display: block;/* Fallback CSS */
}
}
Cette méthode est essentielle pour fournir des fallbacks CSS robustes et garantir une expérience utilisateur cohérente, même sur des navigateurs partiellement compatibles.
Combiner plusieurs conditions CSS
Les feature queries CSS peuvent inclure plusieurs conditions grâce aux opérateurs and, or, et not :
@supports (display:grid)and (gap:1rem) {
.container {
display: grid;
gap:1rem;
}
}
Cela permet de s’assurer que toutes les fonctionnalités nécessaires sont supportées par le navigateur avant d’activer un layout complexe.
Feature queries CSS avancées
Les feature queries CSS ne se limitent pas aux paires propriété/valeur. Il est également possible d’utiliser :
selector(): vérifier le support d’un sélecteur CSS spécifique.font-format(): tester le support d’un format de police (woff2, opentype…).font-tech(): vérifier si une technologie de police est supportée par le navigateur.
Exemples :
Sélecteurs CSS
@supports selector(::-webkit-inner-spin-button) {
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin:0;
}
}
Formats de police
@supports font-format(woff2) {
@font-face {
font-family:"Inter";
src:url("/fonts/inter.woff2")format("woff2");
font-display: swap;
}
}
Technologies de police
@supports font-tech(color-COLRv1) {
@font-face {
font-family:"EmojiColor";
src:url("/fonts/emoji-color.woff2");
}
.icon {
font-family:"EmojiColor";
}
}
Ces techniques améliorent les performances et garantissent un support navigateur CSS optimal.
Limites des feature queries CSS
Même si les feature queries CSS permettent de vérifier le support navigateur CSS, elles présentent des limites :
- Elles ne garantissent pas que la fonctionnalité soit parfaitement implémentée.
- Elles ne détectent pas les bugs ou les implémentations partielles.
- Un navigateur peut déclarer supporter une fonctionnalité sans l’appliquer correctement.
C’est pourquoi il est recommandé d’adopter une approche de progressive enhancement, en définissant toujours des styles par défaut fiables.
Conclusion
Les feature queries CSS et css supports sont des outils indispensables pour un développement web moderne. Elles permettent de tirer parti des fonctionnalités CSS avancées tout en assurant un support navigateur CSS maximal.
En utilisant correctement les feature queries CSS, les développeurs peuvent créer des interfaces robustes, performantes et compatibles, sans dépendre de JavaScript pour la compatibilité. Cela améliore la qualité du code, les performances, et l’expérience utilisateur tout en suivant les principes de progressive enhancement.
Pour en savoir plus sur les feature queries CSS et les règles conditionnelles, consultez la documentation officielle MDN :
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Using_feature_queries