Co oznacza „i” w selektorze atrybutów CSS?

112

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

[type="checkbox" i]

Co to ioznacza?

AntiCZ
źródło
1
@Alexander O'Mara: Selektory poziom 4 jest częścią CSS3 - to tylko kolejny poziom modułu, który zaczynał na poziomie 3. „CSS4” to myląca nazwa.
BoltClock
2
@Alexander O'Mara: Bardzo bym chciał, żeby to zostało poruszone w meta. W szczególności chciałbym wiedzieć, jak możemy sobie poradzić z użyciem tagu [css4] - najbardziej drastycznym środkiem, jaki mogłem zrobić, jest uczynienie go synonimem [css3], i tak naprawdę byłoby to właściwe.
BoltClock
1
@BoltClock Meta Pytanie jest gotowe! BTW, kiedy pytasz o połączenie swojej odpowiedzi z tym pytaniem, czy miałeś na myśli edycję pytania / odpowiedzi tutaj, aby dodać informacje, czy odnosisz się do magicznego przycisku przenieś-odpowiedź-na-inne-pytanie?
Alexander O'Mara
1
@Alexander O'Mara: Nie poruszanie pojedynczych odpowiedzi, ale połączenie dwóch całych pytań. To tylko funkcja mod.
BoltClock
1
@TylerH Mamy dyskusję na ten temat na Meta . Zapraszam do dołączenia do dyskusji tam.
Alexander O'Mara,

Odpowiedzi:

132

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.

Alexander O'Mara
źródło
6
Dzięki za nauczanie! Ciesz się swoim nowym kapeluszem. Czy coś takiego działa w bibliotekach selektorów? Jaką obsługuje przeglądarkę?
Benjamin Gruenbaum
1
@BenjaminGruenbaum Wygląda na to, że jest dostępny tylko w stylach agenta użytkownika Chrome (a nie w CSS witryny, przynajmniej jeszcze nie). Nie mogłem znaleźć żadnej oficjalnej dokumentacji zgodności.
Alexander O'Mara,
(Ponowne opublikowanie mojego wcześniejszego komentarza teraz, gdy pytania są połączone.) Nie jest całkowicie zaskakujące, że zupełnie nowe, eksperymentalne standardy, takie jak ten, są słabo udokumentowane. To powiedziawszy, moja odpowiedź zawiera więcej informacji na ten temat, a mianowicie, jak to działa, dlaczego jest używany i jak jest wdrażany w Chrome (jak podano w pytaniu).
BoltClock
Chrome doda obsługę tego w wersji 49.0 (obecnie w wersji Beta), Firefox w wersji 47.0 (planowane wydanie w czerwcu 2016). Źródło: developer.mozilla.org/en-US/docs/Web/CSS/…
Miscreant
1
@LWChris: Nie jestem pewien, czy taka przeglądarka faktycznie istnieje. IE6 w ogóle nie obsługuje selektorów atrybutów, a IE7 obsługuje je nawet z niestandardowymi atrybutami danych.
BoltClock
36

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:

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.

BoltClock
źródło
Mam zmęczenie „tego popołudnia”… Po przeczytaniu specyfikacji W3 nadal nie rozumiem do końca, jakie byłoby praktyczne zastosowanie w css w życiu codziennym?
Matt
2
@Matt: przy dopasowywaniu selektora atrybutu rozróżniana jest wielkość liter, jak podano w HTML5 , co w wielu przypadkach jest niepożądane, ponieważ HTML5 dopuszcza wartości bez rozróżniania wielkości liter dla niektórych atrybutów. Możesz użyć tej flagi, aby upewnić się, że wybierzesz właściwe elementy niezależnie od wielkości liter. Na przykład na zrzucie ekranu widać, że szuka, do input[type="search" i]którego dopasują elementy typu <input type="SEARCH">.
BoltClock
1
Mogę potwierdzić, że działa z Chromium w wersji 43.0.2357.130 i włączoną opcją „Włącz eksperymentalne funkcje platformy internetowej”.
Robert Siemer