Я нашел следующий селектор CSS в таблице стилей пользовательского агента Google Chrome:

[type="checkbox" i]

Что iзначит?

Как упоминалось в комментариях, это для сопоставления атрибутов без учета регистра. Это новая функция в CSS Selectors Level 4.

В настоящее время он доступен в Chrome 49+, Firefox 47+, Safari 9+ и Opera 37 + *. До этого он был доступен только в стилях пользовательского агента Chrome, начиная с Chrome 39, но его можно было включить для веб-контента, установив флаг экспериментальных функций.

* Более ранние версии Opera также могут его поддерживать.

Рабочий пример / тест браузера:

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

Вышеупомянутый квадрат будет зеленым, если браузер поддерживает эту функцию, и красным, если нет.

Это флаг без учета регистра для селекторов атрибутов, представленный в Селекторах 4 . Судя по всему, они внедрили эту функцию в Chrome еще в августе 2014 года.

Вкратце: этот флаг сообщает браузеру о необходимости сопоставления соответствующих значений typeатрибута без учета регистра. Поведение селектора по умолчанию для значений атрибутов в HTML чувствительно к регистру , что часто нежелательно, потому что для многих атрибутов определены значения без учета регистра, и вы хотите, чтобы ваш селектор выбирал все правильные элементы независимо от регистра. typeявляется одним из примеров такого атрибута, потому что это перечислимый атрибут , а перечисленные атрибуты, как говорят, имеют значения без учета регистра .

Вот соответствующие коммиты:

• 179370 - реализация
• 179401 - изменения в таблицах стилей UA, как показано на скриншоте в вопросе

Обратите внимание, что в настоящее время он скрыт во флаге «Включить экспериментальные функции веб-платформы», доступ к которому можно получить по адресу chrome: // flags / # enable-experimental-web-platform-features. Это может объяснить, почему эта функция осталась практически незамеченной - функции, скрытые за этим флагом, могут использоваться только внутри, а не в общедоступном коде (например, в таблицах стилей авторов), если они не включены, потому что они экспериментальные и, следовательно, не готовы к использованию в производственной среде.

Вот тестовый пример, который вы можете использовать - сравните результаты, когда флаг включен и отключен:

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>

Обратите внимание, что я использую настраиваемый атрибут данных вместо того, typeчтобы показать, что его можно использовать практически с любым атрибутом.

На момент написания этой статьи мне не известно о каких-либо других реализациях, но, надеюсь, другие браузеры скоро их догонят. Это относительно простое, но чрезвычайно полезное дополнение к стандарту, и я с нетерпением жду возможности использовать его в будущем.