В течение многих лет я использую что-то подобное в своем HTML для элементов, которые должны быть скрыты:
<div style="display: none"></div>
Это нормально, но я больше не могу стоять в строках.
Скрытие элементов программно в JavaScript window.onload событие слишком поздно - оно будет мигать на экране.
Я могу создать класс CSS скрытый, но с агрессивными стратегиями загрузки браузера (например, в Opera) блок может появиться на секунду (до загрузки CSS).
Есть ли лучший способ?
Насколько я знаю, метод class="hidden" является лучшим и наиболее часто используемым. Я предлагаю вам использовать class="hidden".
", но с агрессивными стратегиями загрузки браузера (например, в Opera) блок может появиться на секунду (до загрузки CSS).
Я не использую Opera, но если какой-либо браузер загрузил страницу перед применением стилей, то многие выглядели бы неправильно, а не только ваши скрытые элементы. Я не знаю ни одного браузера, делающего это.
Недавно я начал использовать объекты node, и мне этот подход все больше нравится. Таким образом, вам не нужно использовать скрытые элементы HTML, вы просто размещаете, например, якорь:
<a name="some-anchor" id="some-anchor-id" />
а затем замените его на созданный node. Таким образом вам не придется беспокоиться о элементах, мерцающих при загрузке, потому что их не будет.
В зависимости от того, что является элементом, может быть приемлемым создание и вставка элемента с помощью javascript после загрузки страницы (а не скрытия после загрузки страницы). Просто мысль, хотя она не будет деградировать изящно для пользователей без использования javascript...
Если у вас есть только HTML-страница, эти элементы будут отображаться?
Эти элементы отображаются по умолчанию для чтения с экрана, что не очень приятно или доступно?
Если у вас есть только HTML + CSS-страница, вы не можете отобразить эти элементы, тогда нет смысла в них, кроме трюков с трюками black hat.
Если у вас есть HTML + CSS + JS-страница, тогда есть значение в них.
Существует только значение, когда они имеют JS. Это означает, что они должны _exist в javascript
Используйте javascript для создания этих элементов и вставляйте их в DOM.
если вы создаете свой сайт с нуля, используя HTML, HTML + CSS, HTML + CSS + JS, тогда вы поймете, что они принадлежат вашему javascript-коду. Не стесняйтесь читать больше о Progressive Enhancement
Вы можете определить класс на странице. Он немного чище, чем встроенный, но вам нужно будет иметь это определение одного класса на всех страницах. Но опять же, я бы попытался использовать один динамический нижний колонтитул/заголовок в любом случае.
Вы можете добавить к скрытому стилю фиксированную позицию, которая выведет ее из окна браузера. Это может быть решением, чтобы избежать разблокировки div в Opera.
Например:
.super_hide{
position:fixed;
top:-1000px; /* you would need to know how height the content is or put something huge*/
}
Надеюсь, это поможет!