Как скрыть блок css

Cкрытие элементов в CSS

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

Свойство visibility со значением hidden также скрывает элемент, но область ранее им занимаемая остается за ним: другие элементы не могут там располагаться. Значение collapse свойства visibility служит для скрытия элементов таблиц.

Свойства display и visibility применимы ко всем элементам.

Применение свойств display и visibility

<p> <img src= "../img/peng_64.gif" > Скроем пингвина разными методами. </p>
<p> <img src= "../img/peng_64.gif" style=" display : none ; "> Пингвин скрыт и его место занял текст. </p>
<p> <img src= "../img/peng_64.gif" style=" visibility : hidden ; "> Пингвин скрыт, но область, ранее им занимаемая, осталась за ним. </p>

Прозрачность элемента

Свойство opacity предназначено для указания степени прозрачности элемента. Свойство принимает значение от 0 до 1 .

1 — это значение по умолчанию, ему соответствует нормальному отображению элемента — он непрозрачен.

Соответственно при значении 0 — элемент становится невидим — он прозрачен. Вот таким способом можно скрыть элемент.

Свойство применимо ко всем элементам

<p> Полупрозрачный пингвин! <img src= "img/peng_128.gif" style=" opacity : 0.5 ; "> </p>

Полупрозрачный пингвин! Прозрачность элемента

Скрытая и видимая области

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

Необходимая (видимая) часть элемента определяется заданием координат с помощью ключевых слов top , right , bottom и left , которые указывают расстояния от краев элемента до границ видимой области.

Форма видимой области — это всегда прямоугольник.

За пределами блока

Свойство overflow используется в тех случаях, когда содержимое блока превышает его размеры.

Свойство применимо к блочным элементам.

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

При значении hidden свойства overflow будет отображена та часть содержимого, которая вместится в границы блока. Соответственно оставшаяся часть будет скрыта.

Также, при превышении габаритами контента размеров блока, можно воспользоваться полосами прокрутки: при значении scroll свойства overflow они будут присутствовать всегда, а при значении auto будут добавлены при необходимости.

<p style="border : #FF3300 solid 2px ; width : 100px ; ">
<img src= "img/peng_128.gif" >
</p>

Пингвин превышает ширину блока, поэтому выходит за его границу.

Применение свойства overflow

В следующем примере воспользуемся свойством overflow со значениями hidden и auto .

<p style="border : #FF3300 solid 2px ; width : 100px ; overflow : hidden ; ">
<img src= "img/peng_128.gif" >
</p>
<p style="border : #FF3300 solid 2px ; width : 100px ; overflow : auto ; ">
<img src= "img/peng_128.gif" >
</p>

Курсор

Свойство cursor ничего не скрывает. Однако оно дает возможность изменить вид (тип) курсора при наведении мыши на элемент.

То есть (если можно так сказать) текущий курсор будет скрыт, а заданный появится.

Свойство применимо ко всем элементам.

Пингвина в примере скорее всего занимает какой-то вопрос. О чем он думает? Я хочу задать для пингвина курсор в виде стрелки со знаком вопроса, воспользовавшись свойством cursor со значением help .

<p style="border : #FF3300 solid 2px ; width : 150px ; cursor : help ; ">
<img src= "img/peng_128.gif" >
</p>

Скрытие покажет: html и css как инструменты отображения контента

Скрытие покажет: html и css как инструменты отображения контента

Некоторые элементы страницы необходимо скрывать. Это происходит по разным причинам, однако в особенности скрытие актуально для адаптации веб-ресурса к разным платформам: ПК и мобильным устройствам.

При этом скрытые элементы могут быть не в одном состоянии. Вариантов 3: элемент может быть невидим полностью и, вообще, удалён из потока документов; элемент может быть невидим для пользователя, однако он будет находиться в документе и ассистивные технологии смогут его считать; элемент будет открыт для пользователя, но ассистивные технологии не смогут его считывать.

Всё это можно сделать посредством HTML (язык разметки) и CSS (язык описания внешнего вида документа, в случае данной статьи — страницы) прямо в админке.

Атрибут hidden (убираем полностью)

Скрывает элементы при условии, что их видимость не включена вручную посредством CSS. Вообще, если говорить о последнем, атрибут Hidden работает аналогично CSS-«способу» display: none;

Предположим, какой-то большой заголовок на веб-странице должен отображаться только тогда, когда ширина области отображения элемента больше 500 пкс. В таком случае в HTML пишем:
<h1 hidden>Большой заголовок</h1>

CSS:
@media (min-width: 500px) <
h1 <
display: none;
>
#hidden <
display: block;
>
>

Теперь по поводу display (априори это свойство есть у всего, что прописано коде страницы), после того, как вы укажете его значение как none: невидимыми станут и все потомки выбранного элемента. При этом место скрываемого займёт другой, следующий за ним по цепочке.

Атрибут aria-hidden (убираем частично)

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

Прописывается в HTML следующим образом:
<span какой-нибудь строчной элемент документа&#187; aria-hidden=&#187;true»></span>

Чаще всего данный атрибут применяют, чтобы спрятать от программ считывания дублируемый текст, свёрнутые или перемещённые «за экран» элементы, а также чтобы убрать декоративную графику. При этом действие скрытие распространяется только на программы, не на пользователей ресурса.

Свойство opacity (убираем, но не заметаем следы)

Со значением 0 прячет от пользователя (но только от него) элемент со всеми вложениями. При этом на странице вместо скрытого элемента образуется пробел. Данное свойство ненаследуемое.

CSS:
h1 <
opacity: 0;
>

Свойство visibility (убираем выборочно 2)

Аналог предыдущего. На странице так же остаётся пробел, однако на поток данное изменение не влияет. Здесь важно помнить, если данное свойство применяется к родительскому элементу, то скрыты будут и все потомственные. Чтобы избежать этого для конкретного случая, пропишите тому, что необходимо оставить, visibility: visible.

CSS:
article <
visibility: hidden;
>

img <
visibility: visible;
>

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

Позиционирование в слепой зоне (убираем, но не очень тщательно)

Спрятать элемент можно, переписав его позицию. Иными словами, поместив необходимую часть наполнения страницы за пределы её видимости или исправив значения размера на 0.

CSS:
img <
position: right;
top: -100%;
>

Указанное будет перенесено из области видимости на новое прописанное значение, таким образом он будет скрыт из поля зрения пользователя. Однако если последний использует клавиатуру и доберётся до элемента, последний станет видим.

CSS:
img <
position: right;
top: 0;
>

Свойство clip-path (убираем оригинально)

Скрывает элемент частично. Для определения точных значений, рекомендуется пользоваться программой clippy . Он значительно ускорит и упростит вашу работу.

CSS:
img <
clip-path: inset(0 0, 0 0, 0 0, 0 0);
>

В данном случае 0 — это значение, при котором кусок элемента не будет видим для пользователя. В clippy вы определяете нужные значения (они будут написаны внизу экрана цветным шрифтом), которые затем копируете из программы и вставляете в CSS вашей страницы. Так же данный инструмент позволяет менять форму объекта (прописывается в коде вместо inset). Например, круг (circle), треугольник (triangle) и т. д.

И ещё кое-что

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

CSS:
.button span <
color: transparent;
font-size: 0;
>

Таким образом исчезнет только надпись (сама кнопка останется) и лишь визуально (технически текст будет находиться на странице).

Скрытие элементов в вебе

Благодаря нашей работе веб-разработчиков нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном окне просмотра и скрыта в окне просмотра в декстопе. Или элемент навигации, который скрыт на мобильном устройстве и отображается в десктопе. При скрытии элемента существует три разных состояния:

  1. Элемент полностью скрыт и удален из потока документа.
  2. Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.
  3. Элемент видим, но скрыт только для программ чтения с экрана.

В этой статье мы узнаем о сокрытии элементов в HTML и CSS и рассмотрении аспектов доступности, анимации и вариантов использования для сокрытия.

HTML5 атрибут hidden

Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden , если они не были переопределены вручную из CSS. Это похоже на эффект от применения display: none .

Рассмотрим следующий пример.

У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px . Я добавил атрибут hidden к элементу img .

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

И, вы можете быть удивлены, почему бы не использовать display: none ? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden , мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.

Значения доступности для hidden

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

CSS свойство display

Каждый элемент имеет значение дисплея по умолчанию, как inline-block , block , table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none . Когда элемент скрыт display: none , все его потомки будут удалены вместе с ним.

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

Это полностью скрывает изображение от потока документов и от программ чтения с экрана. Может быть, вам интересно, что такое документооборот? Смотрите рисунок ниже:

Обратите внимание, когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было сохранено для этого, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и оно меняет поток документов или, в нашем примере, стек книг.

Вот анимация, показывающая, что происходит при удалении книги:

Загружаются ли ресурсы, если они были скрыты с помощью CSS?

Да, это короткий ответ. Например, если скрыть тег img с помощью CSS, и мы показываем его в определенной точке останова, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

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

Мы вернемся к этому позже, чтобы объяснить, как уменьшить HTTP-запросы, когда они не нужны в определенной точке останова или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы со значением display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить его свойство отображения блока, чтобы он мог быть виден.

Это полезно, если вы хотите, чтобы блок стиля был всегда видимым и редактируемым. Его можно редактировать, добавив атрибут contenteditable=true в тег style .

Значение доступности для display: none

При использовании display: none он полностью скрывает элемент от программ чтения с экрана.

Opacity

Если установить непрозрачность 0 , элемент и все его потомки будут скрыты и не будут наследоваться. Однако он скрывает их только с визуальной точки зрения. Кроме того, элемент со значением непрозрачности, отличным от 1 , создаст новый контекст стека.

На рисунке выше синяя книга скрыта только визуально. Его пространство все еще зарезервировано для него, и порядок стеков не изменился по сравнению с тем, что произошло, когда мы использовали display: none .

Исходя из нашего первоначального примера, если мы хотим скрыть изображение с непрозрачностью, результат будет выглядеть следующим образом:

Изображение все еще там, и его место зарезервировано. Оно скрыто только с визуальной точки зрения.

Душан Милованович отметил, что pointer-events: none | auto может использоваться для отключения событий мыши на элементах, скрытых с помощью opacity: 0 . Это важно, поскольку пользователю может быть неудобно щелкать, наводить курсор или выбирать текст скрытого элемента.

Значение доступности для opacity: 0

Элемент, скрытый с помощью opacity: 0 , будет по-прежнему доступен для программ чтения с экрана и может быть сфокусирован с помощью клавиатуры.

Visibility

Используя visibility: hidden , мы можем показать или скрыть элементы, аналогичные используемым opacity: 0 , не влияя на визуальный поток документа.

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

Однако, когда используется visibility: hidden к родительскому элементу, все скрыто, но когда к дочернему элементу этого родителя применен visibility: visible , этот дочерний элемент будет показан.

В приведенном выше примере элемент article имеет visibility: hidden . Однако добавление visibility: visible к изображению сделало его видимым. Опять же, это потому, что видимость применяется к потомкам элемента, но она может быть переопределена дочерним элементом с этим элементом.

Значения доступности для visibility: hidden

Элемент скрыт, и его потомки будут удалены из дерева доступности, и программа чтения с экрана не сообщит об этом.

Позиционирование

Чтобы скрыть элемент со свойством position , мы должны переместить его за пределы экрана и установить его размер равным нулю (ширина и высота). Примером этого является ссылка skip navigation. Рассмотрим следующий рисунок:

Чтобы разместить ссылку вне экрана, мы должны добавить следующее:

Значение -100% будет выдвигать элемент на 100% от высоты области просмотра. В результате он будет полностью скрыт. Как только он сфокусирован на клавиатуре, его можно отобразить так:

Значения доступности для position: absolute | fixed

Элемент доступен для программ чтения с экрана и фокусируется на клавиатуре. Это скрыто только визуально из области просмотра.

Clip Path

Когда для элемента используется clip-path , он создает область отсечения, которая определяет, какие части должны быть показаны и скрыты.

В приведенном выше примере прозрачная черная область имеет clip-path . Когда clip-path применяется к элементу, ничего под прозрачной черной областью не будет показано.

Чтобы продемонстрировать вышесказанное более наглядно, я буду использовать для этого инструмент Clippy. В GIF ниже у меня есть следующий clip-path:

Установка значений многоугольника 0 0 для каждого направления приведет к изменению размера области отсечения до нуля. В результате изображение не будет отображаться. Также это можно сделать с помощью круга вместо многоугольника:

Значения доступности для clip-path

Элемент скрыт только визуально. Это все еще доступно для программ чтения с экрана и клавиатуры.

Управление цветом и размером шрифта

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

Прозрачный цвет

Сделав цвет прозрачным для текста, он будет скрыт визуально. Это может быть полезно для кнопки с иконкой.

Размер шрифта

Также может быть полезно установить размер шрифта равным нулю, так как это будет скрывать текст визуально.

Рассмотрим следующий пример, где у нас есть кнопка со следующей структурой:

Наша цель — скрыть текст доступным способом. Для этого я добавил следующий CSS:

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

Aria Hidden

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

В приведенном выше примере у нас есть кнопка меню с меткой и значком. Чтобы скрыть значок от программ чтения с экрана, добавлен aria-hidden .

Согласно Mozilla Developer Network (MDN) , ниже приведены варианты использования атрибута:

  1. Скрыть декоративный контент (иконки, изображения).
  2. Скрыть дублированный текст.
  3. Скрыть закадровый или свернутый контент.

Значения доступности для aria-hidden=&#34;true&#34;

Он предназначен для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Тем не менее, контент по-прежнему виден для зрячих пользователей и фокусируется на клавиатуре.

Анимация и интерактивность

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

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

Анимация меню — плохой пример

У нас есть меню, которое должно иметь анимацию скольжения или снятия холста, когда оно развернуто. Проще всего добавить в меню следующее:

С учетом вышеизложенного, меню будет расширяться и сворачиваться в зависимости от класса .active , который будет добавлен через JavaScript, как показано ниже.

Результат может показаться хорошим, но в нем есть большая ошибка. Использование opacity: 0 не скрывает навигацию от дерева доступности. Даже если навигация скрыта визуально, она по-прежнему фокусируется с клавиатуры и доступна для программ чтения с экрана. Он должен быть скрыт, чтобы не запутать пользователя.

Вот скриншот дерева доступности из DevTools Chrome:

Короче говоря, дерево доступности — это список всего, что может получить пользователь программы чтения с экрана. В нашем случае навигационный список существует, пока он визуально скрыт. Нам нужно решить две проблемы:

  1. Избегайте фокусировки с помощью клавиатуры, когда меню скрыто
  2. Избегайте объявления навигации с помощью программы чтения с экрана, когда она скрыта

На приведенном ниже снимке экрана показано, как VoiceOver в Mac OS видит страницу. Список навигации там пока скрыт визуально!

Анимация меню — хороший пример

Чтобы исправить эту ошибку, нам нужно использовать visibility: hidden для меню навигации. Это гарантирует, что меню скрыто визуально и для программ чтения с экрана.

Как только это добавлено, теперь меню скрыто от программ чтения с экрана. Давайте снова протестируем и посмотрим, что VoiceOver покажет:

Checkbox

Дизайн флажка по умолчанию сложно настроить, и в результате нам нужно создать собственный дизайн флажка. Давайте посмотрим на основной HTML:

Чтобы настроить флажок, нам нужно скрыть ввод доступным способом. Для этого наряду с другими свойствами следует использовать position . Существует общий класс CSS с именем sr-only или visually-hidden , который скрывает элемент только визуально и делает его доступным для пользователей клавиатуры и программы чтения с экрана.

Скрытие контента от программ чтения с экрана

В заголовке таблицы я добавил Emoji после элемента заголовка. Если это не скрыто должным образом, вот как программа чтения с экрана будет читать текст:

Поскольку к каждому Emoji прикреплено определенное описание, программа чтения с экрана попытается сообщить об этом. Теперь представьте, что вы просматриваете Интернет, и вдруг вы слышите этот заголовок! Это очень запутанно. Чтобы избежать такой путаницы для пользователя, следует использовать aria-hidden . Я оберну эмодзи в элемент span , а затем скрою его только для программ чтения с экрана.

Маленькая перемена, большая победа!

Сокрытие кнопок

В Твиттере есть кнопка с надписью «Смотреть новые твиты», которая скрыта для программ чтения с экрана с помощью aria-hidden и отображается только визуально, когда доступны новые твиты.

Скрытие декоративного контента

Точка между дескриптором пользователя и датой является декоративной. В результате следует избегать объявления «точки» для программ чтения с экрана с помощью aria-hidden="true" .

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

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