: unbestimmt - CSS-Tricks

Anonim

:indeterminateist ein Pseudoklassen-Selektor in CSS, der nach einem Status benannt ist, der weder aktiviert noch deaktiviert ist. In diesem Zwischenzustand könnten wir die Optionen „Vielleicht“ zwischen „Ja“ und „Nein“ in Betracht ziehen. Der Zustand ist nicht vollständig bestimmt, daher der Name: unbestimmt.

Unbestimmte Kontrollkästchen

Der häufigste Ort, an dem dies im Spiel zu sehen ist, sind Kontrollkästchen in einer Form:

Inderterminate als dritter Kontrollkästchenstatus

Es gibt ein paar skurrile Dinge, :indeterminatewenn es um Kontrollkästchen geht, die es wert sind, erwähnt zu werden, bevor untersucht wird, wie sie in CSS ausgewählt werden können.

Es kann nicht im HTML eingestellt werden

Zunächst einmal gibt es keine Möglichkeit, ein Kontrollkästchen in HTML auf einen unbestimmten Zustand zu setzen. Im obigen Eröffnungsbeispiel konnten wir das zweite Kontrollkästchen aktivieren, indem wir dies im HTML explizit sagten.

Es ist nur logisch anzunehmen, dass wir dasselbe mit einem unbestimmten Zustand tun könnten:

Leider ist dies nicht der Fall. Verwenden Sie das letzte Beispiel nicht in Ihrem Code.

Zum Zeitpunkt dieses Schreibens ist Javascript das einzige Mittel, um einen unbestimmten Status für ein Kontrollkästchen festzulegen. Eine Möglichkeit besteht darin, ein bestimmtes Kontrollkästchen nach ID zu aktivieren:

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

Die Einschränkung des obigen Beispiels besteht darin, dass das Kontrollkästchen niemals in einen unbestimmten Zustand zurückkehren kann, wenn es in einen anderen Zustand wechselt. Stattdessen können wir zwischen aktivierten, nicht aktivierten und unbestimmten Zuständen wechseln:

 
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )

Weitere Informationen finden Sie in den Kontrollkästchen für die Stiftrotation von Geoff Graham (@geoffgraham) auf CodePen.

Es ist ein rein visueller Zustand

Ein Kontrollkästchen zählt immer noch nur, ob es aktiviert oder deaktiviert wurde, unabhängig davon, ob wir einen unbestimmten Status aktiviert haben. Mit anderen Worten, unbestimmt maskiert den tatsächlichen Wert des Kontrollkästchens und zählt nicht als eigener Wert.

Die Standardeinstellung ist in allen Browsern inkonsistent

Wie bei numerischen Eingaben ist ein unbestimmter Status nicht in jedem Browser einheitlich.

Ein Vergleich, wie unbestimmt das Rendern in einigen verschiedenen Browsern ist

Insgesamt ist hier jedoch die Unterstützung für unbestimmte Kontrollkästchen.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
28 3.6 6 12 6

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 12.2-12.4

Unbestimmte Optionsfelder

:indeterminate kann auf Optionsfelder auf Gruppenebene angewendet werden, bei denen die gesamte Gruppe als unbestimmt angesehen wird, wenn keine Option ausgewählt ist.

Siehe die Pen Inderminate Radio Buttons von Geoff Graham (@geoffgraham) auf CodePen.

Wir sollten beachten, dass die Verwendung in :indeterminateBezug auf die Benutzererfahrung möglicherweise nicht die beste Wahl ist.

Unbestimmte Fortschrittsbalken

Wir können auch :indeterminateauf das Element anwenden, für das im HTML kein Wert explizit festgelegt wurde. Javascript ist nicht erforderlich, aber das Stylen des Elements ist selbst eine schwierige Sache, die viel Arbeit und Berücksichtigung der browserübergreifenden Konsistenz erfordert.

Siehe das Pen Indeterminate Progress Element von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
39 51 11 79 10.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Mehr Informationen

  • CSS Selectors Level 4 Working Draft
  • Unbestimmte Kontrollkästchen
  • Unbestimmte Optionsfelder
  • HTML5-Fortschrittselement