주어진 하나 이상의 CSS 기능을 웹브라우저가 지원하는 지에 따른 스타일 선언을 할 수 있도록 해준다.
@supports
규칙은 기능 쿼리(feature query)라고 부른다. 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있다. 또한 조건의 논리(and
, or
, not
) 조합도 가능하다.
@supports <supports-condition> { <stylesheet> }
display
속성의 flex
값을 지원하는 경우에 플렉스 레이아웃 처리를 시도한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
규칙 목록을 나타낸다. <rule-list>
와 동일해 보이는데 이를 사용하는 블록은 특정 컨텍스트로 제한되지 않는 모든 규칙을 기본적으로 허용한다는 점을 제외하면 실제로 동일하다.
정규화된 규칙으로서 구성 요소 값의 목록으로 구성되며 서두와 단순한 { }
으로 구성된 블록 형식을 갖는다. CSS에서 대부분의 정규화된 규칙은 스타일 규칙이며 서두는 선택자(selector)이고 { }
블록은 속성의 선언 목록을 갖는다.
하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.
not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
하위 표현식의 불리언(boolean)으로 평가되는 쿼리 결과를 나타낸다.
( <supports-condition> ) | <supports-feature> | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?
0
개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.
not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
하나의 논리 결과를 갖는 <supports-decl>
를 나타낸다.
<supports-decl>
<supports-selector-fn> | <supports-decl>
유저 에이전트(user agent)가 괄호 안의 선언을 지원하는 여부에 따라 불리언(boolean)으로 나타낸다.
( <declaration> )
유저 에이전트가 selector()
함수의 인수로 제공된 선택자(selector)의 지원 여부에 따라 불리언(boolean)으로 평가한 결과를 나타낸다.
selector( <complex-selector> )
모든 함수를 표시하지 않을 수도 있다.
and
앞의 조건과 뒤의 조건의 평가가 모두 true
이어야 한다.
not
다음에 나오는 조건에 대한 평가를 부정한다.
or
앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true
이어야 한다.
모든 함수를 표시하지 않을 수도 있다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Conditional Rules Module Level 3 | Last review date: 2023-3-24 |