Nano Hash - криптовалюты, майнинг, программирование

Можно ли выполнить проверку CSS @supports для правила @media?

Правило @support позволяет выполнять запрос функций к свойствам CSS. Мне интересно, можно ли выполнить проверку функций по конкретным правилам @media?

Например, мне хотелось бы знать, поддерживает ли браузер указатель @media или условие любого указателя:

@supports @media (pointer:fine) {

Or

@supports @media (pointer) {

Это не работает. Должно ли это работать?

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

Я не хочу вкладывать @supports внутрь @media или наоборот. Я хочу определить, поддерживается ли сам запрос @media, в частности, правило @media для указателя. Это совершенно другой сценарий, чем просто вложение случайного запроса поддержки в медиа-запрос.

css media-queries
29.05.2017

  • tl;dr вам нужно вложить медиа-запрос в скобки @supports. 29.05.2017
  • Я не уверен, но пробовали ли вы вкладывать что-то вроде codepen.io/anon/pen/mmYNgp? 29.05.2017
  • @tylerh: вопрос в том, как? 29.05.2017
  • @MichaelCoker: Спасибо, я создал ответвление вашей отправной точки: codepen.io/fchristant/pen/BRgoKN Это фактически доказывает, что такой подход не работает. Он не обнаруживает правило, вложенное в @ media, но само по себе без вложения работает. Так что мой вопрос остается в силе. 29.05.2017

Ответы:


1

Это не работает. Должно ли это работать?

Нет; @supports поддерживает только объявления свойств, а не правила at или любую другую грамматическую конструкцию в CSS. В любом случае вы не хотите проверять поддержку правила @media; вы пытаетесь проверить поддержку определенных функций мультимедиа. Но @supports и это не поддерживает, несмотря на то, что медиа-функции используют тот же синтаксис объявления, что и объявления свойств.

Для этого вам вообще не нужно правило @supports. Чтобы проверить, поддерживает ли браузер определенную функцию мультимедиа, просто напишите правило @media со списком запросов мультимедиа, содержащим как функцию мультимедиа, так и ее отрицание:

@media not all and (pointer), (pointer) {
  p { color: green; }
}
<p>If this text is green, your browser supports the <code>pointer</code> media feature.

(Обратите внимание, что Media Queries 4 снимает ограничение not, требующее тип мультимедиа из MQ3, поэтому отрицание действительно должно быть not (pointer), но пока ни один браузер не поддерживает это и по-прежнему требуется тип носителя.)

Браузеры, которые не распознают функцию мультимедиа pointer, будут интерпретировать правило @media как @media not all, not all (несмотря на not в медиазапросе not all and (pointer)). См. раздел 3.2 спецификации, в котором говорится

Неизвестное ‹mf-name> или ‹mf-value> или запрещенное ‹mf-value> приводит к значению «неизвестно». ‹media-query>, значение которого «неизвестно», необходимо заменить на not all.

Если вам нужно применить CSS, когда браузер не поддерживает мультимедийную функцию, эти правила обработки ошибок означают, что вам нужно будет воспользоваться преимуществом каскада (и если вы не знаете исходных значений заранее, вы можете застрять):

p { color: red; }

@media not all and (pointer), (pointer) {
  p { color: currentcolor; }
}
<p>If this text is red, your browser does not support the <code>pointer</code> media feature.

29.05.2017
  • Спасибо, это именно то, что я искал! У меня есть один дополнительный вопрос для полноты картины: каков синтаксис вашего примера, чтобы сделать обратное? Чтобы проверить, не поддерживает ли браузер указатель? 29.05.2017
  • @Ferdy: В этом случае каскад будет вашим другом. Я обновил свой ответ примером. 29.05.2017
  • Я видел, как это происходит в режиме реального времени, ты быстрый. Спасибо! 29.05.2017
  • Это просто красиво! Для завершения ответ для значения указателя: @media not all and ( pointer: fine ), ( pointer: fine ) {} 14.10.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..