CSS @supports 규칙을 정리하면서

CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법

기능쿼리라고 부른다.

 

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}
/*display: flex를 사용할 수 있으면 아래 코드를 사용하고 아니라면 사용하지않는다.*/
@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

 

 

Not 연산자

연산자 not는 표현식 앞에 위치하여 표현식을 부정합니다. 브라우저의 transform-origin속성이 10em 10em 10em 유효하지 않은 것으로 간주되면 다음은 true를 반환합니다.

 

@supports not (display : grid) {
 div {
 	float : right;
 }
}

- 지원되지 않는경우 중괄호 안의 코드를 사용한다.

 

 

and 연산자

연산자 and는 두 개의 더 짧은 표현식을 결합하여 새로운 표현식을 만듭니다. 더 짧은 표현식이 모두 true인 경우에만 true를 반환합니다 . 다음 예에서는 두 개의 더 짧은 표현식이 동시에 true인 경우에만 true를 반환합니다.

 

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

or 연산자

연산자 or는 두 개의 더 짧은 표현식을 분리하여 새로운 표현식을 만듭니다. 더 짧은 표현식 중 하나 또는 둘 다 true인 경우 true를 반환합니다 . 다음 예에서는 두 개의 짧은 표현식 중 하나 이상이 true인 경우 true를 반환합니다.

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

 

selector() 

이 함수는 브라우저가 지정된 선택기 구문을 지원하는지 평가합니다. 다음 예제에서는 true를 반환하고 브라우저가 하위 결합자를 지원하는 경우 CSS 스타일을 적용합니다 .

 

@supports selector(h2 > p) {
}