Запросы поддержки CSS.

  принципивльно, хотя и могут формировать CSS-правила, вообще говоря, не являются селекторами CSS. Запросы поддержки CSS позволяют разбить таблицу стилей CSS на отдельные блоки, которые будут или не будут использованы браузером в зависимости от того, поддерживает или не поддерживает он тот или иной функционал CSS.
   Необходимость технологии запросов поддержки CSS понятна, поскольку функционал CSS развивается, и не все браузеры успевают с его поддержкой.
  Кроме того, новый функционал CSS, в процессе его развития, меняется, прежде чем будет окончательно специфицирован.
  Кроме того, некоторые браузеры принципиально отказываются поддерживать тот или иной CSS функционал.
      Запросы поддержки CSS


Формат записи в коде CSS:

  • @supports Запрос {Таблица стилей}

Значения формата записи:

  • @supports - Ключевое слово.

  • Запрос - Запрос поддержки CSS  ⃰.
      Устанавливает условие, при выполнении (истинности) которого браузер должен использовать выделенную запросом таблицу стилей.

  • { - Ключевое слово.

  • Таблица стилей - Устанавливает таблицу стилей CSS, которую браузер должен использовать при истинности условия, которое задал запрос.
      Таблица стилей кодируется в её обычном виде и формирует CSS-правила.

  • } - Ключевое слово.
   ⃰ Запрос поддержки CSS
  Запрос поддержки CSS является выражением с конечным логическим значением.
  Это выражение создаётся с помощью трех типов ключевых слов:

        - логические операторы;
        - Имя атрибута стиля;
        - Значение атрибута стиля;
  1. Логические операторы
    • and - Логическое умножение (и).
        Оператор and разбивает весь запрос или его подвыражения, выделенные операторами ( и ), на отдельные подвыражения.
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения оператора and всегда вычисляются перед вычислением всего разбитого им запроса или подвыражения.
        Истинность только всех подвыражений полученных оператором and приводит к истинности разбитого им запроса или подвыражения.
    • not - Логическая инверсия (не).
        Оператор not предназначен для логической инверсии всего запроса или его подвыражения, следующего за оператором not.
        Если запрос или подвыражение следующ(ий/ее) за оператором not разбит(о) на подвыражения операторами and, то сначала выполняются операторы and.
        Если запрос или подвыражение следующ(ий/ее) за оператором not разбит(о) на подвыражения операторами or, то сначала выполняется оператор not для каждого подвыражения.
    • or - Логическое сложение (или).
        Оператор or разбивает весь запрос или его подвыражения, выделенные операторами ( и ), на отдельные подвыражения.
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения оператора or всегда вычисляются перед вычислением всего разбитого им запроса или подвыражения.
        Истинность хотя бы одного подвыражения полученного оператором or приводит к истинности разбитого им запроса или подвыражения.
    • ( - Оператор группировки.
        Оператор ( используется только в паре с оператором ).
        Вместе выделяют подвыражение в запросе или в любом его подвыражении (в том числе выделенном операторами ( и )).
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения выделенные операторами ( и ) всегда вычисляются перед вычислением содержащего их запроса или подвыражения.
    • ) - Оператор группировки.
        Оператор ) используется только в паре с оператором (.
        Вместе выделяют подвыражение в запросе или в любом его подвыражении (в том числе выделенном операторами ( и )).
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения выделенные операторами ( и ) всегда вычисляются перед вычислением содержащего их запроса или подвыражения.
  2. Имя атрибута стиля
      Атрибут стиля со своим значением создаёт один простой запрос вида:

    •       (Имя атрибута:  Значение атрибута)
      Наличие круглых скобок и двоеточия - обязательно.
      Простой запрос проверяет на истинность условие поддержки браузером заданного атрибута стиля с заданным значением.
      Простые запросы, объединяясь с помощью логических операторов формируют всё выражение запроса поддержки CSS, и являются его наименьшими подвыражениями.
  3. Значение атрибута стиля
      Атрибут стиля со своим значением создаёт один простой запрос вида:

    •       (Имя атрибута:  Значение атрибута)
      Наличие круглых скобок и двоеточия - обязательно.
      Простой запрос проверяет на истинность условие поддержки браузером заданного атрибута стиля с заданным значением.
      Простые запросы, объединяясь с помощью логических операторов формируют всё выражение запроса поддержки CSS, и являются его наименьшими подвыражениями.

Примеры:

Запрос на поддержку браузером атрибута стиля mask-image со значением url(Ссылка1):

  @supports (mask-image: url(Ссылка1))
    { #div1 (mask-image: url(Ссылка1) }

Запрос на поддержку браузером атрибута стиля mask-image со значением url(Ссылка1). Атрибут поддерживается с префиксом -webkit-:

  @supports (-webkit-mask-image: url(Ссылка1))
    { #div1 (-webkit-mask-image: url(Ссылка1) }

Запрос на поддержку браузером атрибута стиля mask-image со значением url(Ссылка1). Атрибут поддерживается с префиксом -webkit- или без него:

  @supports ((mask-image: url(Ссылка1)) or (-webkit-mask-image: url(Ссылка1)))
    { #div1 (mask-image: url(Ссылка1); -webkit-mask-image: url(Ссылка1) }