Должен ли я использовать CSS:disabled псевдокласс или [disabled] селектор атрибутов или это вопрос мнения?

Я пытаюсь создать стиль отключенного ввода. Я могу использовать:

.myInput[disabled] { }

или

.myInput:disabled { }

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

мне не нужно поддерживать старые браузеры (это приложение интрасети), поэтому это:

  • атрибут новее и лучше
  • псевдо-класс по-прежнему путь
  • как вам больше нравится
  • есть техническая причина использовать один над другим
53
css css-selectors css3 disabled-input pseudo-class

2 ответов

атрибут селектора современной технологии CSS3 пути и путь вперед?

  • атрибут новее и лучше

нет; на самом деле селекторы атрибутов существуют с в CSS2 и disabled сам атрибут существует с HTML 4. Насколько мне известно,:disabled псевдо-класс был введен в селекторы 3, что делает псевдо-класс новые.

  • есть техническая причина использовать один над другим

да, в какой-то степени.

с селектором атрибутов вы полагаетесь на знание того, что документ, который вы стилизуете, использует disabled атрибут для указания отключенных полей. Теоретически, если вы стилизовали что-то, что не было HTML, отключенные поля не могут быть представлены с помощью disabled атрибут, например, он может будь enabled="false" или что-то подобное. Даже будущие выпуски HTML могут ввести новые элементы, которые используют различные атрибуты для представления состояния enabled / disabled; эти элементы не будут соответствовать [disabled] селектор атрибута.

на :disabled псевдо-класс отделяет селектор от документа, с которым вы работаете. Спецификация просто заявляет, что она нацелена на элементы, которые отключены, и что включен ли элемент, отключен или нет, является определен язык документа вместо:

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

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

С точки зрения DOM, I верьте установке disabled свойство элемента DOM также изменяет html-элемент disabled атрибут, что означает, что нет никакой разницы между любым селектором с манипуляцией DOM. Я не уверен, что это зависит от браузера, но вот скрипка что демонстрирует в последних версиях всех основных браузеров:

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

вы, скорее всего, будете стилизовать HTML, поэтому ничто из этого не может иметь для вас никакого значения, но если совместимость с браузером не является вопрос я бы выбрал :enabled и :disabled над :not([disabled]) и [disabled] просто потому, что псевдоклассы несут семантику, которой нет у селектора атрибутов. Я такой же пурист.

61

оказывается, что Internet Explorer 10 и 11 не распознают :disabled псевдокласс на некоторых элементах и отлично работает только с синтаксисом селектора атрибутов.

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>

код, обрезанный выше, отображается в IE следующим образом:

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

14