브라우저가 CSS3을 지원하는지 확인하는 방법

판정 방법: 1. "@supports" 규칙을 사용하여 판단합니다. 구문 형식은 "@supports (속성: 값) {레이블 이름 {속성: 값}}"입니다. 2. "CSS.supports()"를 사용합니다. 판단하는 함수, 구문 형식 "CSS.supports("property","value")". .

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

브라우저가 CSS3을 지원하는지 확인하는 방법:

CSS @supports 규칙:

구문:

@supports (rule)[operator (rule)]* { sRules }

설명:

rule: 특정 CSS 규칙을 지정합니다. 이 규칙은 괄호로 묶어야 합니다.
연산자: 여러 규칙을 지정하지 않으려면 또는 |와 같은 연산자를 사용하세요.

1. 기본 사용법:

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

는 브라우저가 flex 표준을 지원한다는 의미이며, 이를 지원하지 않는 경우 다음과 같이 구현할 수 있습니다.

2. 키워드 아님:

@supports not ( display: flex ) {
    #main{
        float: left;
    }
}

Js CSS.supports 함수

css의 @supports 태그와 마찬가지로 js는 브라우저가 css3 속성을 지원하는지 확인하는 Window.CSS.supports() 메서드도 제공합니다.

첫 번째 방법은 두 개의 매개변수를 사용하는 것입니다. 하나는 속성 이름이고 다른 하나는 속성 값입니다.

var supportsFlex = CSS.supports("display", "flex");

두 번째 사용법은 분석해야 하는 전체 스타일 문자열을 제공하는 것입니다.

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

CSS.supports 함수는 부울 값을 반환합니다. true인 경우 해당 속성이 지원된다는 의미입니다. 물론 이 함수를 사용하기 전에 먼저 브라우저가 CSS.supports를 지원하는지 확인해야 합니다.

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

추천 학습 : css 동영상 튜토리얼

위 내용은 브라우저가 CSS3을 지원하는지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!