Рубрики
Без рубрики

Как скрыть элементы веб -страницы

Краткое описание того, как правильно скрыть элементы HTML. Tagged с HTML, CSS, JavaScript, A11y.

Фотография обложки от Путешествие с Радж на Неспособный .

Введение

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

  • Успешная загрузка страницы.
  • JavaScript Files успешно загружены.
  • JavaScript включен.
  • Изменение ориентации устройства.

В какой бы ситуации вы ни находились, лучше всего скрыть элементы страницы с учетом доступности.

Как скрыть элементы страницы

В вашем наборе инструментов доступны несколько вариантов, когда речь идет о сокрытии элементов страницы. Некоторые включают:

  • Html стиль атрибут.
  • CSS дисплей имущество.
  • CSS позиция имущество.
  • Скрытие элементов с JavaScript.

Атрибут HTML в стиле

Когда вы используете html стиль Атрибут, чтобы скрыть элементы страницы, вам придется использовать его с некоторыми свойствами CSS. Большую часть времени это будет дисплей свойство со значением Нет Анкет

This text is not shown on screen

Вы должны знать, что когда вы скрываете элементы страницы с дисплей: нет; Это игнорируется читателями экрана. например Nvda Анкет

CSS отображает свойство

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

  • Полностью скрыть элемент страницы
  • Изменения в ориентации устройства

Полностью скрыть элемент страницы

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

.selector {
    display: none;
}

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

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

Изменения в ориентации устройства

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

Возьмите следующий пример.

.left-side-bar {
    display: none;
}

/**
 * On tablet view upwards we show the
 * the left side bar
 */
@media screen and (min-width: 48em) {
    .left-side-bar {
        display: block;
    }
}

CSS Position Property

позиция Собственность может быть использована для позиционирования элементов веб -страницы, где вы хотите их на веб -странице. Его также можно использовать для перемещения элемента страницы полностью за кадром. Я подробно описал, как сделать это в своем посте под названием: Как реализовать доступность “пропустить контент” Анкет

Следующее переместит выбранный элемент страницы за пределами экрана но Он все еще доступен для читателей экрана.

.visually-hidden {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

Укрытие элементов страницы с JavaScript составляет два раза. Они есть:

  • Непосредственно применение встроенных стилей.
  • Добавление класс Имя, которое скрывает элементы.

Непосредственное применение встроенных стилей

Методы веб -страницы могут быть выбраны с использованием таких методов числа DOM, как Document.getElementById () , document.queryselector () так далее. После этого вы можете применить стиль, который будет скрывать элемент непосредственно к нему.

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

let header = document.getElementById('header');

// hide the header 
header.style.display = "none";

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

Добавление имени класса, которое скрывает элементы

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

Следующий CSS класс скрывает элемент, к которому он применяется:

.hidden {
    display: none;
}

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

let footNote= document.getElementByID('foot-note');

// add the hidden class
footNote.classList.add('hidden');

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

Вещи, которые вы должны избегать

Не скрывайте элемент с CSS с намерением показать его с JavaScript Анкет Это плохо.

Не делай этого :

.left-side-bar {
    display: none;
}

Затем показывая это с помощью JavaScript:

let leftSideBar = document.querySelector('.left-side-bar');

// then show it
leftSideBar.style.display = "block";

Если пользователь отключен JavaScript, или JavaScript не может загрузить пользователь, он потеряет доступ к элементу.

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

Пример реальной жизни

На изображении ниже я использую dev Основная отметка редактор Но, как вы заметите, вы можете увидеть Публиковать и Сохраните черновик кнопка, которая доступна в богатый редактор Анкет

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

Вывод

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

Редактировать 25 июня 2020 года: добавьте ссылку на статью о доступности «Пропустить контент» Анкет

Оригинал: “https://dev.to/ziizium/how-to-hide-web-page-elements-1be5”

Читайте ещё по теме: