Правильный способ визуализации изначально скрытых HTML-элементов

В течение многих лет я использую что-то подобное в своем HTML для элементов, которые должны быть скрыты:

<div style="display: none"></div>

Это нормально, но я больше не могу стоять в строках.

  • Скрытие элементов программно в JavaScript window.onload событие слишком поздно - оно будет мигать на экране.

  • Я могу создать класс CSS скрытый, но с агрессивными стратегиями загрузки браузера (например, в Opera) блок может появиться на секунду (до загрузки CSS).

Есть ли лучший способ?

Ответы

Ответ 1

Насколько я знаю, метод class="hidden" является лучшим и наиболее часто используемым. Я предлагаю вам использовать class="hidden".

", но с агрессивными стратегиями загрузки браузера (например, в Opera) блок может появиться на секунду (до загрузки CSS).

Я не использую Opera, но если какой-либо браузер загрузил страницу перед применением стилей, то многие выглядели бы неправильно, а не только ваши скрытые элементы. Я не знаю ни одного браузера, делающего это.

Ответ 2

Недавно я начал использовать объекты node, и мне этот подход все больше нравится. Таким образом, вам не нужно использовать скрытые элементы HTML, вы просто размещаете, например, якорь:

<a name="some-anchor" id="some-anchor-id" />

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

Ответ 3

В зависимости от того, что является элементом, может быть приемлемым создание и вставка элемента с помощью javascript после загрузки страницы (а не скрытия после загрузки страницы). Просто мысль, хотя она не будет деградировать изящно для пользователей без использования javascript...

Ответ 4

Если у вас есть только HTML-страница, эти элементы будут отображаться?

Эти элементы отображаются по умолчанию для чтения с экрана, что не очень приятно или доступно?

Если у вас есть только HTML + CSS-страница, вы не можете отобразить эти элементы, тогда нет смысла в них, кроме трюков с трюками black hat.

Если у вас есть HTML + CSS + JS-страница, тогда есть значение в них.

Существует только значение, когда они имеют JS. Это означает, что они должны _exist в javascript

Используйте javascript для создания этих элементов и вставляйте их в DOM.

если вы создаете свой сайт с нуля, используя HTML, HTML + CSS, HTML + CSS + JS, тогда вы поймете, что они принадлежат вашему javascript-коду. Не стесняйтесь читать больше о Progressive Enhancement

Ответ 5

Вы можете определить класс на странице. Он немного чище, чем встроенный, но вам нужно будет иметь это определение одного класса на всех страницах. Но опять же, я бы попытался использовать один динамический нижний колонтитул/заголовок в любом случае.

Ответ 6

Вы можете добавить к скрытому стилю фиксированную позицию, которая выведет ее из окна браузера. Это может быть решением, чтобы избежать разблокировки div в Opera.

Например:

.super_hide{
    position:fixed;
    top:-1000px; /* you would need to know how height the content is or put something huge*/
}

Надеюсь, это поможет!