Comment faire pour détecter détecter pour les propriétés personnalisées CSS?

Question

Est-il possible de détecter si un navigateur prend en charge CSS custom properties (par exemple color: var(--primary))? J'ai besoin d'écrire un script qui se comporte légèrement différemment dans les navigateurs qui ne supportent pas les propriétés personnalisées, mais je ne trouve pas de tests documentés Modernizr, ni d'informations sur l'interface Javascript pour accéder aux propriétés personnalisées.

Nous vous saurions gré de vos suggestions!

Answer 1

Vous pouvez utiliser de manière fiable CSS.supports() en JavaScript ou @supports en CSS pour détecter le support des propriétés personnalisées. Chaque version de chaque navigateur prenant en charge custom properties prend également en charge this method of feature detection.

if (window.CSS && CSS.supports('color', 'var(--primary)')) { 
 
    document.body.innerHTML = 'Supported'; 
 
}

@supports (color: var(--primary)) { 
 
    body { 
 
    background-color: green; 
 
    } 
 
}

Notez que cela ne vous oblige pas à déclarer la propriété --primary personnalisée, comme par définition every property whose name begins with -- is considered valid aux fins de l'analyse des déclarations de propriété.

Answer 2

Je vais laisser cela comme un exemple de la façon d'aborder ce genre de chose quand vous n'avez pas d'alternative, mais BoltClock's answer est la voie à suivre dans ce cas.

---

Je pense que vous pouvez définir un et vérifier si sa valeur passe par la getComputedStyle. Par exemple, cela montre Supports custom props? true sur Chrome (qui prend en charge les propriétés CSS personnalisé) mais Supports custom props? false sur IE11 (qui ne fonctionne pas):

function areCSSVarsSupported() { 
 
    var d = document.createElement('div'); 
 
    d.id = "test"; 
 
    document.body.appendChild(d); 
 
    var pos = getComputedStyle(d).position; 
 
    document.body.removeChild(d); 
 
    return pos === "fixed"; 
 
} 
 
console.log("Supports custom props? " + areCSSVarsSupported());

:root{ 
 
    --test-vars: fixed; 
 
} 
 

 
#test { 
 
    position: var(--test-vars); 
 
}