CSS @supports : Détection de fonctionnalités pour un Web robuste

Dans le paysage du développement web actuel, en évolution rapide, il est primordial de garantir une expérience utilisateur cohérente et optimale sur une vaste gamme de navigateurs, d'appareils et de systèmes d'exploitation. Les développeurs sont constamment aux prises avec le défi d'implémenter des fonctionnalités CSS de pointe tout en s'assurant que leurs sites web restent accessibles et fonctionnels pour les utilisateurs sur des plateformes plus anciennes ou moins performantes. C'est là que la puissance de CSS @supports, également connue sous le nom de requêtes de détection de fonctionnalités, entre en jeu. En nous permettant de vérifier la disponibilité de propriétés ou de valeurs CSS spécifiques avant d'appliquer des styles, @supports nous donne les moyens de créer des expériences web plus robustes, adaptables et pérennes pour un public véritablement mondial.

Comprendre la détection de fonctionnalités dans le développement Web

La détection de fonctionnalités est une pratique fondamentale du développement web qui consiste à identifier si un navigateur ou un appareil particulier prend en charge une technologie ou une fonctionnalité donnée. Historiquement, cela se faisait souvent à l'aide de JavaScript. Cependant, CSS a introduit ses propres mécanismes élégants pour y parvenir directement dans les feuilles de style, ce qui conduit à un code plus propre et souvent à de meilleures performances.

L'idée centrale derrière la détection de fonctionnalités est de fournir la meilleure expérience possible aux utilisateurs, quel que soit leur environnement de navigation. Cela peut se manifester par deux approches principales :

• Amélioration progressive : Commencer avec une expérience de base qui fonctionne partout, puis ajouter des fonctionnalités avancées pour les navigateurs qui les prennent en charge. Cela garantit que tous les utilisateurs disposent d'un site web fonctionnel, et que ceux qui utilisent des navigateurs modernes bénéficient d'une expérience améliorée et plus riche.
• Dégradation gracieuse : Construire d'abord une expérience riche en fonctionnalités, puis s'assurer qu'elle se dégrade gracieusement vers un état fonctionnel si certaines fonctionnalités ne sont pas prises en charge. Bien qu'efficace, cette approche peut parfois nécessiter plus d'efforts pour garantir une large compatibilité.

CSS @supports renforce considérablement notre capacité à mettre en œuvre l'amélioration progressive, en nous permettant d'appliquer des styles de manière conditionnelle en fonction des capacités du navigateur.

Présentation de CSS @supports

La règle @supports en CSS est une @-règle puissante qui vous permet de tester si un navigateur prend en charge une déclaration CSS donnée (une paire propriété-valeur) ou un groupe de déclarations. Si la condition spécifiée dans la règle @supports est remplie, les styles définis dans son bloc sont appliqués ; sinon, ils sont ignorés.

La syntaxe de base est simple :

            @supports (declaration: value) {
  /* Styles à appliquer si la déclaration est prise en charge */
}
            

              
                Copy
              
            
          

Analysons les composants :

• @supports : Le mot-clé de l'@-règle qui lance la requête.
• (declaration: value) : C'est la condition testée. Elle doit être une déclaration CSS valide entre parenthèses. Par exemple, (display: grid) ou (color: oklch(70% 0.2 240)).
• { /* styles */ } : Le bloc de déclaration contenant les règles CSS qui ne seront appliquées que si la condition est évaluée comme vraie.

Tester le support d'une propriété

Le cas d'utilisation le plus courant de @supports est de vérifier si un navigateur prend en charge une propriété CSS spécifique.

Exemple 1 : Mise en page Grid

Imaginez que vous souhaitiez utiliser CSS Grid pour une mise en page complexe, mais que vous ayez besoin de fournir une solution de repli pour les navigateurs qui ne le prennent pas en charge. Vous pourriez écrire :

            /* Solution de repli pour les navigateurs ne prenant pas en charge Grid */
.container {
  display: flex;
  flex-direction: column;
}

/* Styles modernes pour les navigateurs prenant en charge Grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

Dans cet exemple, les navigateurs qui comprennent display: grid appliqueront les styles de la mise en page grid. Les navigateurs plus anciens se rabattront sur la mise en page flexbox (ou block) définie en dehors du bloc @supports.

Tester le support d'une valeur

Vous pouvez également tester le support d'une valeur spécifique d'une propriété. Ceci est particulièrement utile pour les nouvelles fonctions de couleur, les propriétés personnalisées ou les fonctionnalités expérimentales.

Exemple 2 : Fonction de couleur OKLCH

Supposons que vous souhaitiez utiliser l'espace colorimétrique moderne OKLCH pour un élément d'interface utilisateur vibrant, mais fournir une solution de repli plus standard.

            .element {
  background-color: hsl(240, 100%, 50%); /* Solution de repli */
}

@supports (color: oklch(70% 0.2 240)) {
  .element {
    background-color: oklch(70% 0.2 240);
  }
}

            

              
                Copy
              
            
          

Les navigateurs qui reconnaissent oklch(70% 0.2 240) utiliseront la couleur OKLCH. Les autres utiliseront par défaut le bleu HSL.

Syntaxe avancée de @supports

La règle @supports va au-delà des simples vérifications de déclarations. Elle prend en charge des opérateurs logiques comme not, and et or, permettant une détection de fonctionnalités plus complexe et nuancée.

Utiliser not

L'opérateur not inverse une condition. Il est utile pour appliquer des styles uniquement lorsqu'une fonctionnalité n'est *pas* prise en charge.

Exemple 3 : Styliser pour les navigateurs non-Grid

Ceci pourrait être utilisé pour fournir une mise en page simplifiée ou un message pour les navigateurs qui ne prennent pas en charge une méthode de mise en page particulière.

            @supports not (display: grid) {
  .container {
    padding: 15px;
    border: 1px solid #ccc;
  }
  .container p::after {
    content: " (Mise en page améliorée non prise en charge)";
    font-style: italic;
    color: grey;
  }
}

            

              
                Copy
              
            
          

Utiliser and

L'opérateur and exige que toutes les conditions soient vraies pour que les styles soient appliqués. C'est excellent pour détecter le support de plusieurs fonctionnalités simultanément.

Exemple 4 : Supporter Grid et Flexbox simultanément

Cela pourrait être pour un scénario où vous avez besoin des deux fonctionnalités pour une mise en page avancée spécifique.

            @supports (display: grid) and (display: flex) {
  .complex-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .complex-layout__item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

Cela garantit que .complex-layout ne reçoit ces styles spécifiques que si le navigateur prend en charge à la fois Grid et Flexbox de manière indépendante.

Utiliser or

L'opérateur or applique des styles si au moins l'une des conditions est vraie. C'est utile lorsqu'il existe plusieurs façons d'obtenir un effet visuel similaire ou pour prendre en charge une fonctionnalité qui a des alias ou des solutions de repli.

Exemple 5 : Supporter les unités CSS modernes

Envisagez de prendre en charge des unités plus récentes comme dvh (hauteur de la fenêtre d'affichage dynamique) ou svh (petite hauteur de la fenêtre d'affichage).

            @supports (height: 100dvh) or (height: 100svh) {
  .fullscreen-section {
    height: 100dvh; /* Ou 100svh si pris en charge */
  }
}

            

              
                Copy
              
            
          

Cela permet une certaine flexibilité dans l'application des styles lorsque l'une des unités de hauteur de la fenêtre d'affichage dynamique est disponible.

Requêtes @supports imbriquées

Vous pouvez également imbriquer des règles @supports pour créer un contrôle encore plus granulaire. C'est utile lorsqu'une fonctionnalité dépend de la disponibilité d'une autre, ou pour des combinaisons logiques complexes.

Exemple 6 : Grid avec Subgrid et support des variables

Supposons que vous souhaitiez utiliser CSS Subgrid, qui nécessite lui-même le support de Grid, et que vous souhaitiez également utiliser des variables CSS pour la configuration.

            :root {
  --main-gap: 1rem;
}

@supports (display: grid) {
  .parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--main-gap);
  }

  @supports (display: subgrid) {
    .child-subgrid {
      display: subgrid;
      grid-column: 2 / 3;
      grid-template-rows: auto;
      gap: var(--main-gap);
    }
  }
}

            

              
                Copy
              
            
          

Ici, .child-subgrid ne sera stylisé que si Grid et Subgrid sont tous deux pris en charge, et que le parent utilise une variable CSS pour son espacement.

Applications pratiques et considérations globales

L'utilité de @supports s'étend à de nombreux scénarios de développement web. Lors de la création pour un public mondial, il est crucial de comprendre le support des navigateurs dans différentes régions et sur différents types d'appareils. Bien que les principaux moteurs de navigateurs (Chrome, Firefox, Safari, Edge) aient généralement un support bon et cohérent pour @supports lui-même, les fonctionnalités que vous *testez* peuvent avoir des niveaux d'adoption variables.

Améliorations du design réactif

@supports peut compléter les media queries pour un design réactif plus sophistiqué. Par exemple, vous pourriez utiliser une mise en page en grille pour les grands écrans mais vouloir assurer un certain comportement de repli sur les appareils mobiles plus anciens qui pourraient avoir des difficultés avec le CSS avancé.

Exemple : Mises en page complexes de cartes

Sur un site de commerce électronique mondial, vous pourriez présenter des cartes de produits dans une grille multi-colonnes sur les ordinateurs de bureau. Pour les navigateurs ou appareils plus anciens qui ne prennent pas en charge Grid, vous pourriez vouloir une mise en page empilée plus simple. Mieux encore, si un navigateur prend en charge Grid mais pas une propriété spécifique à l'intérieur (comme gap dans de très anciennes implémentations), vous pouvez également fournir une solution de repli pour cela.

            .product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Espacement de base pour flex */
}

@supports (display: grid) {
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Espacement amélioré pour grid */
  }
}

/* Affinement supplémentaire : que faire si grid est pris en charge mais pas 'gap' de manière fiable ? */
@supports (display: grid) and not (gap: 25px) {
  .product-cards {
    /* Solution de repli pour une ancienne grille - utiliser des marges au lieu de gap */
    padding: 10px;
  }
  .product-cards__item {
    margin-bottom: 15px;
  }
}

            

              
                Copy
              
            
          

Améliorations de l'accessibilité

@supports peut être utilisé pour appliquer conditionnellement des styles qui améliorent l'accessibilité. Par exemple, si un navigateur prend en charge un style de contour de focus spécifique, vous pourriez l'améliorer. Inversement, si le navigateur ou la technologie d'assistance d'un utilisateur a des problèmes connus avec un certain style visuel, vous pourriez le supprimer conditionnellement.

Exemple : Indicateurs de focus améliorés pour la navigation au clavier

Pour les utilisateurs naviguant via le clavier (courant pour l'accessibilité), des indicateurs de focus clairs sont essentiels. Les nouvelles fonctionnalités CSS peuvent permettre des contours de focus plus distincts visuellement.

            /* Style de focus de base */
a:focus, button:focus {
  outline: 2px solid blue;
}

/* Style de focus amélioré pour les navigateurs compatibles */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
    outline: none;
  }
  a:focus-visible, button:focus-visible {
    outline: 3px solid blue;
    box-shadow: 0 0 0 3px white, 0 0 0 6px blue;
  }
}

            

              
                Copy
              
            
          

Ici, nous utilisons :focus-visible (qui est lui-même une fonctionnalité à vérifier !) pour appliquer des styles de focus plus robustes uniquement lorsque c'est nécessaire, évitant les contours inutiles pour les utilisateurs de souris.

Fonctionnalités CSS modernes

À mesure que de nouvelles propriétés et valeurs CSS émergent, @supports devient indispensable pour les adopter progressivement.

Exemple : Animations pilotées par le défilement

Les animations pilotées par le défilement sont une nouvelle fonctionnalité puissante. Vous pouvez détecter leur support et les appliquer, tout en fournissant une alternative statique ou plus simple pour les navigateurs qui ne les prennent pas encore en charge.

            .scrolling-element {
  transform: translateY(0);
}

@supports (animation-timeline: scroll()) {
  .scrolling-element {
    animation: pan-right linear forwards;
    animation-timeline: scroll(block);
    animation-range: entry 0% cover 100%;
  }
}

@keyframes pan-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(50%); }
}

            

              
                Copy
              
            
          

Cela garantit que les éléments ne s'animent en fonction du défilement que si le navigateur en est capable, évitant ainsi les erreurs ou les comportements inattendus.

Support des navigateurs pour @supports

La règle @supports elle-même bénéficie d'un excellent support sur les navigateurs modernes :

• Chrome : Oui
• Firefox : Oui
• Safari : Oui
• Edge : Oui
• Internet Explorer : Non

Étant donné qu'Internet Explorer a été retiré, le manque de support dans IE n'est plus une préoccupation majeure pour la plupart des nouveaux développements. Pour les projets qui nécessitent encore le support d'IE, il faudrait généralement se fier à une détection de fonctionnalités basée sur JavaScript ou à des solutions côté serveur.

Lors du test de fonctionnalités *à l'intérieur* de la règle @supports, consultez toujours des tableaux de compatibilité des navigateurs à jour (comme ceux de MDN Web Docs ou Can I Use) pour les propriétés ou valeurs CSS spécifiques que vous avez l'intention d'utiliser.

Limitations et alternatives

Bien que @supports soit incroyablement utile, il est important d'être conscient de ses limitations :

• Ne peut pas tester les fonctionnalités JavaScript : @supports est purement pour les fonctionnalités CSS. Si vous devez détecter le support d'une API JavaScript, vous aurez toujours besoin de JavaScript.
• Ne peut pas tester les versions spécifiques de navigateurs : Il détecte le support des fonctionnalités, pas les versions de navigateurs. Cela signifie que vous ne pouvez pas dire, "appliquer ceci uniquement dans Chrome 100+". Pour des besoins spécifiques à une version, la détection par JavaScript ou côté serveur pourrait être nécessaire.
• Potentiel de sur-test : Bien que puissantes, des requêtes @supports imbriquées excessives ou trop complexes peuvent rendre les feuilles de style plus difficiles à lire et à maintenir.
• Limité pour les navigateurs plus anciens : Comme mentionné, cela ne fonctionne pas dans les navigateurs plus anciens comme Internet Explorer.

Quand utiliser JavaScript pour la détection de fonctionnalités

JavaScript reste la solution de choix pour détecter :

• Le support d'API JavaScript spécifiques (par exemple, WebGL, Service Workers).
• Les versions de navigateurs ou des bizarreries spécifiques de navigateurs.
• Les interactions complexes que le CSS seul ne peut pas gérer.
• Les situations nécessitant une solution de repli pour les navigateurs qui ne prennent pas en charge @supports lui-même.

Des bibliothèques JavaScript populaires comme Modernizr ont été historiquement cruciales pour cela, mais avec la pertinence décroissante des anciens navigateurs et la puissance croissante de CSS, le besoin d'une détection complète des fonctionnalités JS pour CSS diminue.

Meilleures pratiques pour l'utilisation de @supports

1. Prioriser l'amélioration progressive : Commencez par une expérience de base solide qui fonctionne partout, puis utilisez @supports pour ajouter des améliorations.
2. Garder les solutions de repli simples : Assurez-vous que vos styles de repli sont fonctionnels et n'introduisent pas de complexité ou de désordre visuel.
3. Tester de manière approfondie : Testez toujours votre implémentation sur une gamme de navigateurs et d'appareils, en prêtant attention au comportement de vos solutions de repli.
4. Utiliser les opérateurs logiques à bon escient : Combinez and, or, et not pour créer des requêtes précises, mais évitez les imbrications trop complexes qui nuisent à la lisibilité.
5. Tirer parti des outils de développement des navigateurs : Les outils de développement des navigateurs modernes offrent souvent des moyens de simuler différentes capacités de navigateur, ce qui facilite le test des règles @supports.
6. Documenter vos requêtes : Ajoutez des commentaires à votre CSS pour expliquer pourquoi une règle @supports particulière est en place.
7. Envisager les propriétés personnalisées : @supports fonctionne très bien avec les propriétés personnalisées CSS (variables). Vous pouvez définir une valeur par défaut, puis la surcharger dans un bloc @supports.

Exemple : Utiliser les propriétés personnalisées avec @supports

            :root {
  --button-bg: #007bff;
  --button-text-color: white;
}

.modern-button {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

@supports (background-color: oklch(40% 0.3 200)) {
  :root {
    --button-bg: oklch(40% 0.3 200);
    --button-text-color: #f0f0f0;
  }
}

            

              
                Copy
              
            
          

Cette approche facilite la gestion des améliorations visuelles modernes sans polluer les ensembles de règles principaux.

Conclusion

La règle @supports est un outil indispensable dans l'arsenal du développeur CSS moderne. Elle nous permet de construire des sites web plus résilients et adaptables en nous autorisant à appliquer conditionnellement des styles en fonction des capacités du navigateur. En adoptant la détection de fonctionnalités avec @supports, nous pouvons offrir des expériences plus riches aux utilisateurs de navigateurs modernes tout en garantissant une base fonctionnelle pour tous les autres. Cette approche, ancrée dans l'amélioration progressive, est cruciale pour créer des applications web qui fonctionnent de manière fiable et esthétique dans le paysage numérique mondial, diversifié et en constante évolution.

Alors que les standards du web continuent d'évoluer, la maîtrise de @supports restera une compétence clé pour tout développeur visant à créer des expériences web de pointe, mais universellement accessibles.