supports 명령어
@supports 명령어는 브라우저가 지원하는 기능을 고려하여
요소에 스타일을 지정합니다.
이 명령어에서는 논리 연산자 not,
and, or를 사용하여 조건을 만들 수 있습니다.
문법
@supports 조건 {
}
예시
브라우저가 display 속성 값으로 flex를 지원하는 경우에만
해당 텍스트가 포함된 단락이 표시되고 글꼴 색상이
파란색으로 설정되도록 조건을 지정해 보겠습니다:
<p class="yes">귀하의 브라우저는 display: flex를 지원합니다.</p>
<p class="no">귀하의 브라우저는 display: flex를 지원하지 않습니다.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
참고 항목
-
CSS 파일을 가져오는 명령어
@import -
미디어 유형에 대한 스타일을 지정하는 명령어
@media -
스타일 우선순위를 지정하는 명령어
!important
