supports 명령어

@supports 명령어는 브라우저가 지원하는 기능을 고려하여 요소에 스타일을 지정합니다. 이 명령어에서는 논리 연산자 not, and, or를 사용하여 조건을 만들 수 있습니다.

문법

css@supports 조건 {
  
}

예시

브라우저가 display 속성 값으로 flex를 지원하는 경우에만 해당 텍스트가 포함된 단락이 표시되고 글꼴 색상이 파란색으로 설정되도록 조건을 지정해 보겠습니다:

html<p class="yes">귀하의 브라우저는 display: flex를 지원합니다.</p>
<p class="no">귀하의 브라우저는 display: flex를 지원하지 않습니다.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

참고 항목