Должен ли я использовать CSS:disabled псевдокласс или [disabled] селектор атрибутов или это вопрос мнения?
Я пытаюсь создать стиль отключенного ввода. Я могу использовать:
.myInput[disabled] { }
или
.myInput:disabled { }
является ли селектор атрибутов современным способом CSS3 и способом продвижения вперед? Я использовал псевдокласс, но я не могу найти никакой информации о том, являются ли они старым способом и не будут поддерживаться или они оба равны, и вы можете использовать все, что вам больше нравится.
мне не нужно поддерживать старые браузеры (это приложение интрасети), поэтому это:
- атрибут новее и лучше
- псевдо-класс по-прежнему путь
- как вам больше нравится
- есть техническая причина использовать один над другим
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]
просто потому, что псевдоклассы несут семантику, которой нет у селектора атрибутов. Я такой же пурист.
оказывается, что 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
элементы, вы должны быть в порядке в любом случае. Все-таки это хороший совет, чтобы проверить конечный результат во всех браузерах, которые вы хотите поддержка.