Являются ли пользовательские свойства CSS глобальными для связанных документов CSS?

Я экспериментирую с большим успехом с пользовательскими свойствами CSS3 (иначе переменные CSS). Я говорю о --black: #000; а также background: var(--black); Переменные типа. Однако мне не повезло, когда переменные объявляются в отдельных связанных документах.

Благодаря тому, что пользовательские свойства CSS более чем на 72% совместимы с браузерами (источник: https://caniuse.com/), я стремлюсь начать использовать их в очень специфическом приложении, где, как я знаю, использует моя аудитория совместимые браузеры.

Мне интересно, являются ли эти пользовательские свойства CSS глобальными по объему для всех связанных CSS-документов или они являются только глобальными (на :root элемент) на документ?

Я не могу найти ответ (даже в спецификации)!

Некоторые из исследований, которые я прочитал:

Моя конкретная проблема возникает в приложении Ruby on Rails, где я включаю пользовательские свойства CSS в <style> блок перед таблицей стилей SCSS, который при развертывании должен быть предварительно скомпилирован. Если я включу переменные в верхней части SCSS, все работает просто отлично. Тем не менее <style> Блок должен содержать переменные темы и должен быть скомпилирован ERB во время выполнения.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      :root {
        --primary-color: #000;
      }
    </style>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
</html>
Источник

1 ответ

Решение

В MDN:

Пользовательские свойства участвуют в каскаде: каждое из них может появляться несколько раз, и значение переменной будет соответствовать значению, определенному в пользовательском свойстве, определяемом каскадным алгоритмом.

Он работает так же, как и любые другие свойства CSS. Он должен быть объявлен в предке целевого элемента. Так обычно это будет объявлено элементу верхнего уровня html или же root:,

Не имеет значения, объявлены ли пользовательские свойства CSS во внешнем файле CSS или в том же файле.

Ниже приведен пример использования двух внешних файлов CSS. Работает на Firefox, Safari и Chrome.

https://thatseeyou.github.io/css3-examples/basics/customproperty.html

variables.css :

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
}

style.css :

.red {
    background-color: var(--red);
}
.green {
    background-color: var(--green);
}
.blue {
    background-color: var(--blue);
}

HTML :

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="customproperty/variables.css" rel="stylesheet">
        <link href="customproperty/style.css" rel="stylesheet">
        <style>
            .module {
                --red: #800;
                --green: #080;
                --blue: #008;
            }
        </style>
    </head>
    <body>
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
        <div class="module">
            <div class="red">red in module</div>
            <div class="green">green in module</div>
            <div class="blue">blue in module</div>
        <div>
    </body>
</html>
Источник
Другие вопросы по тегам