CSS 사용자 정의 속성을 감지하는 기능은 무엇입니까?

Question

브라우저가 CSS custom properties (예 : color: var(--primary))을 지원하는지 여부를 감지 할 수있는 방법이 있습니까?

사용자 지정 속성을 지원하지 않는 브라우저에서 약간 다르게 동작하는 스크립트를 작성해야하지만 문서화 된 Modernizr 테스트 또는 사용자 지정 속성에 액세스하기위한 Javascript 인터페이스에 대한 정보를 찾을 수 없습니다.

의견을 보내 주셔서 감사합니다.

Answer 1

당신은 안정적으로 CSS에서 자바 스크립트 CSS.supports() 또는 @supports을 사용할 수 있습니다 사용자 지정 속성에 대한 지원을 검색합니다. custom properties을 지원하는 모든 브라우저의 모든 버전은 this method of feature detection도 지원합니다. 이 속성 선언을 구문 분석의 목적을 위해 정의 every property whose name begins with -- is considered valid에 의해 같이 --primary 사용자 정의 속성을 선언 할 필요가 없습니다 것을

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

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

는

알 수 있습니다.

Answer 2

대체 방법이 없을 때 이런 종류의 문제에 접근하는 방법에 대한 예제로두고 드리 겠지만 BoltClock's answer이이 경우에 사용할 수있는 방법입니다.

---

하나를 정의한 다음 그 값이 getComputedStyle인지 확인하십시오. 예를 들어,이 IE11에 (사용자 정의 CSS 속성을 지원) 크롬하지만 Supports custom props? false에 Supports custom props? true을 (하지 않는)을 보여줍니다

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