CSS @supports 규칙

정의와 사용법

CSS @supports 규칙은 브라우저가 특정 CSS 기능을 지원하는지 테스트하고 지원하지 않으면 대체 스타일을 정의합니다.

예제

브라우저가 display: grid를 지원하면, 이를 적용합니다 @supports 규칙 내의 CSS. 지원하지 않으면, 이를 적용합니다 @supports 규칙 외의 .container 클래스 스타일:

/* 브라우저가 display: grid를 지원하지 않으면 이 CSS를 사용합니다 */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* 브라우저가 display: grid를 지원하면 이 CSS를 사용합니다 */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

직접 시험해 보세요

CSS 문법

@supports (supports-condition) {
  /* 조건이 참이면 이 CSS를 적용합니다 */
}

속성 값

값 설명
supports-condition

이름-값 쌍(property: value) 또는 function() 문법으로 표현된 조건을 정의합니다.

조건은 and, or, 또는 not로 조합할 수 있습니다.
선택자()

function() 문법입니다. 지정된 선택자 문법을 지원하는지 확인합니다.

예를 들어, @supports selector(h2 > p) 브라우저가 자식 조합자를 지원하면 true를 반환하고 CSS 스타일을 적용합니다.
font-tech()

function() 문법입니다. 지정된 폰트 기술을 지원하는지 확인합니다.

예를 들어, @supports font-tech(color-svg) 브라우저가 SVG 다색 테이블을 지원하면 true를 반환하고 CSS 스타일을 적용합니다.
font-format()

function() 문법입니다. 지정된 폰트 형식을 지원하는지 확인합니다.

예를 들어, @supports font-format(woff) 브라우저가 WOFF 1.0을 지원하면 true를 반환하고 CSS 스타일을 적용합니다.

브라우저 지원

표格에서의 숫자는 해당 @규칙을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

@규칙 크롬 에지 파이어폭스 사파리 오페라
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
선택자() 83 83 69 14.1 69