CSS 심화 - @supports

@supports

주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공한다. 이를 기능 쿼리(feature query)라고 부른다.

사용법

@supports (기능) {
	스타일
}

아래 예제는 현재 브라우저가 backdrop-filter: blur를 지원하면 해당 속성을 적용하고
지원하지 않으면 background-image 속성으로 그라데이션을 넣는 코드이다.

@supports (backdrop-filter: blur(10px)) {
  .container {
    backdrop-filter: blur(10px);
  }  
}
@supports not (backdrop-filter: blur(10px)){
  .container {
    background-image: linear-gradient(orange, royalblue);
  }
}

and, or 연산자를 활용하여 조건을 추가할 수 있다.

.container {
  width: 200px;
  height: 200px;
  border: 4px solid;
}

/* 브라우저가 backdrop-filter: blur(10px)을 지원하면 적용 */
@supports (backdrop-filter: blur(10px)) {
  .container {
    backdrop-filter: blur(10px);
  }  
}

/* 브라우저가 backdrop-filter: blur(10px)을 지원하지 않으면 적용 */
@supports not (backdrop-filter: blur(10px)){
  .container {
    background-image: linear-gradient(orange, royalblue);
  }
}

/* 브라우저가 grid와 flex를 둘 다 지원하면 적용 */
@supports (display: grid) and (display: flex) {
  .container {
    display: grid;
  }
  .container .item {
    display: flex;
  }
}

/* 브라우저가 grid와 flex를 둘 다 지원하지 않으면 적용 */
@supports not ((display:grid) and (display: flex)) {
  .container {
    float: left;
  }
  .container .item {
    text-align: center;
    line-height: 100px;
  }
}

/* 브라우저가 grid나 flex 둘 중 하나만 지원해도 적용 */
@supports (display: grid) or (display: flex) {
  .container {
    width: 500px;
  }
}

/* 브라우저에서 해당 변수 할당문이 제대로 실행될 수 있으면 적용 */
/* 기능 부분에 작성 된 내용은 동작이랑 상관 없음 (지원하는지 유무만 확인) */
@supports (--color-primary: orange) {
  .container {
    border: 10px solid var(--color-primary, orange);
  }
}

/* 브라우저에서 해당 변수 할당문이 제대로 실행될 수 없으면 적용 */
@supports not (--color-primary: orange) {
  .container {
    border: 10px solid #ff0000;
  }
}

/* :dir 가상 클래스 선택자를 사용할 수 있으면 적용 */
/* selector: 해당 선택자를 사용할 수 있는지 확인 */
@supports (selector(:dir(ltr))) {
  .container:dir(rtl) {
    color: red;
    font-size: 50px;
  }