:indeterminateest un sélecteur de pseudo-classe en CSS nommé pour un état qui n'est ni coché ni décoché. C'est cet état intermédiaire que nous pourrions considérer les options «Peut-être» entre «Oui» et «Non». L'état n'est pas entièrement déterminé, d'où le nom: indéterminé.
Cases à cocher indéterminées
L'endroit le plus courant où nous pourrions voir cela en jeu est les cases à cocher dans un formulaire:
Il y a quelques choses bizarres à propos des :indeterminatecases à cocher qui méritent d'être notées avant de se pencher sur la façon dont elles peuvent être sélectionnées dans CSS.
Il ne peut pas être défini dans le HTML
Tout d'abord, il n'y a aucun moyen de définir une case à cocher sur un état indéterminé en HTML. Dans l'exemple d'ouverture ci-dessus, nous avons pu définir la deuxième case à cocher en le disant explicitement dans le HTML.
Il est logique de supposer que nous pourrions faire de même avec un état indéterminé:
Mais, malheureusement, ce n'est pas le cas, alors n'utilisez pas ce dernier exemple dans votre code.
Au moment d'écrire ces lignes, Javascript est le seul moyen de définir un état indéterminé sur une case à cocher. Une façon de procéder consiste à sélectionner une case à cocher spécifique par ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;La limitation de l'exemple ci-dessus est que la case à cocher ne peut jamais revenir à un état indéterminé une fois qu'elle passe à un autre état. Au lieu de cela, nous pouvons effectuer une rotation entre les états cochés, non cochés et indéterminés:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Voir les états de la case à cocher Rotation du stylo par Geoff Graham (@geoffgraham) sur CodePen.
C'est purement un état visuel
Une case à cocher ne compte toujours que si elle a été cochée ou décochée, que nous ayons activé ou non un état indéterminé. En d'autres termes, indéterminé masque la valeur réelle de la case à cocher et ne compte pas comme une valeur en soi.
Son apparence par défaut est incohérente entre les navigateurs
Tout comme les entrées numériques, un état indéterminé n'est pas stylé de manière cohérente dans tous les navigateurs.
Dans l'ensemble, cependant, voici la prise en charge des cases à cocher indéterminées.
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 28 | 3,6 | 6 | 12 | 6 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 12,2-12,4 |
Boutons radio indéterminés
:indeterminate peut s'appliquer aux boutons radio au niveau du groupe, où le groupe entier est considéré comme étant dans un état indéterminé si aucune option n'est sélectionnée.
Voir les boutons radio Pen Inderminate de Geoff Graham (@geoffgraham) sur CodePen.
Nous devons noter que l'utilisation :indeterminaten'est peut-être pas le meilleur choix en ce qui concerne l'expérience utilisateur.
Barres de progression indéterminées
Nous pouvons également appliquer :indeterminateà l' élément où aucune valeur n'a été explicitement définie dans le HTML. Il n'y a pas besoin de Javascript, mais styliser l' élément est en soi une chose délicate qui nécessite beaucoup de travail et de considération pour la cohérence entre les navigateurs.
Voir le Pen Indeterminate Progress Element par Geoff Graham (@geoffgraham) sur CodePen.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Plus d'information
- Brouillon de travail des sélecteurs CSS niveau 4
- Cases à cocher indéterminées
- Boutons radio indéterminés
- Élément de progression HTML5