Использование переменной CSS для определения свойства -webkit-background-clip не работает в Chrome - PullRequest
Новая
       45

Использование переменной CSS для определения свойства -webkit-background-clip не работает в Chrome

0 голосов
/ 02 июля 2019

Хорошо известно, что вы можете использовать переменную CSS, чтобы упростить написание свойств, которые требуют специфичных для браузера префиксов поставщиков. (См. Lea Verou, « Автоопределение, с переменными CSS! ».) Например, 

* {
  --clip-path: initial ;
  -webkit-clip-path: var( --clip-path ) ;
  clip-path: var( --clip-path ) ;
}
.maximalCircle {
  --clip-path: circle(50%);
}

В этом примере

  • Установка --clip-path:initial; отменяет наследование, поэтому элемент будет иметь значение clip-path, отличное от initial (что равно border-box), только если в этом элементе определено --clip-path.
  • --clip-path: circle(50%); эффективно устанавливает значение как для свойств vanilla clip-path, так и для -webkit-clip-path, специфичных для WebKit.

Вы можете увидеть это в действии на этой ручке .

Однако мне не удается использовать CSS-переменные для упрощения другого свойства: свойство -webkit-background-clip: если я назначаю переменную CSS --clip-path:text; в качестве значения свойства -webkit-background-clip, (a) Safari ( и Firefox) вроде бы хорошо, но (b) Chrome этого не понимает (т. е. вычисленное значение в Chrome равно background-clip: border-box, что является значением по умолчанию).

[Во всех этих тестах я использую Safari 12.1.1, Firefox Quantum 67.0.4, Firefox Developer Edition 68.0b12 и Chrome 75.0.3770.100.]

Cliff Примечания для ниже минимального рабочего примера: A <div class="text-masked-gradient"> содержит текстовую строку, которая находится на градиентном фоне. Свойство CSS background-clip:text (и / или -webkit-background-clip:text) должно заставлять фон показываться только через сам текст. На рисунке ниже показано (а) как оно выглядит, когда работает (L) и (б), когда нет (R).

enter image description here

Моя HTML-разметка: 

<div class="text-masked-gradient">
  YELP
</div>

Полный CSS ниже. Этот код также существует на этой ручке . (Я рассматриваю еще много сценариев для диагностических целей на этой другой ручке .)

Полный CSS: 

.text-masked-gradient {
  --background-clip: text ;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: var( --background-clip );

  height: 150px ;
  width: 300px ;
  outline: solid black ;
  margin: 50px ;
  font-size: 7em ;
  text-align: center ;
  font-weight: 700 ;
  background-image:
    radial-gradient(circle at top left,red,chartreuse);
}

Это правильно отображает в:

  • Safari
  • Firefox Quantum
  • Firefox Developers Edition

но не в

  • Chrome (где весь прямоугольник является градиентом, без текста).

Я что-то не так делаю? Это ошибка Chrome, связанная с переменными CSS и свойством -webkit-background-clip?

(Этот пример отлично работает во всех этих браузерах, включая Chrome, если вы используете -webkit-background-clip:text вместо webkit-background-clip:var(--background-clip).)

1 Ответ

0 голосов
/ 02 июля 2019

Леа Веру подтвердила, что это ошибка Chrome. Она создала этот сокращенный контрольный пример , который не работает при просмотре в Chrome. Она подала этот отчет об ошибке: Выпуск 980439 .

Кроме того, при попытке определить свойство background-clip с помощью переменной CSS, например, background-clip:--a, где CSS-переменная text, возникает ошибка WebKit (что влияет на Safari и Chrome). Это заставляет и Chrome, и Safari игнорировать действительное правило -webkit-background-clip:text. См. Ошибка 199410 - background-clip:var(--a) делает недействительным -webkit-background-clip:text, когда --a:text.

Из-за обеих этих ошибок свойство background-clip в настоящее время не является хорошим кандидатом для использования переменных CSS для упрощения префиксов поставщиков.

...