CSS 규칙 @supports

CSS는 다양하고 편리한 최신 기능들이 업데이트되지만, 모든 브라우저를 다 지원하지 못하는 문제가 있다.

@supports

@supports문법도 at@를 앞에 붙여 사용하는 규칙이며, 특정 CSS 속성을 브라우저가 지원하는지 조건을 확인한 후에 해당 조건이 유효할 경우 선언된 css를 적용시켜주는 조건부 규칙 기능이다. 기능쿼리(feature query)라고 한다.

@supports (조건부) {선언부}

사용 예시

flex를 사용한 레이아웃에서 flex를 지원하지 않는 브라우저에 나타낼 때

기본 CSS에서 float 속성으로 요소를 배치한 다음, @supports구문으로 display:flex를 지원하는 브라우저일 경우엔 flex로 배치되도록 만든다.

 

레이아웃 배치 예시

 

/* 기본 css 적용 구문 */
/* flex를 지원하지 않는 브라우저에는 적용되지 않음(무시) */
ul {
    display: flow-root;
}

li {
    float: left;
    margin: 10px;
}

/* flex를 지원하는 브라우저에 적용 */
@supports (display: flex) {
    ul {
        display: flex;
    }
}

 

@supports (속성 : 속성값) {선언부}

기본적으로는 위와 같이 일반 CSS가 지원될 경우에 선언부를 실행시키지만, 부정(not), 논리곱(and), 논리합(or)을 함께 사용하여 지원하지 않을 경우 혹은 여러가지의 조건이 부합해야하는 경우의 선언부를 적용하도록 할 수 있다.

부정(not)

조건부에 not을 붙여 해당 조건이 아닐 경우에 선언부를 적용시킨다.

@supports not (속성 : 속성값) {선언부}

 

논리곱(and)

두 가지 이상의 조건에 부합할 경우에 선언부를 적용시킨다.

@supports (속성 : 속성값) and (속성 : 속성값) {선언부}

논리합(or)

여러가지 조건 중에 하나라도 참을 반환할 경우 선언부의 css를 적용시킨다.

@supports (속성 : 속성값) or (속성 : 속성값) {선언부}

 

---

at-rules

CSS에서 at규칙이란 앞에 'at(@)'기호를 붙여 사용하는 규칙이다.
대표적으로 가장 많이 사용되는 at rule에는 @import,@media,@font-face,@keyframes 등이 있다.

 

• @import : 외부 CSS파일을 불러올 때 사용한다.
• @media : 미디어 쿼리. 단말기의 유형, 해상도, 브라우저에 반응하여 조건에 맞는 CSS를 적용시킨다.
• @font-face : 웹 폰트를 정의 또는 불러올 때 사용한다.
• @keyframes : CSS 애니메이션을 정의할 때 사용한다.