CSS 기능 쿼리로 속성 지원 체크하기 - @support

CSS 는 CSS 속성이 웹 브라우저에서 지원되는지를 체크해서 지원되는 경우와 되지 않는 경우에 대한 구분 처리를 할 수 있습니다.

웹 브라우저 호환성에 따른 구분 처리를 할 수 있기 때문에 자바스크립트 없이도 많은 웹 브라우저 호환성 문제를 해결할 수 있습니다. 인터넷 익스플로러를 제외한 모든 웹 브라우저가 지원을 하므로, 특히 인터넷 익스플로러 지원 여부를 체크해 예외 처리를 해야 하는 경우 유용하게 사용할 수 있습니다.

"@support" 구문은 기능 쿼리(Feature query) 라고 합니다.

기능 쿼리는 특정 속성, 또는 기능이 지원되는지를 체크해서 지원되는 경우, 또는 지원되지 않는 경우 CSS를 재정의해서 호환성 문제를 해결합니다.

사용은 다음과 같이 하며, 속성이 지원되는 경우와 지원되지 않는 경우에 대한 구분 처리가 가능합니다.

"not" 을 "@support" 뒤에 공백으로 구분해서 추가하면 지원되지 않는 경우에 대한 예외 처리가 됩니다.

인터넷 익스프롤러에서 지원되지 않는 그리드 속성에 대한 지원 여부를 체크해 속성을 다르게 적용하라면 다음과 같이 작성할 수 있습니다.

@supports (display: grid) {
  .grid{
  	display: grid;
  }
}
@supports not (display: grid) {
  .grid{
  	float: left;
  }
}

또한, 2개 이상의 속성을 나열해서 모두 지원하거나, 속성 중 한 가지 이상을 지원하는 경우에 대한 기능 쿼리를 실행할 수도 있습니다. 

2개의 조건을 모두 만족해야 하는 경우 "and" 를 둘 중 하나만 만족하면 되는 경우 "or" 를 사용하면 됩니다.

2개 이상의 조건 비교시 "not" 을 사용하는 경우 "not" 을 적용하는 조건 속성은 괄호로 감싸서 반드시 구분을 해야 하빈다.

@supports (display: flex) and (not (justify-content: center)) {
  /* IE 10 */
  .grid .item{
  	text-align: center;
  }
}

기능 쿼리 조건 속성에는 벤더 프리픽스(Vendor prefix) 를 사용해서 특정 웹 브라우저를 지원하는지 여부를 체크할 수도 있습니다.

@supports (-ms-grid-row: repeat(4, 1fr)) {
}

주의할점!

예외적으로 "@support" 기능 쿼리 중  "@support selector()" 기능 쿼리는 사파리 브라우저에서는 지원되지 않습니다.

맥OS 와 애플 모바일 기기에 내장된 사파리 웹 브라우저는 모두 해당됩니다.

"selector()" 는 기능 쿼리 중 잘 사용하지 않는 선택자 기능 쿼리 이므로 크게 중요하지는 않지만, 사파리 웹 브라우저 호환성을 위해 "selector()" 기능 쿼리 선택자는 사용하지 않는 것이 좋습니다.

기능 쿼리 선택자(Selector)는 다음처럼 부모 자식 구조인 요소가 있는지 여부를 체크해서 조건 처리를 할 수 있도록 하는 기능 쿼리 입니다. 조건을 만족하는 경우에 제한적으로 실행할 수 있지만, 실제로는 거의 사용되지 않습니다.

@supports selector(.grid > .item){
	padding: 10px;
}