: belirsiz - CSS Hileleri

Anonim

:indeterminateCSS'de, işaretlenmemiş veya işaretlenmemiş bir durum için adlandırılan bir sözde sınıf seçicidir. "Evet" ve "Hayır" seçenekleri arasındaki "Belki" yi düşünebileceğimiz bu ara durumdur. Durum tam olarak belirlenmemiştir, dolayısıyla adı belirsizdir.

Belirsiz Onay Kutuları

Bunu oyunda görebileceğimiz en yaygın yer, bir formdaki onay kutularıdır:

Üçüncü bir onay kutusu durumu olarak sonlandırma

:indeterminateCSS'de nasıl seçilebileceğini araştırmadan önce, onay kutuları söz konusu olduğunda dikkat edilmesi gereken birkaç ilginç şey var .

HTML'de ayarlanamaz

Öncelikle, HTML'de belirsiz bir duruma onay kutusu ayarlamanın bir yolu yoktur. Yukarıdaki açılış örneğinde, HTML'de açıkça söyleyerek ikinci onay kutusunu işaretlenecek şekilde ayarlayabildik.

Aynı şeyi belirsiz bir durumla yapabileceğimizi varsaymak sadece mantıklıdır:

Ancak, ne yazık ki, durum böyle değil, bu yüzden kodunuzda bu son örneği kullanmayın.

Bu yazının yazıldığı sırada Javascript, bir onay kutusunda belirsiz bir durum belirlemenin tek yoludur. Bunu yapmanın bir yolu, kimliğe göre belirli bir onay kutusu seçmektir:

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

Yukarıdaki örneğin sınırlaması, onay kutusunun başka bir duruma geçtikten sonra asla belirsiz bir duruma geri dönemeyeceğidir. Bunun yerine, işaretli, kontrol edilmemiş ve belirsiz durumlar arasında geçiş yapabiliriz:

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

Geoff Graham (@geoffgraham) tarafından CodePen'de Kalem Döndürme Onay Kutusu Durumlarına bakın.

Tamamen görsel bir durum

Bir onay kutusu, belirsiz bir durumu etkinleştirip etkinleştirmediğimizden bağımsız olarak, yalnızca işaretli olup olmadığını sayar. Başka bir deyişle, belirsiz, onay kutusunun gerçek değerini maskeler ve kendi başına bir değer olarak sayılmaz.

Varsayılan görünümü tarayıcılar arasında tutarsızdır

Sayısal girişler gibi, belirsiz bir durum da her tarayıcıda tutarlı bir şekilde stil oluşturmaz.

Birkaç farklı tarayıcıda belirsizliğin nasıl işlediğine dair bir karşılaştırma

Ancak genel olarak, belirsiz onay kutuları için destek burada.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
28 3.6 6 12 6

Mobil / Tablet

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

Belirsiz Radyo Düğmeleri

:indeterminate grup düzeyindeki radyo düğmelerine uygulanabilir, burada hiçbir seçenek seçilmezse tüm grubun belirsiz bir durumda olduğu kabul edilir.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen Inderminate Radyo Düğmelerini görün.

:indeterminateKullanıcı deneyimi söz konusu olduğunda kullanmanın en iyi seçenek olmayabileceğini unutmamalıyız .

Belirsiz İlerleme Çubukları

Biz de uygulayabilirsiniz :indeterminateiçin hiçbir değer açıkça HTML ayarlandı elemanı. Javascript'e gerek yoktur, ancak öğenin stilini oluşturmak, tarayıcılar arası tutarlılık için çok fazla çalışma ve dikkat gerektiren zor bir şeydir.

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen Indeterminate Progress Element'e bakın.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
39 51 11 79 10.1

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Daha fazla bilgi

  • CSS Seçiciler Seviye 4 Çalışma Taslağı
  • Belirsiz Onay Kutuları
  • Belirsiz Radyo Düğmeleri
  • HTML5 İlerleme Öğesi