@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!