Google Chrome kullanıcı aracısı stil sayfasında aşağıdaki CSS seçiciyi buldum:

[type="checkbox" i]

Ne anlama igeliyor?

Yorumlarda belirtildiği gibi, büyük / küçük harfe duyarlı olmayan öznitelik eşleştirmesi içindir. Bu, CSS Seçiciler Seviye 4'teki yeni bir özelliktir.

Şu anda Chrome 49+, Firefox 47+, Safari 9+ ve Opera 37 + * 'da mevcuttur. Bundan önce, yalnızca Chrome 39'dan başlayarak Chrome kullanıcı aracısı stillerinde mevcuttu, ancak deneysel özellikler bayrağı ayarlanarak web içeriği için etkinleştirilebilirdi.

* Opera'nın önceki sürümleri de destekleyebilir.

Çalışma Örneği / Tarayıcı Testi:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

Tarayıcı bu özelliği destekliyorsa yukarıdaki kare yeşil, desteklemiyorsa kırmızı olacaktır.

Bu, Seçiciler 4'te tanıtılan öznitelik seçiciler için büyük / küçük harfe duyarlı olmayan bayraktır . Görünüşe göre bu özelliğin bir uygulamasını Chrome'a ​​Ağustos 2014 gibi erken bir zamanda gizlediler.

Özetle: bu bayrak, tarayıcıya, typebüyük / küçük harfe duyarlı olmayan bir şekilde öznitelik için ilgili değerleri eşleştirmesini söyler . HTML'deki öznitelik değerleri için varsayılan seçici eşleştirme davranışı büyük / küçük harfe duyarlıdır ; bu genellikle istenmeyen bir durumdur çünkü birçok öznitelik büyük / küçük harfe duyarlı olmayan değerlere sahip olacak şekilde tanımlanır ve seçicinizin büyük / küçük harfe bakılmaksızın tüm doğru öğeleri aldığından emin olmak istersiniz. typeBu tür bir özniteliğin bir örneğidir, çünkü bu, numaralandırılmış bir özniteliktir ve numaralandırılmış özniteliklerin büyük / küçük harfe duyarsız değerlere sahip olduğu söylenir .

İşte ilgili taahhütler:

• 179370 - uygulama
• 179401 - sorudaki ekran görüntüsünde gösterildiği gibi UA stil sayfalarında değişiklikler

Şu anda chrome: // flags / # enable-experimental-web-platform-features adresinde erişebileceğiniz "Deneysel Web Platformu özelliklerini etkinleştir" bayrağı içinde gizlendiğini unutmayın. Bu, özelliğin neden büyük ölçüde fark edilmediğini açıklayabilir - bu bayrağın arkasına gizlenmiş özellikler, yalnızca dahili olarak kullanılabilir ve etkinleştirilmedikçe halka açık kodda (yazar stil sayfaları gibi) kullanılamaz, çünkü bunlar deneyseldir ve bu nedenle üretimde kullanıma hazır değildir.

İşte kullanabileceğiniz bir test durumu - bayrak etkinleştirildiğinde ve devre dışı bırakıldığında sonuçları karşılaştırın:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

typeHemen hemen her özellik ile kullanılabileceğini göstermek yerine özel bir veri özelliği kullandığımı unutmayın .

Bu yazı itibariyle başka herhangi bir uygulamadan haberdar değilim, ancak umarım diğer tarayıcılar yakında yetişir. Bu, standarda göre nispeten basit ancak son derece kullanışlı bir eklentidir ve gelecekte onu kullanabilmeyi dört gözle bekliyorum.