Как я могу применить селектор CSS к значениям атрибута, чувствительным к регистру?

Если CSS и HTML являются нечувствительными к регистру языками (*), а W3C говорит

Чувствительность атрибутов имен и значений атрибутов в селекторах зависит от языка документа.

Как я могу смириться с тем, что значения атрибутов чувствительны к регистру в селекторах? Например,

div[title=TITLE] {color:green}

не делает текст зеленым для этого HTML:

<div title="title">This is a div</div>

Здесь скрипта.

Является ли это ошибкой в браузере? И когда я говорю "браузер", я имею в виду всех. Или я смотрю на незавершенную версию спецификаций CSS3? Что было бы странно, поскольку одна и та же строка текста также содержалась в спецификациях CSS2 здесь.

_{(*), за исключением некоторых функций, которые являются явными исключениями, такими как имена классов и идентификаторов. Обратите внимание, что в этом примере нет имен классов или идентификаторов.}

Ответы

Ответ 1

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

Имена атрибутов и элементов HTML-элементов в документах HTML должны рассматриваться как ASCII без учета регистра для целей выбора.

Все остальное (значения атрибутов для элементов HTML, идентификаторов и классов в режиме отсутствия quirks и режима с ограниченными лимитами, а также имена элементов, имена атрибутов и значения атрибутов в документах XML) должны рассматриваться как чувствительные к регистру для целей выбора селектора.

Конечно, HTML 4 ничего не говорит о взаимодействии с селекторами, но он говорит, что атрибут title, в частности, чувствителен к регистру. Поскольку селекторы зависят от языка документа для определения чувствительности к регистру, здесь нет никакой разницы.

XHTML следует тому же набору правил, что и в XML: все значения атрибутов должны быть чувствительны к регистру, поэтому селектор должен следовать этой чувствительности к регистру. Опять же, никакой разницы.

Итак, что вы видите, полностью по дизайну; нет проблемы с браузером или спецификацией.

Ответ 2

Вы ответили на свой вопрос:

Чувствительность атрибутов имен и значений атрибутов в селекторах зависит от языка документа.

Но, я думаю, это потому, что браузеру it и it не принадлежат те же строки. В браузере две разные вещи.

ИЗМЕНИТЬ --- Вы добавили что-то хорошее в свой комментарий. Позвольте мне объяснить: парсер HTML/CSS читает HTML и CSS как нечувствительные к регистру. Это потому, что они есть. Но атрибутов нет, потому что они определяются пользователем. Таким образом, он читает их как чувствительные к регистру. В принципе, HTML и CSS стандартизированы. Атрибутов нет.

ИЗМЕНИТЬ СНОВА --- HTTP-методы стандартизированы (я думаю), поэтому для них не обязательно быть чувствительным к регистру.

Ответ 3

Строки в селекторах атрибутов сопоставляются случайным образом в HTML, и это в значительной степени. Я не знаю, почему они не будут - возьмите name, например. name="foo" и name="foo" все равно отправляются на сервер по-разному. Даже id чувствительны к регистру, если вы хотите, чтобы они были; этот работает отлично и проверяет, и кажется, что он должен соответствовать спецификации (но я бы не доверял ей работать везде).

См. спецификация (соответствующий бит находится в спецификации HTML, а не CSS):

Спецификация Selectors оставляет чувствительность к регистру идентификаторов, классов, имен элементов, имен атрибутов и значений атрибутов, определяемых языком хоста. [СЕЛЕКТОРЫ]

Уникальный идентификатор элементов HTML в документах, находящихся в режиме quirks, должен рассматриваться как ASCII без учета регистра для целей выбора.

Классы из атрибута класса элементов HTML в документах, которые находятся в режиме quirks, должны рассматриваться как ASCII без учета регистра для целей выбора.

При сравнении селектора типа элемента CSS с именами элементов HTML в документах HTML, селектор типа элемента CSS должен быть сначала преобразован в нижний регистр ASCII. Тот же селектор по сравнению с другими элементами должен сравниваться в соответствии с его оригинальным случаем. В обоих случаях сравнение чувствительно к регистру.

При сравнении части имени селектора атрибутов CSS с именами атрибутов без пространства имен в HTML-элементах в документах HTML часть имени селектора атрибутов CSS сначала должна быть преобразована в нижний регистр ASCII. Тот же селектор по сравнению с другими атрибутами должен сравниваться в соответствии с его оригинальным случаем. В обоих случаях сравнение чувствительно к регистру.

Все остальное (значения атрибутов для элементов HTML, идентификаторов и классов в режиме отсутствия quirks и режима с ограниченными лимитами, а также имена элементов, имена атрибутов и значения атрибутов в документах XML) должны рассматриваться как чувствительные к регистру для целей выбора селектора.

Ответ 4

Некоторые новые браузеры поддерживают этот синтаксис

div[title=TITLE i] { color:green; }

или

div[title=TITLE i] { color:green; }

которые соответствуют этому DIV:

<div title="title">This is a div</div>

Примечание: Поддержка: версия: Chrome >= 49.0, Firefox (Gecko) >= 47.0, Safari >= 9