La règle @supports CSS : Un guide complet de la détection de fonctionnalités

Dans le paysage en constante évolution du développement web, assurer la compatibilité entre navigateurs et offrir une expérience utilisateur cohérente peut être un défi majeur. Différents navigateurs prennent en charge différentes fonctionnalités CSS, et s'appuyer sur des fonctionnalités qui ne sont pas universellement disponibles peut entraîner des mises en page cassées et des utilisateurs frustrés. La règle @supports en CSS offre un mécanisme puissant pour la détection de fonctionnalités, vous permettant d'appliquer sélectivement des styles CSS en fonction de la prise en charge d'une fonctionnalité particulière par le navigateur de l'utilisateur.

Qu'est-ce que la règle @supports CSS ?

La règle @supports est une at-règle conditionnelle en CSS qui vous permet de vérifier si un navigateur prend en charge une fonctionnalité CSS spécifique. Elle agit essentiellement comme une instruction if pour CSS, vous permettant d'écrire différents styles en fonction de la disponibilité d'une fonctionnalité particulière. Cela permet une amélioration progressive, où vous pouvez utiliser des fonctionnalités CSS plus récentes dans les navigateurs qui les prennent en charge tout en fournissant une solution de repli pour les navigateurs plus anciens.

Contrairement à la détection de navigateur (détecter le nom et la version du navigateur), qui est généralement déconseillée en raison de son manque de fiabilité et de sa charge de maintenance, @supports se concentre sur la détection de fonctionnalités. Cela signifie que vous vérifiez si le navigateur prend réellement en charge une propriété ou une valeur CSS spécifique, indépendamment du nom ou de la version du navigateur. Cette approche est beaucoup plus robuste et pérenne.

Syntaxe de la règle @supports

La syntaxe de la règle @supports est simple :

            @supports (condition) {
  /* Règles CSS à appliquer si la condition est vraie */
}

@supports not (condition) {
  /* Règles CSS à appliquer si la condition est fausse */
}

            

              
                Copy
              
            
          

• @supports : Le mot-clé qui démarre la règle.
• (condition) : La condition à tester. Il s'agit généralement d'une paire propriété-valeur CSS ou d'une expression booléenne plus complexe.
• {} : Les accolades entourent les règles CSS qui seront appliquées si la condition est remplie.
• not : Un mot-clé optionnel qui nie la condition. Les règles CSS dans ce bloc sont appliquées si la condition *n'est pas* remplie.

Exemples de base de @supports

Jetons un coup d'œil à quelques exemples simples pour illustrer le fonctionnement de la règle @supports.

Vérification de la prise en charge de display: grid

CSS Grid Layout est un système de mise en page puissant, mais il n'est pas pris en charge par tous les anciens navigateurs. Vous pouvez utiliser @supports pour fournir une mise en page de repli pour les navigateurs qui ne prennent pas en charge Grid.

            .container {
  display: flex; /* Repli pour les anciens navigateurs */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Utiliser Grid Layout dans les navigateurs qui le prennent en charge */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Dans cet exemple, les navigateurs qui ne prennent pas en charge display: grid utiliseront la mise en page flexbox, tandis que les navigateurs qui la prennent en charge utiliseront la mise en page grid.

Vérification de la prise en charge de position: sticky

position: sticky permet à un élément de se comporter comme position: relative jusqu'à ce qu'il atteigne un seuil spécifié, moment auquel il devient position: fixed. Ceci est utile pour créer des en-têtes ou des barres latérales fixes.

            .sticky-header {
  position: relative; /* Repli pour les anciens navigateurs */
}

@supports (position: sticky) {
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Ici, les navigateurs qui ne prennent pas en charge position: sticky auront simplement un en-tête positionné de manière relative, tandis que les navigateurs compatibles obtiendront l'effet d'en-tête fixe.

Utilisation du mot-clé not

Le mot-clé not vous permet d'appliquer des styles lorsqu'une fonctionnalité *n'est pas* prise en charge.

            .element {
  background-color: lightblue;
}

@supports not (backdrop-filter: blur(5px)) {
  .element {
    background-color: rgba(173, 216, 230, 0.8); /* Repli pour les navigateurs qui ne prennent pas en charge backdrop-filter */
  }
}

            

              
                Copy
              
            
          

Dans ce cas, si le navigateur ne prend pas en charge la propriété backdrop-filter, l'élément aura un fond bleu clair semi-transparent au lieu d'un fond flou.

Conditions complexes avec opérateurs booléens

La règle @supports vous permet également de combiner plusieurs conditions à l'aide des opérateurs booléens : and, or.

Utilisation de l'opérateur and

L'opérateur and exige que les deux conditions soient vraies pour que les styles soient appliqués.

            @supports (display: flex) and (align-items: center) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

            

              
                Copy
              
            
          

Cet exemple applique les styles flexbox uniquement si le navigateur prend en charge à la fois display: flex et align-items: center.

Utilisation de l'opérateur or

L'opérateur or exige qu'au moins l'une des conditions soit vraie pour que les styles soient appliqués.

            @supports ((-webkit-mask-image: url(mask.svg))) or ((mask-image: url(mask.svg))) {
  .masked-element {
    mask-image: url(mask.svg);
    -webkit-mask-image: url(mask.svg);
  }
}

            

              
                Copy
              
            
          

Ici, les styles sont appliqués si le navigateur prend en charge soit la propriété préfixée -webkit-mask-image, soit la propriété standard mask-image. Ceci est utile pour gérer les préfixes de fournisseur.

Combinaison de not avec des opérateurs booléens

Vous pouvez également combiner not avec and et or pour des conditions plus complexes.

            @supports not ((transform-origin: 50% 50%) and (perspective: 500px)) {
  .element {
    /* Styles à appliquer si transform-origin ou perspective n'est pas pris en charge */
    /* Cela pourrait être un repli pour les transformations 3D dans les anciens navigateurs */
  }
}

            

              
                Copy
              
            
          

Applications pratiques de @supports

La règle @supports peut être utilisée dans un large éventail de scénarios pour améliorer l'expérience utilisateur et assurer la compatibilité entre navigateurs.

Amélioration de la typographie

Vous pouvez utiliser @supports pour appliquer des fonctionnalités typographiques avancées comme font-variant-numeric ou text-shadow dans les navigateurs qui les prennent en charge.

            p {
  font-family: sans-serif;
}

@supports (font-variant-numeric: tabular-nums) {
  p {
    font-variant-numeric: tabular-nums;
  }
}

@supports (text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)) {
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
}

            

              
                Copy
              
            
          

Mise en œuvre de mises en page avancées

Comme vu précédemment, @supports est excellent pour gérer différents systèmes de mise en page. Vous pouvez l'utiliser pour basculer entre flexbox, grid layout, ou même d'anciennes techniques comme les floats en fonction de la prise en charge du navigateur.

            .container {
  float: left; /* Repli pour les très anciens navigateurs */
  width: 100%;
}

@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Application d'effets visuels

Les fonctionnalités CSS modernes comme filter, backdrop-filter et clip-path peuvent être utilisées pour créer des effets visuels époustouflants. Utilisez @supports pour vous assurer que ces effets ne cassent pas la mise en page dans les anciens navigateurs.

            .image {
  border-radius: 5px; /* Repli */
}

@supports (clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
  .image {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Gestion des préfixes de fournisseur

Bien que les préfixes de fournisseur deviennent moins courants, ils peuvent toujours être pertinents lorsqu'il s'agit de versions de navigateurs plus anciennes. @supports peut vous aider à appliquer les propriétés préfixées si nécessaire.

            .element {
  /* Propriété standard */
  user-select: none;

  /* Propriétés préfixées par le fournisseur avec détection de fonctionnalités */
  @supports not (user-select: none) and (-webkit-user-select: none) {
    .element {
      -webkit-user-select: none; /* Pour les anciens Safari */
    }
  }

  @supports not (user-select: none) and (-moz-user-select: none) {
    .element {
      -moz-user-select: none; /* Pour les anciens Firefox */
    }
  }
}

            

              
                Copy
              
            
          

Meilleures pratiques pour utiliser @supports

Pour utiliser efficacement la règle @supports, considérez ces meilleures pratiques :

• Prioriser l'amélioration progressive : Commencez par une conception de base et fonctionnelle qui fonctionne dans tous les navigateurs. Ensuite, utilisez @supports pour ajouter des améliorations pour les navigateurs modernes.
• Garder la simplicité : Évitez les conditions trop complexes. Les conditions plus simples sont plus faciles à comprendre et à maintenir.
• Tester minutieusement : Testez votre site Web dans une variété de navigateurs pour vous assurer que les styles de repli fonctionnent correctement et que les styles améliorés sont appliqués là où ils sont attendus. Utilisez des outils de test de navigateur et des appareils réels.
• Utiliser les requêtes de fonctionnalités avec parcimonie : Bien que @supports soit puissant, une utilisation excessive peut entraîner un CSS volumineux. Déterminez si une fonctionnalité est vraiment essentielle ou simplement un plus.
• Commenter votre code : Documentez clairement pourquoi vous utilisez @supports et ce que les styles de repli sont censés accomplir. Cela rendra votre code plus facile à comprendre et à maintenir pour vous-même et pour les autres.
• Éviter la détection de navigateur : Résistez à la tentation d'utiliser la détection de navigateur basée sur JavaScript. @supports offre une solution plus fiable et pérenne pour la détection de fonctionnalités.
• Considérer les polyfills : Pour certaines fonctionnalités, les polyfills (bibliothèques JavaScript qui fournissent des fonctionnalités manquantes dans les anciens navigateurs) peuvent être une meilleure option que @supports, surtout si vous avez besoin d'une expérience cohérente sur tous les navigateurs. Cependant, pesez les avantages d'un polyfill par rapport à son impact sur les performances.

Alternatives à @supports

Bien que @supports soit la méthode principale de détection de fonctionnalités en CSS, il existe des approches alternatives à considérer.

Modernizr

Modernizr est une bibliothèque JavaScript populaire qui détecte la disponibilité des fonctionnalités HTML5 et CSS3. Elle ajoute des classes à l'élément <html> en fonction de la prise en charge des fonctionnalités, vous permettant de cibler des navigateurs spécifiques avec CSS. Bien que puissant, Modernizr ajoute une dépendance à JavaScript et peut augmenter le temps de chargement de la page.

Détection de fonctionnalités JavaScript

Vous pouvez également utiliser JavaScript pour détecter la prise en charge des fonctionnalités et appliquer les styles dynamiquement. Cette approche offre plus de flexibilité mais peut être plus complexe que l'utilisation de @supports ou de Modernizr. Elle peut également entraîner un flash de contenu non stylisé (FOUC) si le JavaScript prend trop de temps à s'exécuter.

Commentaires conditionnels (Pour Internet Explorer)

Les commentaires conditionnels sont une technique spécifique à Microsoft pour cibler les versions d'Internet Explorer. Ils sont généralement déconseillés car ils ne sont pas du CSS standard et ne fonctionnent que dans IE. Cependant, ils peuvent être utiles dans des cas rares où vous devez résoudre des bugs ou des limitations spécifiques à IE. Gardez à l'esprit que les commentaires conditionnels ne sont pas pris en charge dans IE10 et les versions ultérieures.

            <!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-below.css">
<![endif]-->

            

              
                Copy
              
            
          

Limites de @supports

Malgré ses points forts, @supports présente quelques limites :

• Limité aux paires propriété-valeur : Le cas d'utilisation le plus courant est la vérification de la prise en charge de paires propriété-valeur CSS spécifiques. Bien que des conditions complexes soient possibles, elles peuvent devenir difficiles à gérer.
• Ne détecte pas la prise en charge partielle : @supports peut seulement vous dire si une fonctionnalité est prise en charge ou non. Il ne fournit pas d'informations sur le niveau de prise en charge ou les limitations de l'implémentation.
• Considérations sur la spécificité : Les styles appliqués dans les blocs @supports ont la même spécificité que les autres règles CSS. Soyez attentif à la spécificité lors de la substitution de styles dans @supports.
• Non pris en charge dans les navigateurs très anciens : Les navigateurs très anciens (par exemple, IE8 et antérieurs) ne prennent pas en charge @supports. Vous devrez utiliser des méthodes alternatives comme les commentaires conditionnels ou les polyfills pour ces navigateurs.

Conclusion

La règle @supports en CSS est un outil essentiel pour le développement web moderne. Elle vous permet d'écrire du code CSS plus robuste et adaptable, garantissant que vos sites Web offrent une bonne expérience utilisateur sur une large gamme de navigateurs. En adoptant l'amélioration progressive et en utilisant @supports de manière stratégique, vous pouvez exploiter les dernières fonctionnalités CSS tout en continuant à prendre en charge les anciens navigateurs et en offrant une expérience cohérente à tous les utilisateurs. N'oubliez pas de privilégier la détection de fonctionnalités par rapport à la détection de navigateur, de tester minutieusement et de garder votre code propre et bien documenté.

Alors que le Web continue d'évoluer, maîtriser des techniques comme @supports deviendra de plus en plus important pour créer des sites Web de haute qualité, accessibles et pérennes qui s'adressent à un public mondial. Alors, adoptez la puissance de la détection de fonctionnalités et créez des expériences Web à la fois innovantes et fiables.