CSS Supports, @supports (지원하는 css에 따른 스타일 적용)

최신 스펙의 css값을 사용할 때

해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게

css를 선언할 수 있다.

 

방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다.

 

1. @supports 의 사용

@supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다.

@supports (display:flex) {
  .contents{display:flex; margin:0 5px; align-items:center; justify-content:space-between;}
  .contents div{flex-grow:1;}
}

@supports not (display:flex) {
  .contents{overflow:hidden;}
  .contents div{float:left; margin:0 5px;}
}

css 입력 영역에 @supports (조건) { 적용할 css내용 } 을 입력하면 된다.

 

위의 문법을 예시로 보면 display:flex 를 지원하는 브라우저에서는

.contents에 display:flex; margin:0 5px; align-items:center; justify-content:space-between;

.contents div 에 flex-grow:1 속성을 적용시키고

 

display:flex를 지원하지 않는 브라우저에서는

.contents에 overflow:hidden

.contents div에 float:left; margin:0 5px; 의 값을 적용시키게 한다는 내용이다.

 

 

이처럼 특정 css 속성이 지원하거나 지원하지 않는 상황에 따라

css값을 달리 적용할 수 있다.

 

2. @supports 의 응용

기본적으로 한 가지의 특정 css의 지원/미지원에 따른 css 적용 뿐만 아니라

and, or 같은 연산자를 사용해 특정 상황에 따른 css 적용 조건을 만들 수 있다.

 

1. and 연산자 : and를 기점으로 작성한 조건의 css가 모두 참일 경우 관련 css 값을 적용한다.

@supports (display:table) and (display:table-cell){
  .list{display:table;}
  .list li{display:table-cell;}
}

display:table과 display:table-cell을 동시에 지원하는 브라우저에서

.list와 .list li 에 입력한 css가 적용된다.

 

 

2. or 연산자 : or를 기점으로 둘 중 혹은 여러 개 중 하나라도 참일 경우 관련 css 값을 적용한다.

@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)){
  .box{transform:rotate(45deg);}
}

transform:rotate(45deg) 나 -webkit-transform:rotate(45deg)의 css 중 하나라도 브라우저에서

지원을 하게된다면 .box에 입력한 css 가 적용된다.

 

3. @supports의 selector() 적용

브라우저에서 특정 선택자를 지원하는지도 @supports 문법을 통해 분별하고 스타일을 적용할 수 있다.

@supports selector(A > B){
  .contents > .box {background:#000;}
}

직계 자손 선택자 (>) 를 지원하는 브라우저일 경우에

.contents > .box에 입력한 css를 적용할 수 있게 만든다.

 

 

[!] selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력한다.

selector (A ~ B){}   ---- X
selector(A ~ B){}    ---- O

 

 

---

 

developer.mozilla.org/ko/docs/Web/CSS/@supports