Css hidden display: CSS Layout — width and max-width

Leave a Comment / Css / By /

visibility ⚡️ HTML и CSS с примерами кода

Свойство visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон.

При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Демо

Блоки
  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-trim
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • overflow
  • overflow-x
  • overflow-y
  • visibility

Синтаксис

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Значения

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

Примечание

  • Internet Explorer до версии 7.0 включительно не поддерживает значение
    collapse    .
  • Браузер Safari до версии 4.0 не поддерживает значение collapse.
  • Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Значение по-умолчанию: visible

Применяется ко всем элементам

Спецификации

  • CSS Basic Box Model
  • CSS Level 2 (Revision 1)

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>visibility</title>
    <style>
      . button {
        background: #fc0;
        padding: 10px 20px;
        display: inline-block;
      }
      .descr {
        visibility: hidden;
      }
      .button:hover + .descr {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <div>Кнопка</div>
    <p>
      Данная эксклюзия является подмножеством
      астрациональных супремативных монотенных федоний
      кадонарного экстрафазория.
    </p>
  </body>
</html>

.hidden — JavaScript — Дока

  1. Кратко
  2. Как пишется
  3. Как понять

Кратко

Скопировано

Свойство hidden позволяет узнать значение HTML-атрибута hidden или изменить его. Когда hidden равен true, элемент скрыт на странице и недоступен для скринридеров.

Как пишется

Скопировано

Обращение к свойству hidden вернёт текущее значение HTML-атрибута hidden. Если атрибута нет на элементе, результат будет false:

<input type="text" placeholder="Введите почту"><div hidden>Неправильная почта</div>
          <input type="text" placeholder="Введите почту">
<div hidden>Неправильная почта</div>

const input = document.querySelector('input')const div = document.querySelector('div')console.log(input.hidden)// falseconsole.log(div.hidden)// true
          const input = document.querySelector('input')
const div = document.querySelector('div')
console.log(input.hidden)
// false
console.log(div.hidden)
// true

Присвоение значения в hidden изменит значение атрибута. В зависимости от значения элемент скроется или появится. Скроем поле ввода из примера выше:

input.hidden = true
          input.hidden = true

В результате у поля ввода появится атрибут hidden и элемент скроется:

<input type="email" placeholder="email@example. com" hidden>
          <input type="email" placeholder="[email protected]" hidden>

Если присвоить false то атрибут будет удалён с элемента, а сам элемент снова станет видимым:

input.hidden = false
          input.hidden = false

Как понять

Скопировано

HTML-атрибут hidden существует давно и работает так же как display: none. Когда атрибут активен, элемент будет не только визуально скрыт, но и не будет занимать место на странице. То есть скрытый элемент будет вести себя так, будто его совсем нет.

Скрывать элементы через display можно в CSS или с помощью свойства style, но атрибутом hidden удобно управлять из JavaScript.

❗️

Приоритет CSS-свойства display выше, чем у атрибута hidden. Если на элементе одновременно установлен атрибут hidden и display: block, то элемент будет виден.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.textContent

ctrl + alt + ←

→

Событийная модель

ctrl + alt + →

css — Есть ли противоположность display:none?

Вот ответ из будущего… примерно через 8 лет после того, как вы задали вопрос. Пока нет противоположного значения для дисплея

: none , читайте дальше… Есть кое-что еще лучше.

Свойство display настолько перегружено, что это не смешно. У него как минимум три разные функции. Он управляет:

  • внешним типом отображения (как элемент участвует в макете родительского потока, например, блок , встроенный )
  • внутренний тип отображения (макет дочерних элементов, например flex , grid )
    • Поле отображения
  • (отображается ли элемент вообще, например, содержимое , нет ).

Это было реальностью так долго, что мы научились с этим жить, но некоторые долгожданные улучшения (надеюсь!) уже появились.

Firefox теперь поддерживает синтаксис с двумя значениями (или значения с несколькими ключевыми словами) для дисплея

свойство, которое разделяет внешний и внутренний типы отображения. Например, block теперь становится block flow , а flex становится block flex . Это не решает проблему none , но явное разделение задач, я думаю, является шагом в правильном направлении.

Тем временем Chromium (85+) дал нам свойство content-visibility и анонсировал его с некоторой помпой. Он направлен на решение другой проблемы — ускорение времени загрузки страницы за счет того, что элемент (и его дочерние макеты) не отображается до тех пор, пока он не приблизится к области просмотра и его действительно нужно увидеть, но при этом будет доступен для поиска «Найти» и т. д. Он действительно это автоматически, просто присвоив ему значение авто . Это захватывающая новость сама по себе, но посмотрите, что еще она делает…

Свойство content-visibility: hidden дает вам все то же самое. преимущества неотрендеренного контента и кешированного состояния рендеринга content-visibility: auto делает вне экрана. Однако, в отличие от auto , он не начинает автоматически отображаться на экране.

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

Сравните его с другими распространенными способами скрытия содержимого элемента:

  • display: none : скрывает элемент и разрушает его состояние рендеринга. Это означает, что отобразить элемент так же дорого, как отобразить новый. элемент с тем же содержимым.
  • видимость: скрыто : скрывает элемент и сохраняет его состояние рендеринга. Это на самом деле не удаляет элемент из документа, так как он (и его поддерево) по-прежнему занимает геометрическое место на странице и может по-прежнему будет нажиматься. Он также обновляет состояние рендеринга каждый раз, когда он нужен даже тогда, когда он скрыт.

content-visibility: hidden , с другой hand, скрывает элемент, сохраняя его состояние рендеринга, поэтому, если какие-либо изменения, которые должны произойти, они происходят только тогда, когда элемент отображается снова (т. е. свойство content-visibility: hidden удален).

Вау. Так что это своего рода то, чем display: none не должно было быть всегда — способ удаления элемента из макета, изящно и совершенно независимо от типа отображения! Итак, «противоположность» content-visibility: hidden равно content-visibility: visible , но у вас есть третья, очень полезная опция в auto , которая выполняет отложенный рендеринг для вас, ускоряя начальную загрузку страницы.

Единственная плохая новость заключается в том, что Firefox и Safari еще не приняли его. Но кто знает, к тому времени, когда вы (уважаемый коллега-разработчик) читаете это, все может измениться. Следите за https://caniuse.com/css-content-visibility!

видимость содержимого | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство content-visibility в CSS указывает браузеру, следует ли отображать содержимое элемента во время первоначальной загрузки. Итак, когда браузер начинает загружать контент и воспроизводит его на экране, это свойство позволяет нам вмешаться и указать браузеру , а не , загружать содержимое элемента, пока оно не понадобится. Подумай об этом вроде похож на ленивую загрузку в том смысле, что дочерние элементы закадрового элемента не отображаются, пока они не войдут в окно просмотра.

 . элемент {
  видимость содержимого: скрыто;
}

Основным моментом использования content-visibility является производительность. Это может помочь ускорить загрузку страницы, потому что браузер может откладывать рендеринг элементов, которые не находятся в области просмотра пользователя, до тех пор, пока пользователь не прокрутит их. Результаты могут быть драматичными. Вот результаты теста производительности, составленного Уной Кравец и Владимиром Левином, который показывает разницу между content-visibility можно сделать на типичной веб-странице.

Источник: web.dev

Синтаксис 

 видимость содержимого: [видимый | авто | скрытый];
  • Исходное значение: visible
  • Применяется к: элементам, для которых может применяться включение компоновки
  • Тип анимации: не анимируется

Значения

Свойство content-visibility принимает одно из трех значений:

  • hidden : Элемент игнорирует свое содержимое (аналогично применению display: none; к содержимому).
  • visible : Эффект отсутствует, элемент отображается как обычно.
  • auto : Элемент имеет макет, стиль и содержание краски. Браузер должен определить, имеет ли этот контент отношение к пользователю, и, если это не так, браузер пропустит его. В то же время элемент по-прежнему доступен для фокусировки, выбора и доступа к таким вещам, как вкладки и поиск на странице.

видимость содержимого: скрыто;

Я уже упоминал выше, что-то вроде отображения : нет; , потому что элемент вообще не прорисовывается на странице.

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

В примечании к спецификации ясно указывается доступность скрытого значения :

Пропущенное содержимое не должно быть доступно для функций пользовательского агента, таких как поиск на странице, навигация по табуляции и т. д. , а также не может быть выбран или сфокусирован.

видимость содержимого: авто;

Вы можете думать об этом как о ленивой загрузке для целых частей DOM.

Если элемент находится ниже сгиба и имеет видимость содержимого : auto; , браузер не рассматривает его содержимое. Следовательно, рендеринг для этого элемента пропускается. Когда пользователь прокручивает элемент, браузер рисует его содержимое, и рендеринг для пользователя выполняется достаточно быстро. Эвристика того, когда браузер решает отобразить, неясна и, вероятно, остается на усмотрение браузера.

Проблемы доступности

Будьте осторожны при использовании content-visibility: hidden . Это не только говорит браузеру пропустить элемент из рендеринга при начальной загрузке страницы, но также удаляет элемент из чтения вспомогательными технологиями, такими как программы чтения с экрана.

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

Однако auto также указывало, что элемент по-прежнему должен быть доступен пользователю , а не полностью игнорировать элемент в DOM. Это означает, что элемент и его содержимое должны быть доступны для фокусировки, выбора, вкладок и поиска с помощью функции поиска на странице браузера. Опять же, спецификация очень ясна в этом отношении:

В отличие от hidden , пропущенное содержимое должно по-прежнему быть доступным, как обычно, для функций пользовательского агента, таких как поиск на странице, навигация по порядку вкладок и т. д., и должно быть доступно для фокусировки и выбора, как обычно.

Кроме того, к элементам вне экрана, которые были скрыты с помощью CSS (например, display: none; ), должно быть применено aria-hidden="true" , так как браузер не отобразил их. Таким образом, они все еще присутствуют в дереве доступности.

Проблемы с UX

Вы можете себе представить, что если большие фрагменты веб-страницы не отображаются, длина полосы прокрутки может указывать на то, что на странице гораздо меньше содержимого, чем на самом деле. Алекс Рассел говорит (и предлагает) решения для этого в своем посте «Контент-видимость без дрожащих полос прокрутки».

Производительность

Опять же, это свойство связано с покупкой производительности. Результаты могут быть значительными. Посмотрите это видео с Джейком Арчибальдом и Сурмой, где они внедряют его и видят большие изменения:

Свойство

contains-intrinsic-size

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

content-visibility: auto; при применении к элементу обрабатывает элемент так, как если бы он имел высоту 0 (при условии, что свойство height не было задано явно). Когда пользователь прокручивает и элемент появляется в поле зрения (и браузер начинает его рисовать), вычисляется фактическая высота, и это вызывает сдвиг макета на странице. Прокрутка также может сделать веб-страницу немного дерганой — что-то известное как Cumulative Layout Shift (CLS), который считается важным для поисковой оптимизации, поскольку Google теперь включает его в свои показатели Core Web Vitals для измерения производительности сайта.

Решение для больших сдвигов макета состоит в паре content-visibility: auto; с contains-intrinsic-size , что дает браузеру предсказуемую высоту для использования в качестве заполнителя для элемента при его рисовании.

 .off-screen-parent {
  видимость содержимого: авто;
  содержит внутренний размер: 4800px; /* Догадка на высоте */
}

contains-intrinsic-size выступает в качестве заполнителя для еще не обработанного контента. Тем самым ограничивая проблемы с прокруткой и сменой макета. Поэтому, если вы знаете точную высоту, вы можете использовать ее в качестве значения. Если нет, сделайте оценку. Если во время рендеринга раздела высота, которую вы установили, не является фактической высотой, то будет небольшой сдвиг макета, но он не будет таким выраженным, как без свойства , содержащего внутренний размер .

Демо

Я создал простой веб-сайт с фиктивным текстом и 185 изображениями.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *