@supports 파헤치기

서론

브라우저 버전에 따라 CSS의 지원 여부가 달라진다.

만약 해당 CSS를 지원하지 않을 경우 어떻게 해야할까?

1. 모든 브라우저, 버전을 지원하는 CSS로 재작성한다.
2. 부분적으로 지원하지 않는 경우에만 추가 작성을 한다.

이번에 소개할 CSS 기능은 위 2번의 경우 사용할 수 있다.

@supports

간단히 말해서 해당 조건에 따라 CSS를 적용하는 것이다.

기능 쿼리(feature query)라고 부른다.

흔히 쓰는 미디어 쿼리(Media query)와 같은 @규칙이다

스타일의 최상위 or 다른 @규칙과 중첩해서 사용 가능하다.

기본적인 사용 방법

• 브라우저가 조건 을 만족할 때 해당 CSS를 적용한다

@supports (조건) {
  // 적용할 css
}

e.g. 브라우저가 display: grid 를 지원할 때 중괄호 안에 CSS 를 적용한다.

@supports (display: grid) {
  // 적용할 CSS
}

연산자와 함께 쓰는 경우

not , and, or 연산자와 같이 쓸 수 있다.

1. not 연산자

e.g. 브라우저가 _aspect-ratio: 16 / 9_ 를 지원하지 않을 때 해당 _CSS_ 를 적용한다.

@supports not (aspect-ratio: 16 / 9) {
  // 적용할 CSS
}

2. and 연산자

• 2개 이상의 조건을 걸 수 있다.

e.g. 브라우저가 _display: grid_ 와 _gap_ 을 지원하는 경우 해당 _CSS_ 를 적용한다.

@supports (display: grid) and (gap: 10px) {
  // 적용할 CSS
}

3. or 연산자

• 2개 이상의 조건을 걸 수 있다.

e.g. 브라우저가 여러 조건 중 하나의 조건이라도 지원(만족)하면 해당 _CSS_ 를 적용한다.

@supports (display: flex) or (display: -webkit-box) or (display: -moz-box) or
  (display: -ms-flexbox) or (display: -webkit-flex) {
  // 적용할 CSS
}

주의 사항

• and 와 or 을 혼합해서 사용할 경우 () 를 사용하여 적용 우선순위를 정해야 한다.

4. selector 와 함께 쓰는 경우

• 브라우저가 특정 선택자를 지원하는 지 판별한다.

e.g. 브라우저가 자식 결합자를 지원할 때 해당 _CSS_ 를 적용한다

@supports selector(A > B) {
  // 적용할 CSS
}

참조

• @supports — CSS: Cascading Style Sheets | MDN

피드백은 언제나 환영입니다.