У таблиці стилів агентів Google Chrome я знайшов наступний селектор CSS:

[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-експериментально-веб-платформа. Це може пояснити, чому ця функція в основному залишилась непоміченою - особливості, приховані за цим прапором, можна використовувати лише внутрішньо, а не у відкритому для публічного коду (наприклад, авторські таблиці стилів), якщо це не ввімкнено, оскільки вони експериментальні і тому не готові до виробничого використання.

Ось тестовий випадок, який ви можете використовувати - порівняйте результати, коли прапор увімкнено та вимкнено:

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щоб показати, що його можна використовувати майже з будь-яким атрибутом.

Я не знаю жодних інших реалізацій, як це було написано, але, сподіваємось, інші браузери незабаром наздоганяють. Це порівняно просте, але надзвичайно корисне доповнення до стандарту, і я з нетерпінням чекаю можливості його використовувати у майбутньому.