CSS Rules

Editing

@supports

주어진 하나 이상의 CSS 기능을 웹브라우저가 지원하는 지에 따른 스타일 선언을 할 수 있도록 해준다.

설명

@supports 규칙은 기능 쿼리(feature query)라고 부른다. 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있다. 또한 조건의 논리(and, or, not) 조합도 가능하다.

선언

<@supports>

DEVDIC-Specified Data Types

@supports 앳룰(at-rules)의 구문 형식을 나타낸다.

  • CSS Conditional Rules Module Level 3
    @supports <supports-condition> { <stylesheet>
    }
    Example

    display 속성의 flex 값을 지원하는 경우에  플렉스 레이아웃 처리를 시도한다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <stylesheet>

    규칙 목록을 나타낸다. <rule-list>와 동일해 보이는데 이를 사용하는 블록은 특정 컨텍스트로 제한되지 않는 모든 규칙을 기본적으로 허용한다는 점을 제외하면 실제로 동일하다.

    정규화된 규칙으로서 구성 요소 값의 목록으로 구성되며 서두와 단순한 { }으로 구성된 블록 형식을 갖는다. CSS에서 대부분의 정규화된 규칙은 스타일 규칙이며 서두는 선택자(selector)이고 { } 블록은 속성의 선언 목록을 갖는다.

  • <supports-condition>

    하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.

    • CSS Conditional Rules Module Level 3
      not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
    Details

    포함된 타입

    • <supports-in-parens>

      하위 표현식의 불리언(boolean)으로 평가되는 쿼리 결과를 나타낸다.

      • CSS Conditional Rules Module Level 3
        ( <supports-condition> ) | <supports-feature> | <general-enclosed>
      Details

      포함된 타입

      • <general-enclosed>

        작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.

        • Media Queries Level 5
          [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
        Details

        포함된 타입

        • <any-value>

          <declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.

          • CSS Syntax Module Level 3
            <any-value>?
        • <function-token>

          0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.

          Function Token Railroad Diagrams

          <ident-token> (

          Details

          포함된 타입

          • <ident-token>

            Ident Token Railroad Diagrams

            -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
        • <ident>

          식별자로 사용되는 임의의 문자열을 나타낸다.

      • <supports-condition>

        하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.

        • CSS Conditional Rules Module Level 3
          not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<supports-condition>]
      • <supports-feature>

        하나의 논리 결과를 갖는 <supports-decl>를 나타낸다.

        • CSS Conditional Rules Module Level 3
          <supports-decl>
        • CSS Conditional Rules Module Level 4
          <supports-selector-fn> | <supports-decl>
        Details

        포함된 타입

        • <supports-decl>

          유저 에이전트(user agent)가 괄호 안의 선언을 지원하는 여부에 따라 불리언(boolean)으로 나타낸다.

          • CSS Conditional Rules Module Level 3
            ( <declaration> )
        • <supports-selector-fn>

          유저 에이전트가 selector() 함수의 인수로 제공된 선택자(selector)의 지원 여부에 따라 불리언(boolean)으로 평가한 결과를 나타낸다.

          • CSS Conditional Rules Module Level 4
            selector( <complex-selector> )
          Details

          관련 함수

          모든 함수를 표시하지 않을 수도 있다.

    사용되는 키워드

    • and

      and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.

    • not

      not 다음에 나오는 조건에 대한 평가를 부정한다.

    • or

      or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.

관련 함수

모든 함수를 표시하지 않을 수도 있다.

버전 명세

Modules
Module NameStatusSummary
CSS Conditional Rules Module Level 3

Last review date: 2023-3-24

지원 웹브라우저