Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 37 из 53 · 12 мин
prefers-color-scheme, prefers-reduced-motion, hover, pointer и orientation.
Открываю сайт ночью — слепит белым!
Телефон сам говорит сайту: «у меня тёмная тема», «не люблю анимации», «у меня палец, а не мышь». Слушаем.
prefers-color-scheme@media (prefers-color-scheme: dark) { … } — стили для тёмной темы системы.<style>
body { background: #fffaf3; color: #2b1d14; } @media (prefers-color-scheme: dark) { body { background: #1c1410; color: #f5e6d3; } }
</style>
<p>Подстраиваюсь под тему системы</p>prefers-reduced-motion@media (prefers-reduced-motion: reduce) — человек попросил систему меньше анимаций.hover · pointer@media (hover: hover) — есть наведение; (pointer: coarse) — палец, кнопки нужны крупнее.orientation(orientation: landscape) — экран лёжа.Настройки пользователя важнее твоего дизайна: тема, движение, способ ввода.
Добавь @media (prefers-color-scheme: dark), внутри которого у body фон #1c1410 и цвет текста #f5e6d3.
Внутри @media (prefers-reduced-motion: reduce) отключи анимацию у .pulse: animation: none.
Выберите один ответ.
Какой медиазапрос ловит тёмную тему системы?
Выберите все подходящие варианты.
Какие медиазапросы отражают предпочтения или устройство пользователя?
Проверяем состояние обучения…