Селектор атрибута CSS и чувствительность к регистру с атрибутом «тип» против атрибутов - PullRequest
Новая
       18

Селектор атрибута CSS и чувствительность к регистру с атрибутом «тип» против атрибутов

0 голосов
/ 01 ноября 2018

Я пытаюсь стилизовать OL на основе его атрибута типа. Атрибуты стиля списка для всех UL и OL ранее были стерты другой таблицей стилей CSS, которую я не могу изменить, и мне нужно изменить стиль стиля списка, принимая во внимание тип, то есть, если OL должен использовать Roman буквы или цифры и т. д.

Это легко, подумал я; Я просто буду использовать селектор атрибутов для нацеливания на OL на основе значения атрибута type. Селектор атрибута чувствителен к регистру, так что это должно быть легко, верно?

Неверно - по крайней мере, когда вы пытаетесь использовать стандартный атрибут «type».

Вот пример (который работает): 

/* Remove default list style */
ul, ol { list-style:none; }

/* This works, using a non-standard foo attribute. The selector is case sensitive, so I can target 'i' and 'I' separately */
ol[foo='i'] {
  list-style-type:lower-roman;
}

ol[foo='I'] {
  list-style-type:upper-roman;
}
<ol foo="i">
  <li>Styled with lower case roman</li>
  <li>Styled with lower case roman</li>
</ol>

<ol foo="I">
  <li>Styled with uppercase roman</li>
  <li>Styled with uppercase roman</li>
</ol>

Теперь замените foo на type и попробуйте снова: 

/* Remove default list style */
ul, ol { list-style:none; }

/* Trying to use the standard type attribute, the selector is no longer case sensitive, so I cannot style 'i' and 'I' individually .... */
ol[type='i'] {
  list-style-type:lower-roman;
}

ol[type='I'] {
  list-style-type:upper-roman;
}
<ol type="i">
  <li>Should be lower-case roman</li>
  <li>Should be lower-case roman</li>
</ol>

<ol type="I">
  <li>Should be upper-case roman</li>
  <li>Should be upper-case roman</li>
</ol>

Теперь, как будто селектор больше не чувствителен к регистру, и оба списка затронуты, и оба используют римские буквы в верхнем регистре.

Мне не удалось найти никакой информации, является ли это правильным поведением или нет, то есть при использовании известного атрибута, такого как 'type' v.s, с использованием нестандартного атрибута, такого как 'foo'. Тот факт, что это происходит как в Chrome, так и в Firefox, заставляет поверить, что это не ошибка.

Есть идеи?

Вот CodePen, с которым можно связываться: https://codepen.io/haukurhaf/pen/NOQYOz

1 Ответ

0 голосов
/ 01 ноября 2018

Этот, и более широкий случай использования принудительного выбора селекторов атрибутов с учетом регистра, был учтен введением флага селектора атрибутов с учетом регистра s: 

ol[type='i' s] {
  list-style-type:lower-roman;
}

ol[type='I' s] {
  list-style-type:upper-roman;
}

Теперь мы ждем реализации ...

Спецификация HTML, похоже, предполагает, что поведение type атрибута ol некорректно, но использование определенных ключевых слов делает это менее чем на 100% ясным. Раздел 4.16.2 использует "must":

Селекторы атрибутов в элементе HTML в документе HTML должны обрабатывать значения атрибутов со следующими именами как нечувствительные к регистру ASCII, с одним исключением, как отмечено в разделе рендеринга :

  • ...
  • type (кроме случаев, указанных в разделе рендеринга)

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

И указывает на раздел 14.3.8 , который использует «ожидаемое», как описано в аннотации раздела 14 (tl; dr: браузер не обязательно нарушает spec, если он решает не следовать тому, что указано как «ожидаемое» поведение):

Ожидается также применение следующих правил в качестве презентационных указаний: 

@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
ul[type=none i], li[type=none i] { list-style-type: none; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
ul[type=square i], li[type=square i] { list-style-type: square; }

В приведенной выше таблице стилей селекторы атрибутов для элементов ol и li должны обрабатываться с учетом регистра.

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

...