Готовые @custom-media пресеты: ввод, брейкпоинты, HDR
Ширина экрана уже давно не говорит о том, что умеет устройство. К некоторым «мобилкам» подключены мышь и клавиатура, а у некоторых «десктопов» есть тач и стилус.
Дэниэл Шварц собрал набор готовых пресетов на @custom-media\ именно для этого, и самое полезное тут — как он обрабатывает способы ввода. Custom media queries работают как custom properties, но для media queries: даёшь условию имя один раз и используешь везде:
\\css @custom-media --mouse (hover: hover) and (pointer: fine); @custom-media --touch (hover: none) and (pointer: coarse); @custom-media --stylus (hover: none) and (pointer: fine); @custom-media --air (hover: hover) and (pointer: coarse); @custom-media --dpad (hover: none) and (pointer: none); \\
Ловушка — семейство \any-. \(any-hover: hover) and (any-pointer: fine)\ не спрашивает «есть ли мышь?», а спрашивает, может ли какое-то устройство ввода наводиться и есть ли какое-то (возможно, другое) точное. Его правило: пресеты задавать по **основному** вводу, а \any-\ использовать как добавки, например @media (--touch) and (any-hover: hover)\ для iPad с подключённой мышью.
Ещё два пресета:
→ **Брейкпоинты** — min-width шагами по 100px, от --from-360\ до --from-1560\ (диапазон подобран по статистике разрешений StatCounter). Breakpointы «до» нужны редко, но считаются просто: \(--from-360) and (--to-659)\ → **True HDR** — \(dynamic-range: high) and (color-gamut: p3). HDR без обоих условий выглядит выцветшим или слишком тёмным
Теперь подвох: Firefox 148 выкатил @custom-media\ за флагом (\layout.css.custom-media.enabled\), у Chrome пока только Intent to Prototype, Safari пока ничего.
Поэтому каждый пресет он даёт ещё и как container style query — это работает во всех браузерах уже сейчас:
\\css :root { @media (hover: none) and (pointer: coarse) { --touch: true; } } @container style(--touch) { /* ... */ } \\
Две оговорки: style query не может стилизовать сам :root, и нельзя смешать container-условие с media-условием в одном запросе — но @media\ можно вложить внутрь @container style(), и не придётся заводить custom property на каждую комбинацию. На стадии сборки можно взять PostCSS-плагин \postcss-custom-media.
Полный разбор со всеми пресетами у Daniel Schwarz / Master.dev 👇 https://blog.master.dev/useful-custom-media-presets/
