LabEx
ВходРегистрация

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

Beginner

This tutorial is from open-source community. Access the source code

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

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

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.