Ответ 1

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

В настоящее время он доступен в Chrome 49+, Firefox 47+, Safari 9+ и Opera 37 + *. До этого он был доступен только в стилях User-Agent 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>

Ответ 2

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

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

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

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

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

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

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>