В чем разница между скрытым атрибутом (HTML5) и правилом display: none (CSS)?

111

HTML5 имеет новый глобальный атрибут, hiddenкоторый можно использовать для скрытия содержимого.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

В CSS есть display:noneправило, которое также можно использовать для скрытия содержимого.

article { display:none; }

Визуально они идентичны. В чем разница семантически? Вычислительно?

Какие рекомендации мне следует учитывать при использовании того или другого?

TIA.

РЕДАКТИРОВАТЬ : Основываясь на ответах @ newtron (ниже), я больше искал. hiddenАтрибут был горячо оспаривается в прошлом году , и (видимо) едва пробился в HTML5 спецификации. Некоторые утверждали, что это было лишним и бесполезным. Насколько я могу судить, окончательная оценка такова: если я ориентируюсь только на веб-браузеры, разницы нет. (Одна страница даже утверждала, что веб-браузеры использовали display:noneдля реализации скрытого атрибута.) Но если я рассматриваю вопрос о доступности (например, возможно, я ожидаю, что мой контент будет прочитан программами чтения с экрана), тогда есть разница. Правило CSS display:noneможет скрывать мой контент от веб-браузеров, но соответствующее правило aria (например,aria-hidden="false") мог бы попытаться прочитать это. Таким образом, теперь я согласен с тем, что ответ @ newtron правильный, хотя, возможно (возможно), не так ясен, как мне хотелось бы. Спасибо @newtron за вашу помощь.

css html visibility

— james.garriss
источник

Даже не знал, что hiddenатрибут существует, но, безусловно, хороший вопрос, поскольку он, похоже, нарушает разделение структуры / представления.

— Waldheinz

Для тех, кто еще не имел удовольствия читать спецификацию HTML5 по этому атрибуту: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

w3.org/html/wg/wiki/ChangeProposals/removehidden

— Йигит Йенер

Прочтите это уже, @Yigit. Ему тоже больше года. И скрытые до сих пор в спецификации. Это указывало бы мне на то, что это предложение не привлекло ни одного новообращенного.

— james.garriss

Спасибо за редактирование. Извините, это было непонятно! Информация, которую вы добавили выше, великолепна. +1

— newtron

Ключевое отличие состоит в том, что hiddenэлементы всегда скрыты независимо от представления:

Атрибут hidden не должен использоваться для сокрытия содержимого, которое может законно отображаться в другой презентации. Например, неправильно использовать скрытые для скрытия панелей в диалоговом окне с вкладками, потому что интерфейс с вкладками - это просто своего рода презентация с переполнением - можно также просто показать все элементы управления формы на одной большой странице с полосой прокрутки. Точно так же неправильно использовать этот атрибут, чтобы скрыть контент только из одной презентации - если что-то помечено как скрытое, оно будет скрыто для всех презентаций, включая, например, программы чтения с экрана.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Поскольку CSS может нацеливаться на разные типы мультимедиа / презентации, display: noneэто будет зависеть от данной презентации. Например, некоторые элементы могут появиться display: noneпри просмотре в браузере настольного компьютера, но не в браузере мобильного устройства. Или быть скрытым визуально, но по-прежнему доступным для программы чтения с экрана.

— Ньютрон
источник

Так вы говорите, что скрытые козыри показывают? Если да, то вы говорите, что его цель - просто переопределить презентацию. Хммм.

— james.garriss

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

— newtron

Семантика побеждает. Если его там не должно быть, удалите его из потока документации на уровне документа. Если он должен быть частью потока документации, но в некоторых случаях вы не хотите, чтобы он был частью визуального опыта, обработайте его на косметическом уровне. Имейте в виду, что некоторые агенты пытаются анализировать CSS, и если они определяют, что что-то не будет ВИДЕТЬ, они вообще не выводят это. Я думаю, что это ненормальное поведение, но это может помочь узнать.

В связи с некоторыми комментариями здесь (@ james-garris, @newtron), согласно developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , отображение фактически скрывает преимущества - поймите :-)

— Jurko Gospodnetić 08

Одно важное отличие, которое я заметил на странице MDN для скрытого атрибута: «Изменение значения свойства отображения CSS для элемента со скрытым атрибутом переопределяет поведение. Например, элементы в стиле display: flex будут отображаться, несмотря на наличие скрытого атрибута».

— mohsinulhaq