Таблица стилей агента пользователя - селектор атрибутов img [align = & ldquo; left & rdquo; i] [дублировать]

Я подозреваю, что это дико неэффективно, но довольно простой подход, который работал на небольшом наборе данных, в котором я его пробовал.

select top 1 field
from table
where field in (select top 5 field from table order by field asc)
order by field desc

Это получило бы 5-й элемент, изменив второй верхний номер для получения другого n-го элемента

SQL-сервера (я думаю), но должен работать над более старыми версиями, которые не поддерживают ROW_NUMBER ().

98
задан James Donnelly 7 May 2015 в 11:24
поделиться

2 ответа

Как уже упоминалось в комментариях, это относится к несоответствующему атрибуту атрибутов. Это новая функция в 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>

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

116
ответ дан Alexander O'Mara 22 August 2018 в 09:09
поделиться
  • 1
    Спасибо за преподавание! Наслаждайтесь новой шляпой. Работает ли это в библиотеках селекторов? Что это за поддержка браузера? – Benjamin Gruenbaum 16 December 2014 в 15:47
  • 2
    @BenjaminGruenbaum Похоже, он доступен только в стилях пользовательского агента Chrome (а не в CSS сайта, по крайней мере, пока нет). Я не смог найти официальную документацию по совместимости. – Alexander O'Mara 16 December 2014 в 15:50
  • 3
    (Повторяя мой предыдущий комментарий, теперь, когда вопросы объединяются.) Не удивительно, что совершенно новые, экспериментальные стандарты, такие как это, плохо документированы. Тем не менее, мой ответ содержит дополнительную информацию об этом, а именно, как он работает, почему он используется и как он реализован в Chrome (как задается вопросом). – BoltClock♦ 27 May 2015 в 16:36
  • 4
    Chrome добавит поддержку для этого в версии 49.0 (в настоящее время в бета-версии), Firefox версии 47.0 (планируется выпустить в июне 2016 года). Источник: developer.mozilla.org/en-US/docs/Web/CSS/… – Miscreant 10 February 2016 в 12:26
  • 5
    Зеленый, если поддерживается, красный, если нет, нет, если ваш браузер плох и не понимает настраиваемые CSS-селектора. – LWChris 1 August 2017 в 19:28

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

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

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

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

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

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

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 я использую атрибут пользовательских данных, чтобы показать, что он может использоваться практически с любым атрибутом.

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

34
ответ дан BoltClock 22 August 2018 в 09:09
поделиться
  • 1
    У меня есть "в тот же день" усталость ... После прочтения спецификации W3 я все еще не понимаю полностью, что было бы практическим использованием реальной жизни в css для этого? – Matt 20 January 2015 в 17:41
  • 2
    @Matt: сопоставление выбора атрибутов чувствительно к регистру как , указанному в HTML5 , что во многих случаях нежелательно, поскольку HTML5 допускает нечувствительные к регистру значения для определенных атрибутов. Вы можете использовать этот флаг, чтобы убедиться, что вы выбираете правильные элементы независимо от случая. Например, на скриншоте вы можете увидеть, что он ищет input[type="search" i], который будет соответствовать элементам, таким как <input type="SEARCH">. – BoltClock♦ 20 January 2015 в 17:50
  • 3
    Я могу подтвердить, что он работает с Chromium Version 43.0.2357.130 и включен режим «Включить возможности экспериментальной веб-платформы». – Robert Siemer 15 August 2015 в 16:51