javascript - tag - js dom element

¿Cómo puedo detectar el soporte de CSS Variable con JavaScript?

Question

La última versión de Firefox es compatible con las Variables CSS , pero Chrome, IE y muchos otros navegadores no. Debería ser posible acceder a un nodo DOM o escribir un pequeño método que devuelva si el navegador admite esta función, pero no he podido encontrar nada que actualmente pueda hacer esto. Lo que necesito es una solución que pueda usar como condición para ejecutar el código si el navegador no es compatible con la función, como por ejemplo:

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

Answer 1

Establezca un estilo CSS con variables CSS y getComputedStyle() con Javascript y getComputedStyle() si está configurado ... getComputedStyle() es compatible con muchos navegadores: 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/

Answer 2

No necesita tener Javascript para detectar si un navegador admite propiedades personalizadas, a menos que Do stuff... sea ​​el propio Javascript. Ya que para lo que estás detectando soporte es CSS, asumo que todo lo que estás tratando de hacer es todo CSS . Por lo tanto, si hay una manera de eliminar JS de este problema específico, recomendaría consultas de características .

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

Consultas de características de prueba de soporte para sintaxis. No tienes que consultar para la display ; Usted podría utilizar cualquier propiedad que desee. Del mismo modo, el valor de --prop ni siquiera existe. Todo lo que está haciendo es verificar si el navegador sabe cómo leer esa sintaxis.

(Simplemente elegí display porque casi todos los navegadores lo admiten. Si usas flex-wrap o algo así, no verás los navegadores que admiten accesorios personalizados pero que no son compatibles con flexbox).

Nota: Prefiero llamarlas Propiedades personalizadas porque eso es exactamente lo que son: propiedades definidas por el autor. Sí, puede usarlos como variables, pero hay ciertas ventajas para ellos como propiedades, como la herencia DOM:

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

Answer 3

Podemos hacer esto con CSS.supports . Esta es la implementación de JavaScript de la regla @supports de CSS que está disponible actualmente en Firefox, Chrome, Opera y Android Browser (ver ¿Puedo usar ... ).

Los métodos estáticos CSS.supports() devuelven un valor booleano que indica si el navegador admite una función CSS determinada o no.
- CSS.supports

Con esto, podemos simplemente:

CSS.supports(''color'', ''var(--fake-var)'');

El resultado de esto será true si el navegador admite variables CSS, y false si no lo es.

(Es posible que piense que CSS.supports(''--fake-var'', 0) funcionaría, pero como se indica en los comentarios de esta respuesta, Safari parece tener un error que hace que falle).

Ejemplo de JavaScript puro

En Firefox, este fragmento de código producirá un fondo verde, ya que nuestra llamada CSS.supports anterior devuelve true . En los navegadores que no admiten las variables CSS, el fondo será rojo.

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

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

Tenga en cuenta que aquí también he agregado comprobaciones para ver si existe window.CSS : esto evitará que se window.CSS errores en los navegadores que no admiten esta implementación de JavaScript y también lo consideran false . ( CSS.supports se introdujo al mismo tiempo que se introdujo CSS global, por lo que tampoco es necesario verificarlo).

Creando la función browserCanUseCssVariables()

En su caso, podemos crear la función browserCanUseCssVariables() simplemente ejecutando la misma lógica. Este fragmento a continuación alertará si es true o false dependiendo del soporte.

function browserCanUseCssVariables() {
  return window.CSS && CSS.supports(''color'', ''var(--fake-var)'');
}

if (browserCanUseCssVariables()) {
    alert(''Your browser supports CSS Variables!'');
} else {
    alert(''Your browser does not support CSS Variables and/or CSS.supports. :-('');
}

Los resultados (todos probados solo en Windows)

Firefox v31

Cromo v38

Internet Explorer 11

Answer 4

Tuve problemas para conseguir que el método window.CSS.supports funcione para probar las variables css en Chrome 49 (aunque tiene soporte nativo). Acabé haciendo esto:

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());

Parece funcionar en todos los navegadores que he probado. Probablemente el código puede ser optimizado sin embargo.