Requêtes de fonctionnalités CSS

Comment travailler avec des requêtes de fonctionnalités dans CSS

Les requêtes de fonctionnalités sont une capacité récente et relativement inconnue de CSS, maisBien soutenuune.

Nous pouvons l'utiliser pour vérifier si une fonctionnalité est prise en charge par le navigateur en utilisant le@supportsmot-clé.

C'est un exemple que je pense que c'est particulièrement utile, au moment de la rédaction, pour vérifier si un navigateur prend en charge la grille CSS, ce qui peut être fait en utilisant:

@supports (display: grid) {
  /* apply this CSS */
}

Nous vérifions si le navigateur prend en charge legridvaleur pour ledisplaybiens.

On peut utiliser@supportspour n'importe quelle propriété CSS, pour vérifier n'importe quelle valeur.

Nous pouvons également utiliser les opérateurs logiquesand,oretnotpour créer des requêtes de fonctionnalités complexes.

Cet exemple vérifie si le navigateur prend en charge les deuxGrille CSSetFlexbox:

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

Téléchargez mon gratuitManuel CSS

Requêtes de fonctionnalités CSS

Comment travailler avec des requêtes de fonctionnalités dans CSS

Plus de didacticiels CSS: