: nieokreślony - CSS-Tricks

Anonim

:indeterminatejest selektorem pseudoklasy w CSS nazwanym dla stanu, który nie jest zaznaczony ani odznaczony. Jest to stan pośredni, który możemy rozważyć „Może” między opcjami „Tak” i „Nie”. Stan nie jest w pełni zdeterminowany, stąd nazwa: nieokreślony.

Nieokreślone pola wyboru

Najczęstszym miejscem, w którym możemy to zobaczyć w grze, są pola wyboru w postaci:

Nieterminuj jako trzeci stan pola wyboru

Jest kilka dziwnych rzeczy, :indeterminatejeśli chodzi o pola wyboru, które warto zwrócić uwagę, zanim zagłębimy się w to, jak można je wybrać w CSS.

Nie można go ustawić w kodzie HTML

Po pierwsze, nie ma możliwości ustawienia pola wyboru na nieokreślony stan w HTML. W powyższym przykładzie otwierającym byliśmy w stanie ustawić drugie pole wyboru jako zaznaczone, wyraźnie mówiąc o tym w kodzie HTML.

Logiczne jest tylko założenie, że moglibyśmy zrobić to samo ze stanem nieokreślonym:

Ale niestety tak nie jest, więc nie używaj tego ostatniego przykładu w swoim kodzie.

W chwili pisania tego tekstu Javascript jest jedynym sposobem na ustawienie nieokreślonego stanu w polu wyboru. Jednym ze sposobów jest wybranie określonego pola wyboru według identyfikatora:

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

Ograniczeniem powyższego przykładu jest to, że pole wyboru nie może nigdy wrócić do stanu nieokreślonego, gdy zmieni się w inny stan. Zamiast tego możemy obracać się między stanami zaznaczonymi, niezaznaczonymi i nieokreślonymi:

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

Zobacz Stany pola wyboru obracania pióra autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Jest to stan czysto wizualny

Pole wyboru nadal liczy tylko to, czy zostało zaznaczone, czy odznaczone, niezależnie od tego, czy aktywowaliśmy stan nieokreślony. Innymi słowy, wartość nieokreślona maskuje rzeczywistą wartość pola wyboru i nie jest liczona jako własna wartość.

Jego domyślny wygląd jest niespójny w różnych przeglądarkach

Podobnie jak w przypadku danych numerycznych, stan nieokreślony nie jest jednolity w każdej przeglądarce.

Porównanie tego, jak nieokreślony renderuje się w kilku różnych przeglądarkach

Jednak ogólnie rzecz biorąc, tutaj jest obsługa nieokreślonych pól wyboru.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
28 3.6 6 12 6

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 12,2-12,4

Nieokreślone przyciski radiowe

:indeterminate można zastosować do przycisków opcji na poziomie grupy, gdzie cała grupa jest uważana za nieokreśloną, jeśli nie wybrano żadnej opcji.

Zobacz przyciski radiowe Pen Inderminate autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Należy zauważyć, że używanie :indeterminatemoże nie być najlepszym wyborem, jeśli chodzi o wygodę użytkownika.

Nieokreślone paski postępu

Możemy również zastosować :indeterminatedo elementu, dla którego żadna wartość nie została jawnie ustawiona w kodzie HTML. Nie jest potrzebny Javascript, ale stylizacja elementu jest sama w sobie trudną rzeczą, która wymaga dużo pracy i rozważenia dla spójności między przeglądarkami.

Zobacz Pen Indeterminate Progress Element autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
39 51 11 79 10.1

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Więcej informacji

  • Selektory CSS Poziom 4 Wersja robocza
  • Nieokreślone pola wyboru
  • Nieokreślone przyciski radiowe
  • Element postępu HTML5