Доступное скрытие элементов за пределами экрана

Введение

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

Skills Graph

За пределами экрана

В ВМ уже предоставлены index.html и style.css.

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

• Удалите все границы и отступы и скрыть переполнение элемента.
• Используйте clip, чтобы убедиться, что никакая часть элемента не отображается.
• Установите height и width элемента равными 1px и отрицайте их с помощью margin: -1px.
• Используйте position: absolute, чтобы предотвратить, чтобы элемент занимал место в DOM.
• Обратите внимание, что эта техника является лучшим альтернативой display: none (недоступна для экранных читателей) и visibility: hidden (занимает физическое место в DOM) в плане доступности и гибкости макета.

Вот пример того, как вы можете использовать эту технику в HTML и CSS:

<a class="button" href="https://google.com">
  Learn More <span class="offscreen">about pants</span>
</a>

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие "За пределами экрана". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.