CSS
기능 쿼리

통사론

• @supports [조건] {/ * 적용 할 CSS 규칙 * /}

매개 변수

비고

기본 @ 지원 사용

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

구문에 관해서 @supports 는 @media 와 매우 유사하지만 화면 크기와 방향을 감지하는 대신 @supports 가 브라우저가 주어진 CSS 규칙을 처리 할 수 ​​있는지 여부를 감지합니다.

@supports (flex) 와 같은 일을하는 대신 규칙이 @supports (display: flex) .

체인 감지 기능 탐지

한 번에 여러 기능을 감지하려면 and 연산자를 사용하십시오.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

또한 or 연산자와 not 연산자가 있습니다.

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

궁극적 인 @supports 환경을 얻으려면 괄호로 논리 표현식을 그룹화하십시오.

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

브라우저가 작동하는 경우 작동합니다.

1. display: block 지원 display: block 및 zoom: 1 , 또는
2. display: flex 지원 display: flex AND NOT display: table-cell 또는
3. transform: translateX(1px) 지원 transform: translateX(1px) .