CSS @supports 태그를 사용하여 브라우저 호환성 분석 감지

@supports는 브라우저가 특정 CSS 속성을 지원하는지 확인하는 데 사용할 수 있으며 JavaScript를 통해 제어할 수 있습니다. 다음은 CSS의 @supports 태그를 사용하여 브라우저 호환성을 감지하는 방법에 대한 자세한 설명입니다

CSS @supports 태그에는 CSS 코드의 @media 쿼리 문과 유사한 구문이 있습니다.

@supports(prop:value) {   
 /* 各种样式 */
}

CSS @supports를 사용하면 프로그래머는 다양한 방법을 사용하여 현재 브라우저는 특정 항목 CSS 스타일 특성을 지원합니다.

기본 속성 감지
기본 속성 및 속성값 감지를 수행할 수 있습니다:

@supports (display: flex) {   
 p { display: flex; }   
}

This It @supports 태그의 가장 기본적인 사용법입니다.

not 키워드
@supports 태그는 지원되지 않는 상황을 처리하기 위해 'not' 키워드와 결합될 수 있습니다:

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

다중 감지 및 조건부 감지

/* or */
@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

Javascript CSS.supports()
Javascript에서 창을 사용합니다. support 메소드는 CSS @supports를 감지하는 데 사용됩니다. 한 메소드는 두 개의 매개변수 boolValue = CSS.supports(propertyName, value)를 수신할 수 있으며, 다른 메소드는 boolValue라는 문자열을 수신할 수 있습니다. = CSS.supports(supportCondition); 구체적인 사용법은 다음 예를 참조하세요:

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

@supports 사용 시나리오

대부분의 경우 @supports는 이전 브라우저를 지원하고 가능한 경우 최신 브라우저의 새로운 기능을 활용하여 사용자 경험을 개선하는 데 사용됩니다. @supports의 가장 중요한 사용 사례 중 하나는 페이지 레이아웃입니다. 많은 최신 브라우저는 Flexbox 웹 레이아웃을 지원합니다. 많은 브라우저가 이를 지원하지 않는 경우 코드는 다음과 같이 작성할 수 있습니다.

section {   
 float: left;   
}   

@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    section {   
      display: -webkit-flex;   
      display: -moz-flex;   
     display: flex;   
     float: none;   
    }   
}

프로그래머가 사용하는 것처럼 가능합니다. 이 새로운 @supports 기능을 경험해 보면 점점 더 나은 사용 시나리오가 계속 등장할 것입니다.

위 내용은 CSS @supports 태그를 사용하여 브라우저 호환성 분석 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!