Znalazłem następujący selektor CSS w arkuszu stylów klienta użytkownika przeglądarki Google Chrome:
[type="checkbox" i]
Co to i
oznacza?
css
css-selectors
AntiCZ
źródło
źródło
Odpowiedzi:
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:
Powyższy kwadrat będzie zielony, jeśli przeglądarka obsługuje tę funkcję, a czerwony, jeśli nie.
źródło
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
type
atrybutu 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.type
jest 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:
Zauważ, że zamiast tego używam niestandardowego atrybutu danych,
type
aby 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.
źródło
input[type="search" i]
którego dopasują elementy typu<input type="SEARCH">
.