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

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

.myInput[disabled] { }

или

.myInput:disabled { }

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

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

  • Атрибут
  • является более новым и лучшим
  • pseudo-class по-прежнему остается в пути
  • в зависимости от того, что вам больше нравится
  • есть техническая причина использовать один над другим

Ответы

Ответ 1

Является ли атрибут селектором современного CSS3-способа и способ продвижения вперед?

  • Атрибут
  • является более новым и лучшим

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

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

Да, в некоторой степени.

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

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

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

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

В терминах DOM я считаю, что установка свойства 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] просто потому, что псевдоклассы переносят семантику, которой нет в селекторе атрибутов. Я такой пурист.

Ответ 2

Оказывается, что 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>