::-webkit-asdf

Nicolas pose une colle intéressante sur Mastodon. Pourquoi dans l’exemple suivant, sur Firefox, la première déclaration est ignorée mais pas la seconde ?

input[type="range"]::-webkit-slider-thumb {
  background-color: red;
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  background-color: blue;
}

Les préfixes -webkit– sont normalement réservés aux navigateurs utilisant WebKit (Safari, ou tout autre navigateur sur iOS) et dérivés (Chrome et toute sa clique). On pourrait donc se dire que Firefox ignore simplement la première déclaration parce qu’il ignore les préfixes -webkit- et applique la seconde parce qu’il connaît les préfixes -moz-.

Oui, mais… (Parce qu’il y a forcément un mais sinon c’était trop facile.) En CSS, dixit MDN :

Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :

h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}

En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l’ensemble de la règle invalide.

Dans notre exemple initial, cela signifie que notre seconde déclaration (avec deux sélecteurs, dont un -webkit- inconnu pour Firefox) devrait aussi être ignorée.

Que se passe-t-il donc ?

Après quelques recherches, j’ai fini par trouver ! Dans la spécification CSS « Selectors Level 4 » :

Tout autre pseudo-élément dont le nom commence par la chaîne « -webkit- » et qui ne soit pas une notation fonctionnelle doit être traité comme valide au moment de l’analyse. (Cela signifie que ::-webkit-asdf est valide au moment de l’analyse, mais pas :-webkit-jkl().) S’ils ne sont pas reconnus et supportés, ils doivent être traités comme ne correspondant à rien, et sont des pseudo-éléments -webkit- inconnus.

CQFD.