CSS: Как скрыть элемент HTML

Приватность

Блочные и строчные элементы

Большинство элементов в CSS классифицируются как блочные или встроенные, и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.

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

Свойство Show CSS позволяет переопределить тип элемента по умолчанию. Что, в свою очередь, позволит вам изменить тип элемента со встроенного на блочный или с блочного на встроенный по мере необходимости.

Строчные элементы

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

  • игнорировать верхний и нижний отступы, если они применяются
  • игнорировать свойства высоты и ширины
  • можно настроить с помощью свойства vertical-align

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

Блочные элементы

Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если для элемента не задана ширина. Кроме того, блокирующие элементы:

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

Строчно-блочные элементы

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

Примечание. Значение встроенного блока не поддерживается в IE7 и более ранних версиях.

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

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

  • дисплей: нет; — дать указание браузеру скрыть элемент, удалив его из общего потока элементов. В этом случае элемент после скрытого элемента будет перемещен вверх и займет место скрытого элемента.
  • видимость: скрытая; — указание браузеру скрыть элемент, зарезервировав для него место на веб-странице. В этом случае браузер просто скрывает элемент, не удаляя его из публичного потока, поэтому скрытый элемент будет заменен пустым пространством, соответствующим размеру скрытого элемента.

Способ #1 opacity и filter: opacity()

Свойства opacity: N и filter: opacity(N) могут принимать значения от 0 до 1 (или от 0% до 100%), где 0 — полная прозрачность элемента, а 1 — его полная непрозрачность.

Посмотрите, как скрытие пера с непрозрачностью: 0 от SitePoint (@SitePoint) на CodePen.

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

Свойство opacity можно анимировать — и это очень хороший подход с точки зрения производительности.

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

Поддержка браузера Хороший. В IE свойство opacity поддерживает только значения от 0 до 1
Доступность скрытых предметов При значении 0 или 0% содержимое элемента недоступно
Вызывает изменение макета Нет
Рендеринг Состав
Производительность Хорошо, аппаратное ускорение можно использовать
Покадровая анимация Возможный
Инициирует события на скрытом элементе Да

Способ #2 alpha-канал

Свойство opacity влияет на весь элемент, но вы также можете изменить видимость отдельных свойств: color (цвет), background (цвет фона) или border (цвет границы). Чтобы скрыть их, используйте цвет rgba (или hsla) и установите альфа-значение равным нулю, например rgba(0, 0, 0, 0).

Посмотрите, как скрывается ручка с альфа-цветом от SitePoint (@SitePoint) на CodePen.

Каждое свойство можно индивидуально анимировать для создания интересных эффектов.

Этот метод нельзя применять к фоновым изображениям (кроме созданных с помощью градиентов CSS).

Способы управления альфа-каналом:

  • Прозрачное ключевое слово. Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
  • rgba(r, g, b, a): красный, зеленый, синий и альфа-канал.
  • hsla(h, s, l, a): оттенок, насыщенность, яркость и альфа-канал.
  • Шестнадцатеричный формат: #RRGGBBAA или #RGBA
Поддержка браузера Хороший. IE поддерживает только ключевое слово Transparent и формат rgba.
Доступность скрытых предметов Контент остается доступным
Вызывает изменение макета Нет
Рендеринг Рисование
Производительность Хорошо, но медленнее, чем непрозрачность
Покадровая анимация Возможный
Инициирует события на скрытом элементе Да

Способ #3 transform

Свойство преобразования позволяет перемещать (перемещать), масштабировать (масштабировать), вращать (вращать) или искажать (искажать) элемент. Это также позволяет вам скрыть это. Например, вы можете радикально уменьшить масштаб (масштаб (0)) или переместить блок за пределы области просмотра (перевести (-999px, 0px)).

Наблюдайте, как перо прячется с помощью transform: scale(0); от SitePoint (@SitePoint) на CodePen.

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

Поддержка браузера Хороший
Доступность скрытых предметов Контент остается доступным
Вызывает изменение макета Нет, исходные размеры блока сохранены
Рендеринг Состав
Производительность Хорошо, аппаратное ускорение можно использовать
Покадровая анимация Возможный
Инициирует события на скрытом элементе Нет

Читайте также: Как сохранить фото из ВК на компьютер и телефон

Способ #4 clip-path

Свойство clip-path определяет область отсечения — часть блока, которая будет видна на странице. Если эта область равна 0 пикселей, элемент будет скрыт: clip-path: circle(0).

См скрытие пера с обтравочным контуром от SitePoint (@SitePoint) на CodePen.

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

Поддержка браузера Только современные браузеры
Доступность скрытых предметов Контент остается доступным для некоторых приложений
Вызывает изменение макета Нет, исходные размеры блока сохранены
Рендеринг Краска
Производительность Допустимый
Покадровая анимация Доступно в современных браузерах
Инициирует события на скрытом элементе Нет

Способ #5 visibility

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

Наблюдайте, как перо скрывает с видимостью: скрыто SitePoint (@SitePoint) на CodePen.

Пространство, занимаемое элементом, остается на странице (кроме слияния).

Поддержка браузера Отличный
Доступность скрытых предметов Содержимое элемента недоступно
Вызывает изменение макета Нет (кроме коллапса)
Рендеринг Состав (без коллапса)
Производительность Хороший
Покадровая анимация Невозможный
Инициирует события на скрытом элементе Нет

Способ #6 display

display, пожалуй, самое популярное свойство для скрытия элементов на странице. Значение None удаляет блок, как если бы он никогда не существовал в DOM.

См скрытие пера с отображением: нет от SitePoint (@SitePoint) на CodePen.

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

Кроме того, свойство display может принимать множество значений (block, inline, flex, grid, table,…). Если вы сбросите его до нуля, может быть сложно вернуть правильное отображение позже (отключение может помочь).

Поддержка браузера Отличный
Доступность скрытых предметов Содержимое элемента недоступно
Вызывает изменение макета Да
Рендеринг Настраивать
Производительность Плохой
Покадровая анимация Невозможный
Инициирует события на скрытом элементе Нет

Способ #7. Атрибут hidden

Скрытый атрибут HTML можно добавить к любому элементу:

Скрытый контент

К нему будут применены стили браузера по умолчанию:

скрыто {отображение: нет; }

Этот прием имеет те же преимущества и недостатки, что и предыдущий, но его удобно использовать в различных CMS, где нет возможности влиять на стиль контента (но можно редактировать HTML-код).

Способ #8. Абсолютное позиционирование

Свойство position позволяет перемещать элемент из его исходного (статического) положения в общем потоке документа, используя свойства top, bottom, left и right. Абсолютно позиционированный элемент (position: absolute) можно переместить за пределы области просмотра, например, установив свойство left: -999px (значение может быть другим).

Наблюдайте за скрытием пера с position: absolute от SitePoint (@SitePoint) на CodePen.

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

Способ #9. Перекрытие другим элементом

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

Посмотрите, как ручка прячется с наложением SitePoint (@SitePoint) на CodePen.

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

Поддержка браузера Отличный
Доступность скрытых предметов Содержимое элемента остается доступным
Вызывает изменение макета Нет, если используется абсолютное позиционирование
Рендеринг Краска
Производительность Хорошо при правильном использовании
Покадровая анимация Возможный
Инициирует события на скрытом элементе Да, если псевдоэлемент или дочерний блок используется для перекрытия

Способ #10. Уменьшение размеров

Элемент можно скрыть, уменьшив его размер с помощью свойств width, height, padding, border-width и/или font-size. При желании вы также можете использовать свойство overflow: hidden, чтобы избежать переполнения уменьшенного элемента содержимым.

См скрытие пера с шириной или высотой SitePoint (@SitePoint) на CodePen.

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

Поддержка браузера Отличный
Доступность скрытых предметов Содержимое элемента остается доступным
Вызывает изменение макета Да
Рендеринг Настраивать
Производительность Плохой
Покадровая анимация Возможный
Инициирует события на скрытом элементе Нет

Выбор техники

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

 

Оцените статью
Блог про Вконтакте
Adblock
detector