@support

 

1. 브라우저의 css 속성 지원여부에 따라 다른 값을 지정할 수 있다.

// 모든 브라우저에 적용되는 기본값 지정
.wrap {
	display:flex;
}

// 만약 브라우저가 grid를 지원한다면
@supports(display:grid) {
	.wrap {
    	display:grid;
    }
}
// 만약 브라우저가 flex를 지원하지 않는다면
@supports not ( display:flex ) {
	.wrap {
    	float:left;
    }
}

 

 

2. 논리 연산자 사용가능

// 부정을 부정하여 무효화 하기 가능
@supports not ( not( display:flex ) ) {

}

// 논리연산자 함께 쓰기
// flex와 grid를 둘다 지원하지 않는다면
@supports not ( (display:flex) and (display:grid) ) {
	

}

// flex 또는 grid를 둘중 하나라도 지원하지 않는다면
@supports not ( (display:flex) or (display:grid)) {

}

 

3. Selector 지원여부 확인 가능

// 브라우저가 :first-chlid 가상클래스를 지원한다면
@supports selector(:first-child) {
	div:first-child {
    	color:tomato;
    }
}