Html css скрыть элементы

Пять способов скрыть элемент с помощью CSS

От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.

Свойство opacity

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

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

Изучите Веб-вёрстку с нуля

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

Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.

При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.

Свойство visibility

Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.

Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.

В демо ниже показана разница между visibility и opacity:

Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.

А вот тег

внутри захватывает все события мыши. При наведении курсора мыши на текст блок станет видимым и начнем также обрабатывать события.

Свойство display

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

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

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

Откройте вкладку CSS в демо ниже:

В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.

Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.

Свойство position

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

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

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

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

Свойство clip-path

Еще один способ скрыть элемент – обрезать его. Раньше для этого было свойство clip. Оно устарело, и ему на смену появилось свойство clip-path.

Помните, что clip-path в демо ниже не полностью поддерживается в IE и Edge. Если использовать внешний SVG файл, поддержка становится еще более скудной (мы не стали использовать внешний файл). Для сокрытия элемента с помощью свойства clip-path используйте строку:

Источник

visibility

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a .

Try it

To both hide an element and remove it from the document layout, set the display property to none instead of using visibility .

Syntax

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

The visibility property is specified as one of the keyword values listed below.

Values

The element box is visible.

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible . The element cannot receive focus (such as when navigating through tab indexes).

The collapse keyword has different effects for different elements:

• For rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display : none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
• Collapsed flex items and ruby annotations are hidden, and the space they would have occupied is removed.
• For other elements, collapse is treated the same as hidden .

Accessibility concerns

Using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

Interpolation

When animated, visibility values are interpolated between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the easing function between 0 and 1 map to visible and other values of the easing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

Notes

• Support for visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
• visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.

Formal definition

Formal syntax

Источник

visibility

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

Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.

Пример

Скопировать ссылку «Пример» Скопировано

   
Эрнесту Хемингуэю приписывают авторство.
  
Многие писатели упражнялись в жанре сверхмалой прозы.
  
В этом жанре можно написать и автобиографию.
   article> p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство. p> p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы. p> p class="visibility-visible">В этом жанре можно написать и автобиографию. p> article>    Скопировать Скопировано Не удалось скопировать   

 .visibility-hidden  visibility: hidden;> .visibility-hidden  visibility: hidden; >    Скопировать Скопировано Не удалось скопировать   

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У свойства visibility всего два используемых значения:

• visible — значение по умолчанию, элемент видим.
• hidden — элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.

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

Ещё есть устаревшее значение collapse , которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden .

Так же можно применять в качестве значения стандартные ключевые слова: inherit , initial и unset .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство нельзя анимировать при помощи transform 😒

💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.

На практике

Скопировать ссылку «На практике» Скопировано

Дмитрий Семиградский советует

Скопировать ссылку «Дмитрий Семиградский советует» Скопировано

🛠 Важная особенность свойства, что оно, в отличие от display : none или opacity : 0 , не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility : visible будет видно. Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой.

В примере ниже представьте, что блок в рамке сгенерирован сторонней библиотекой.

Нажмите на кнопку «Кастомизировать». Для блока будет указано visibility : hidden . Весь блок будет скрыт. Для элементов, которые хотим оставить видимыми, добавляем visibility : visible .

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition :

 .parent  padding: 15px; border: 1px solid currentColor;> .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms;> .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;> .parent  padding: 15px; border: 1px solid currentColor; > .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; > .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; >    Скопировать Скопировано Не удалось скопировать   

   
Я простой текст. Наводишь курсор и я показываюсь  div class="parent"> div class="block">Я простой текст. Наводишь курсор и я показываюсьdiv> div>    Скопировать Скопировано Не удалось скопировать   

Источник