Фокус и указатель

Всплывающие стили фокуса под разные устройства ввода.

Уровень: продвинутый 10 разделов 12 минут

1. Что это и зачем

Всплывающие стили фокуса под разные устройства ввода.

Адаптивность — это пересборка макета под ширину вьюпорта. Медиазапросы реагируют на ширину и другие характеристики, а breakpoint'ы объявляются там, где макет «ломается», а не по устройствам.

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

2. Синтаксис и пример

@media (hover: hover) and (pointer: fine) { a:hover { color: var(--accent); } }

Запись выше — базовый вариант использования. Обратите внимание, как фокус и указатель вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Современный CSS стремится от медиазапросов к внутренним механизмам: clamp(), %, container queries и flex/grid-схемы справляются без брейкпоинтов. Медиазапросы оставляют для исключений.

В реальной разметке фокус и указатель встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

media queries работают везде; container units (@container) требуют свежих браузеров и имеют fallback на обычные правила.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Комбинируйте условия для точных сценариев.

Не жертвуйте доступностью ради «чистого ховера».

7. Практическое задание

Проверьте фокус кнопок на клавиатуре.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

@media (hover: hover) and (pointer: fine) { a:hover { color: var(--accent); } }

8. Как применять в проектах

Резиновые сетки, адаптивная типографика, «схлопывание» меню и боковых колонок, оптимизация картинок под разные экраны — типовые сценарии.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

макет не «ломается» между брейкпоинтами;
изображения гибкие: max-width: 100%;
clamp() и гибкие сетки там, где можно без медиазапросов;
скрытие контента используется осознанно;
проверено на мобильном и десктопе;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам