@supports에 대한 기능 감지?

Question

브라우저가 CSS @supports 기능을 지원하는지 어떻게 알 수 있습니까? Internet Explorer와 Safari는이 기능을 지원하지 않기 때문에 웹 응용 프로그램은 해당 브라우저에 적용 할 스타일을 알지 못합니다. 순수 CSS를 사용

Answer 1

, 당신은 종류의 브라우저가 같은 color 선언으로, 보편적으로 지원 선언과 함께 @supports 규칙을 만들고, 전 세계적으로 선언 같은 또 다른 규칙을 재정 의하여 @supports을 이해하고 있는지 여부를 확인하기 위해 캐스케이드에 의존 할 수 :

#test { 
    color: red; 
} 

@supports (color: green) { 
    #test { 
     color: green; 
    } 
} 

In any browser that implements @supports correctly, #test should have green text. Otherwise, it'll have red text.

는 순수 CSS 방법에 대한 자세한 설명은 this question에 대한 내 대답을 참조하십시오. 당신이 자바 스크립트를 사용하여 감지 할 찾고 있다면 코멘트에서 언급 한 바와 같이

, 당신은 Modernizr 기능 감지 라이브러리를 사용할 수 있습니다 (다운로드의 설정에서 CSS-지원을 포함해야합니다) :

if (Modernizr.supports) { 
    console.log('Your browser supports @supports.'); 
} else { 
    console.log('Your browser does not support @supports.'); 
}