CSS-live.ru

Ещё четыре способа скрыть и показать элементы при помощи HTML и CSS

Перевод статьи Four More Ways To Hide & Show Elements with HTML and CSS с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:

<figure id="oymyakon">
<img src="nastya.jpeg" alt>
<figcaption>Nastya, photographed by Sean Archer</figcaption>
</figure> <p>Located deep in Siberia, the village of Oymyakon holds the title of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.
<p>From December to February, the weather in the tiny village (population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) registered in 1933. At those temperatures, a naked human left outside would freeze to death in under a minute…

CSS будет таким:

body {
color: #fff;
background: url(px.png) #333;
line-height: 1.4;
font-size: 1.1rem;
}
figure#oymyakon {
float: right; width: 50%;
font-size: 0;
}
figure#oymyakon img {
width: 100%; height: auto;
box-shadow: 0 0 12px rgba(0,0,0,.3);
}
figure#oymyakon figcaption {
text-align: center;
font-size: 1rem;
font-style: italic;
margin-top: 1rem;
}

В этой статье я применяю разные техники для скрытия элемента <figure>: можно протестировать эти методы в интерактивном примере в начале оригинальной статьи или перейдя по этой ссылке на CodePen.

Масштабирование элемента в 0

figure#oymyakon { transform: scale(0); }

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

Возврат значения scale в значение  1  заставит элемент появиться снова; этот переход также может быть анимирован.

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

HTML5-атрибут hidden

<figure id="oymyakon" hidden>

Хотя визуально он действует так же, как  display: none, этот элемент фиксирует состояние элемента

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

Атрибут hidden уже используется для таких HTML5-элементов, как details. В отличие от других описанных здесь методов, атрибут  hidden скрывает элемент от любых способов представления, включая печать, мобильные и скринридеры. Поддерживается всеми современными браузерами, за исключениями одного.

Минусы: Всё ещё не поддерживается в IE, хотя это легко решается в CSS при помощи селектора по атрибуту:

[hidden] { display: none; }

Нулевой height и overflow:hidden

figure#oymyakon { height: 0; overflow: hidden; }

Традиционное решение. Фактически «схлопывает» элемент по вертикали и делает его невидимым; работает при условии, что у элемента нет видимой границы. Стоит отметить, что некоторое пространство на странице для скрытого элемента, вероятно, будет «забронировано»: несмотря на то, что у элемента нет высоты, у него всё ещё есть ширина и, возможно, поле, которые могут продолжать влиять на макет страницы.

Минусы: Не применяется к строчным элементам. Значение height не может быть анимировано, хотя max-height может.

Фильтр размытия

figure#oymyakon { filter: blur(100px); }

Новейший подход, который вообще не будет работать в IE (по крайней мере на данный момент). И всё же  blur  – интересный вариант, который стоит рассмотреть на будущее.. Достаточное размытие делает элемент полностью невидимым, а при уменьшении значения blur до 0 элемент снова оказывается «в фокусе»

Соображения:

  • размытие небольшого текста работает лучше чем изображения
  • Размытые изображения могут  добавить оставшейся части страницы оттенок цвета, в зависимости от их относительного размера и значения blur .
  • Чем выше значение  blur, тем  больше требуется вычислительных циклов для его достижения; достаточно высокие значения могут существенно загрузить графический процессор, что делает эту технику нецелесообразной для мобильных устройств на данный момент.
  • Поддерживается только в последней версии Firefox (35 версия – прим. перев.) (хотя есть возможность использовать SVG в качестве запасного варианта)
  • Всё ещё требует браузерных префиксов для Chrome и Safari.
  • Как уже было указано, не будет работать ни в каких версиях IE.

С этими и другими методами, рассмотренными в прошлой статье, у вас есть полный набор инструментов для создания элементов, которые появляются и исчезают на странице. Важно понимать, что не существует единственной «правильной» или «лучшей» техники: бывает лишь наиболее подходящий инструмент для конкретной задачи. Это относится и к JavaScript, у которого есть собственные методы для добавления и удаления элементов в DOM.

P.S. Это тоже может быть интересно:

15 комментариев

    1. Этот вариант описан в упомянутом в первом абзаце «приквеле», наряду с display:none, opacity:0 и position:absolute с выносом за край экрана. Мы решили, что рассказать сразу о менее тривиальных вариантах будет интереснее:). 

      1. Согласен, люблю всякие ухищрения с CSS. Это как школьные задачки на смекалку.

        P.S Пардон за первый "кривой" комммент — описался и не исправить.

  1. А почаму отсутствует закрывающий тэг </p>?

    Это такой стиль? Или ещё чем-то обосновано?
     

    1. Это разрешенная всеми стандартами HTML, включая HTML5 (но не XHTML), возможность. И есть гайдлайн Гугла, рекомендующий пользоваться ей для минимизации трафика (правда, многие считают эту рекомендацию спорной и злоупотреблять ей всё-таки не стоит:).

  2. спасибо
    я тут не так давно пытался скрестить transition с :hover через display:none/block — не работало. Удалось сделать через изменение z-index.

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

  4. Полезный материал, а как убрать изображения при определенных разрешениях экрана в css. С этой адаптивностью, особенно на старых html голову сломаешь.

    1. Либо назначением правила через @media, либо можно попробовать через атрибут sizes у самих изображений. Последний способ, правда не очень-то поддерживается IE.

  5. Здравствуйте,скажите, нормально ли будет с помощью {display:none} спрятать блок, в который я вставил яндекс метрику? Будет ли в таком случае яндекс метрика корректно работать?

  6. Значение height не может быть анимировано

    С чего бы это? transition-duration прекрасно анимирует высоту.

    1. Полагаю, имелся в виду наиболее часто нужный и наиболее проблемный случай — плавная смена высоты между 0 и auto. Между двумя фиксированными значениями, да, анимируется без проблем, но фиксированная высота — довольно специфический случай.

  7. Скрыть часть контента с помощью этих методов это очень здорово. Но фактически браузер получит всю эту структуру и спрячет. То есть браузер тратит и трафик и ресурсы. А можно ли при разных разрешениях удалять или добавлять элементы в DOM и при этом не использовать javascript?  То есть я не говорю о динамичной странице. Только о разной разметке в зависимости от разрешения.

     

Оставить комментарий

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

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