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

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

.myInput[disabled] { }

или

.myInput:disabled { }

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

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

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

2 ответа:

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

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

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

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

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

С помощью селектора атрибутов вы полагаетесь на знание того, что документ, который вы стилизуете, использует disabled атрибут для указания отключенных полей. Теоретически, если вы стилизовали что-то, что не было HTML, отключенные поля не могут быть представлены с помощью

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