Bootstrap - Визуально скрытый

Здравствуйте, будущие веб-разработчики! Сегодня мы погрузимся в увлекательную и невероятно полезную функцию Bootstrap: класс визуально скрытый. Как ваш доброжелательный соседский компьютерный учитель, я с радостью проведу вас через это путешествие. Так что возьмите свой любимый напиток, устроитесь поудобнее, и отправляйтесь в это приключение вместе со мной!

Что такое визуально скрытый?

Прежде чем мы перейдем к деталям, давайте начнем с азов. Класс визуально скрытый в Bootstrap — это как魔术nick trick для вашего веб-страницы. Он позволяет вам скрыть контент визуально, но при этом оставить его доступным для экранных读者的. Неужели это не здорово?

Представьте, что вы разрабатываете веб-сайт для магической школы (давайте назовем ее Хогвартс, как вам?). Вы хотите включить важную информацию для студентов с нарушениями зрения, но не хотите, чтобы эта информация захламляла визуальный макет для других студентов. Вот где на помощь приходит класс визуально скрытый!

Как это работает?

Класс визуально скрытый использует CSS, чтобы скрыть контент от зрячих пользователей, но оставить его доступным для экранных读者的. Это как невидимая накидка для ваших HTML-элементов!

Давайте рассмотрим простой пример:

<h1>Добро пожаловать в Хогвартс</h1>
<p class="visually-hidden">Этот контент предназначен только для экранных读者的.</p>

В этом примере зрячие пользователи увидят только "Добро пожаловать в Хогвартс", в то время как пользователи экранных读者的 также услышат "Этот контент предназначен только для экранных读者的."

Применение визуально скрытого в Bootstrap

Теперь, когда мы понимаем концепцию, давайте посмотрим, как мы можем реализовать ее в Bootstrap. Bootstrap предоставляет нам готовый класс под названием .visually-hidden.

Вот как вы можете использовать его:

<div class="visually-hidden">Этот контент скрыт визуально, но доступен для экранных读者的.</div>

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

Практические примеры

Давайте рассмотрим несколько практических примеров, где вы можете использовать класс визуально скрытый:

1. Ссылки для пропуска навигации:

<a href="#main-content" class="visually-hidden">Перейти к основному контенту</a>
<nav>
<!-- Элементы навигационного меню -->
</nav>
<main id="main-content">
<!-- Основной контент -->
</main>

Это позволяет пользователям экранных读者的 пропустить directamente к основному контенту, улучшая их опыт навигации.

2. Метки форм:

<label for="search" class="visually-hidden">Поиск</label>
<input type="text" id="search" placeholder="Поиск">

Здесь мы предоставляем метку для экранных读者的, не влияя на визуальный дизайн поискового ввода.

3. Дополнительный контекст:

<button>
Удалить
<span class="visually-hidden">Этот элемент из вашей корзины</span>
</button>

Это предоставляет дополнительный контекст для пользователей экранных读者的, не захламляя текст кнопки для зрячих пользователей.

Магия за визуально скрытым

Теперь давайте заглянем за занавес и посмотрим, как Bootstrap реализует этот магический класс. Вот CSS, который делает это возможным:

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

Не волнуйтесь, если это выглядит как заклинание из avanzado класса по созданию зелий! Давайте разберем это:

1. position: absolute: Это выводит элемент из обычного потока документа.
2. width: 1px; height: 1px: Делает элемент крошечным.
3. padding: 0; margin: -1px: Удаляет любое пространство вокруг элемента.
4. overflow: hidden: Скрывает любой контент, который может вылиться за пределы.
5. clip: rect(0, 0, 0, 0): Обрезает контент до 0x0 прямоугольника.
6. white-space: nowrap: Prevents text from wrapping.
7. border: 0: Удаляет любую границу.

Заявления !important обеспечивают, чтобы эти стили не были переопределены другими правилами CSS.

Визуально скрытый vs Display None

Вы можете задаться вопросом: "Why not just use display: none?" Ну, мой curioso ученик, есть важное различие:

Свойство	Визуально скрытый	Display None
Визуальное отображение	Скрыто	Скрыто
Доступность для экранных读者的	Доступен	Недоступен
Присутствие в DOM	Присутствует	Присутствует
Влияние на макет	Нет влияния	Влияет на макет

Как видите, visually-hidden — это путь, который нужно выбрать, если вы хотите поддерживать доступность, скрывая контент визуально.

Responsive Visibility

Bootstrap также предоставляет классы для переключения видимости в зависимости от размера экрана. Эти классы combine концепцию визуально скрытого с адаптивным дизайном:

• .d-none: Скрыто для всех размеров экрана
• .d-{sm,md,lg,xl,xxl}-none: Скрыто только на определенных размерах экрана
• .d-{sm,md,lg,xl,xxl}-block: Видно как блок-элемент на определенных размерах экрана

Например:

<div class="d-none d-md-block">
Этот контент скрыт на малых экранах, но виден на средних и больших экранах.
</div>

Заключение

И вот оно, молодые маги веба! Мы разгадали тайны класса визуально скрытый в Bootstrap. Помните, с великой силой приходит великая ответственность. Используйте эти техники wisely, чтобы создавать веб-сайты, которые не только визуально привлекательны, но и доступны для всех пользователей.

Заканчивая наш урок, я вспоминаю мудрого старого веб-разработчика, который однажды сказал мне: "True magic of web design lies not in what you can see, but in what you can't." Так что идите вперед, экспериментируйте и создавайте веб-опыты, которые будут магическими для всех!

До следующего приключения в мире веб-разработки, продолжайте кодить и stay curious!

Credits: Image by storyset