Znalazłem następujący selektor CSS w arkuszu stylów klienta użytkownika przeglądarki Google Chrome:

[type="checkbox" i]

Co to ioznacza?

Jak wspomniano w komentarzach, dotyczy to dopasowywania atrybutów bez uwzględniania wielkości liter. To nowa funkcja w selektorach CSS na poziomie 4.

Obecnie jest dostępny w Chrome 49+, Firefox 47+, Safari 9+ i Opera 37 + *. Wcześniej był dostępny tylko w stylach agenta użytkownika Chrome, począwszy od wersji Chrome 39, ale można go było włączyć dla treści internetowych, ustawiając flagę funkcji eksperymentalnych.

* Wcześniejsze wersje Opery również mogą to obsługiwać.

Przykład roboczy / test przeglądarki:

[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>

Powyższy kwadrat będzie zielony, jeśli przeglądarka obsługuje tę funkcję, a czerwony, jeśli nie.

To jest flaga bez rozróżniania wielkości liter dla selektorów atrybutów, wprowadzona w selektorach 4 . Najwyraźniej wkradli implementację tej funkcji do Chrome już w sierpniu 2014 roku.

W skrócie: ta flaga nakazuje przeglądarce dopasowanie odpowiednich wartości typeatrybutu bez uwzględniania wielkości liter. W domyślnym zachowaniu dopasowywania selektora dla wartości atrybutów w HTML rozróżniana jest wielkość liter , co jest często niepożądane, ponieważ wiele atrybutów jest zdefiniowanych tak, aby nie uwzględniały wielkości liter, i chcesz się upewnić, że selektor wybiera wszystkie właściwe elementy niezależnie od wielkości liter. typejest jednym z przykładów takiego atrybutu, ponieważ jest to atrybut wyliczeniowy , a o atrybutach wyliczeniowych mówi się, że nie uwzględniają wielkości liter .

Oto odpowiednie zatwierdzenia:

• 179370 - realizacja
• 179401 - zmiany w arkuszach stylów UA, jak pokazano na zrzucie ekranu w pytaniu

Zwróć uwagę, że jest obecnie ukryty pod flagą „Włącz eksperymentalne funkcje platformy internetowej”, do której można uzyskać dostęp pod adresem chrome: // flags / # enable-experimental-web-platform-features. To może wyjaśniać, dlaczego ta funkcja pozostała w dużej mierze niezauważona - funkcje ukryte za tą flagą mogą być używane tylko wewnętrznie, a nie w kodzie dostępnym publicznie (takim jak arkusze stylów autora), chyba że jest włączona, ponieważ są eksperymentalne i dlatego nie są gotowe do użytku produkcyjnego.

Oto przypadek testowy, którego możesz użyć - porównaj wyniki, gdy flaga jest włączona i wyłączona:

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>

Zauważ, że zamiast tego używam niestandardowego atrybutu danych, typeaby pokazać, że można go używać z prawie każdym atrybutem.

Nie znam żadnych innych implementacji w chwili pisania tego tekstu, ale mam nadzieję, że inne przeglądarki wkrótce nadrobią zaległości. Jest to stosunkowo prosty, ale niezwykle przydatny dodatek do standardu i nie mogę się doczekać, aby móc go używać w przyszłości.