Как правило @supports может поддерживать имя анимации в этом выражении? - PullRequest
Новая
       66

Как правило @supports может поддерживать имя анимации в этом выражении?

0 голосов
/ 27 октября 2019

Я нашел этот CSS на странице в W3C , и я не знаю, как это имеет какой-либо смысл, особенно в части имени анимации: 

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}

Я понимаю, что это поддерживаетrule: 

@supports (display: grid) {
  .main {
    display: grid;
  }
}

Это означает: если браузер поддерживает тип отображения «grid», тогда примените это правило. Но я не понимаю, когда в первом примере написано animation-name: foo.

Для меня это означает: если браузер поддерживает анимацию с именем «foo», тогда примените это правило. Я думал, вы (разработчик) определил анимацию. Это просто плохой пример?

Вот документация animation-name . Вы определяете имя анимации, когда определяете ключевой кадр. Так что это просто говорит: «Включить этот запрос, когда кто-то определил правило ключевого кадра с именем foo»? Это будет означать не то, существует ли «поддержка» для анимации с именем «foo», а скорее, существует ли анимация с именем «foo».

https://www.w3.org/TR/css3-conditional/#processing

1 Ответ

3 голосов
/ 28 октября 2019

Это означает, что если браузер поддерживает анимацию с именем «foo», примените это правило. Я думал, вы разработчик определил анимацию. Это просто плохой пример?

Это не совсем то, что это значит. Разница между display и animation-name заключается в том, что первый принимает значение в наборе предопределенных значений, тогда как второй принимает любую допустимую строку.

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

animation-name принимает значение с именем <keyframes-name> и из спецификации у нас есть: 

<keyframes-name> = <custom-ident> | <string>

и

Некоторые свойства принимают произвольные определяемые автором идентификаторы в качестве значения компонента. Этот общий тип данных обозначается <custom-ident> и представляет любой действительный идентификатор CSS, который не будет неверно истолкован как предопределенное ключевое слово в ... ref

Строки обозначаются и состоят из последовательности символов, разделенных двойными или одинарными кавычками. ref

Свойство может принимать бесконечное количество значений, и вы обязаны использовать допустимое, поэтому любая строка будет выполнять работу (например,foo). Поскольку нет поддержки, основанной на используемом значении, все они будут иметь равную поддержку;вот почему использование случайной строки в порядке для проверки поддержки animation-name.

Логика та же самая для al;Вы должны использовать допустимое значение, а затем мы проверяем поддержку этого значения. Для display вы ограничены некоторыми значениями, и каждое из них имеет различную поддержку между браузерами. Для animation-name у вас нет ограничений на значение, и все они имеют одинаковую поддержку.

Если вы попытаетесь использовать недопустимое значение для animation-name, оно не будет работать: 

@supports (animation-name: a b ) {
  body {
    background:red;
  }
}

аналогично использованию недопустимого значения для отображения: 

@supports (display: 0 ) {
  body {
    background:red;
  }
}

Та же логика применима к transition-property;это может принять <custom-indent> в качестве значения.

, если вы используете допустимое значение для animation-name (даже если анимация не существует) и допустимое значение для transition-property (даже еслисвойство не существует), тогда оно будет применяться: 

@supports ((animation-name: myanimation) and (transition-property:a-random-name)) {
  body {
    background:green;
  }
}
...