Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
@frontend_1
Фото 🚫 Перестаньте использовать pointer-events: none для блокировки UI Когда вы открываете Side-menu (шторку), показываете лоадер или переключаете шаги в форме, часто нужно «заморозить» взаимодействие с определенной частью страницы. 🐢 Старый (плохой) способ: Вешаем CSS-класс .disabled: .disabled { opacity: 0.5; pointer-events: none; /* Блокирует клики */ user-select: none; } Почему это плохо? Это визуальный обман. 1. Пользователь всё еще может попасть внутрь фокусом через Tab. 2. Пользователь может нажать Enter на кнопке, которую «нельзя нажать». 3. Скринридеры (VoiceOver, NVDA) продолжают читать этот контент, путая незрячих пользователей. 🚀 Правильный способ: Атрибут inert Это глобальный HTML-атрибут, который делает элемент и всех его детей полностью неактивными для браузера. <main id="main-content" inert> <button>Я не нажимаюсь</button> <input placeholder="В меня нельзя писать" /> </main> <aside id="sidebar"> <button>Я работаю!</button> </aside> Что делает inert под капотом: 1. pointer-events: none: Клики и ховеры игнорируются. 2. tabindex="-1": Элемент и все его потомки исключаются из Tab-навигации. 3. aria-hidden="true": Дерево доступности (A11y Tree) игнорирует этот узел (скринридеры молчат). 4. Запрет выделения: Текст нельзя выделить мышкой. Как переключать в JS: Это обычное свойство DOM-элемента, как disabled или hidden. const main = document.getElementById('main-content'); const loaderVisible = true; // Одной строкой выключаем всё взаимодействие с main main.inert = loaderVisible; 👉 @frontend_1
Перейти к посту Открыть в браузере
Если у вас установлено приложение,
вы можете сразу перейти в канал