Vous le savez peut-être déjà, mais en CSS, il est possible de filtrer sur un attribut d'un élément en omettant la casse de la valeur dudit attribut. Voyons comment faire.

Par défaut, les sélecteurs d'attributs CSS sont sensibles à la casse, ce qui signifie que la différence entre majuscules et minuscules doit être prise en compte.

a[href="https://monsupersite.com"] {
  color: red;
}

Le code ci-dessus cible tous les liens dont l'attribut href a pour valeur exacte "https://monsupersite.com". Cependant, si la valeur de cet attribut diffère par la casse, comme "https://MonSuperSite.com", le sélecteur ne fonctionnera pas.

Pour résoudre ce problème, CSS a introduit une option pour rendre les sélecteurs d'attributs insensibles à la casse. Cette option est définie en ajoutant un simple i juste après la valeur de l'attribut dans les crochets. Voici un exemple :

a[href="https://monsupersite.com" i] {
  color: red;
}

Dans ce cas, le sélecteur d'attribut insensible à la casse i s'assure que peu importe si "MonSuperSite" est écrit avec avec des majuscules ou minuscules, le style sera appliqué.

A contrario, vous pouvez utiliser le flag s pour forcer la vérification en fonction de la casse.