Как я могу определить поддержку CSS Variable с помощью JavaScript?

В последней версии Firefox есть поддержка CSS Variables, но Chrome, IE и множество других браузеров этого не делают. Должно быть возможно получить доступ к DOM Node или написать небольшой метод, который возвращает, поддерживает ли браузер эту функцию, но я не смог найти ничего, что в настоящее время может это сделать. Мне нужно решение, которое я могу использовать как условие для запуска кода, если браузер не поддерживает эту функцию, например:

if (!browserCanUseCssVariables()) {
  // Do stuff...
}

Ответ 1

Мы можем сделать это с помощью CSS.supports. Это реализация JavaScript в CSS @supports, которая в настоящее время доступна в браузере Firefox, Chrome, Opera и Android (см. Могу ли я использовать...).

Статические методы CSS.supports() возвращают логическое значение, указывающее, поддерживает ли браузер данную функцию CSS или нет.
- Сеть разработчиков Mozilla

При этом мы можем просто:

window.CSS.supports('--fake-var', 0);

Результатом этого будет true, если браузер поддерживает переменные CSS и false, если это не так.

Пример чистого JavaScript

В Firefox этот фрагмент кода будет генерировать зеленый фон, так как результат CSS.supports для вышеприведенного '--fake-variable' возвращает true. В браузерах, которые не поддерживают переменные CSS, фон будет красным.

var body = document.getElementsByTagName('body')[0];

if (window.CSS && window.CSS.supports && window.CSS.supports('--fake-var', 0))
  body.style.background = 'green';
else
  body.style.background = 'red';

Ответ 2

Задайте стиль CSS с переменными CSS и доказательством с помощью Javascript и getComputedStyle(), если он установлен... getComputedStyle() поддерживается во многих браузерах: http://caniuse.com/#feat=getcomputedstyle

HTML

<div class="css-variable-test"></div>

CSS

:root {
  --main-bg-color: rgb(1, 2, 3); /* or something else */
}

.css-variable-test {
    display: none;
    background-color: var(--main-bg-color);
}

JavaScript

var computedStyle = getComputedStyle(document.getElementsByClassName('css-variable-test')[0], null);

if (computedStyle.backgroundColor == "rgb(1, 2, 3)") { // or something else
    alert('CSS variables support');
}

FIDDLE: http://jsfiddle.net/g0naedLh/6/

Ответ 3

Вам не нужен Javascript, чтобы определить, поддерживает ли браузер настраиваемые свойства, если только Do stuff... не является Javascript. Поскольку вы обнаруживаете поддержку для CSS, я предполагаю, что все, что вы пытаетесь сделать, это все CSS. Поэтому, если это способ удалить JS из этой конкретной проблемы, я бы рекомендовал Запросы функций.

@supports (display: var(--prop)) {
  h1 { font-weight: normal; }
  /* all the css, even without var() */
}

Поддержка запросов для поддержки синтаксиса. Вам не нужно запрашивать display; вы можете использовать любое свойство, которое хотите. Аналогично, значение --prop может даже не существовать. Все, что вы делаете, проверяет, знает ли браузер, как читать этот синтаксис.

(я просто выбрал display, потому что почти каждый браузер поддерживает его. Если вы используете flex-wrap или что-то, вы не поймаете браузеры, которые поддерживают собственные реквизиты, но не поддерживают flexbox.)

Sidenote: я предпочитаю называть их Custom Properties, потому что это именно то, что они: свойства, определенные автором. Да, вы можете использовать их как переменные, но есть определенные преимущества для них как свойства, такие как наследование DOM:

body    { --color-heading: green; }
article { --color-heading: blue; }
h1      { color: var(--color-heading); } /* no need for descendant selectors */

Ответ 4

У меня возникли проблемы с тем, чтобы метод window.CSS.supports работал для тестирования css-переменных в chrome 49 (даже если он имеет встроенную поддержку). Закончилось это:

var supportsCssVars = function() {
    var s = document.createElement('style'),
        support;

    s.innerHTML = "root: { --tmp-var: bold; }";
    document.head.appendChild(s);
    support = !!(window.CSS && window.CSS.supports && window.CSS.supports('font-weight', 'var(--tmp-var)'));
    s.parentNode.removeChild(s);
    return support;
}

console.log("Supports css variables:", supportsCssVars());

Кажется, работает во всех проверенных мной браузерах. Возможно, код можно оптимизировать.