supports(<supports()>)

포함된 타입

• <declaration>

  구문상에서 선언을 나타낸다.

• <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

        Details

        포함된 타입

        • <ident-token>

          Ident Token Railroad Diagrams

      • <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

        관련 함수

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

        • selector(<complex-selector>)

          유저 에이전트가 선택자를 지원하는지 여부를 평가한다. 지원하는 경우 true, 그렇지 않은 경우 false를 반환한다.

          • @supports selector(input:autofill) { <stylesheet>
            }

            Example
          <complex-selector>필수

          • Selectors Level 4

            <compound-selector> [ <combinator>? <compound-selector> ]*

          Details

          포함된 타입

          • <combinator>

            결합자는 두 개 이상의 <compound-selector>가 결합하는 관계를 나타낸다. 결합자는 복합적으로 사용될 수 있다. 결합 관계에서 맨 끝쪽의 선택자에 일치하는 요소가 스타일 적용 대상이 된다.

            기호	결합 관계	설명	사용 예
            ">"	부모 > 자식	두 요소 사이의 하위 관계를 나타낸다.	.header > span
            "+"	형제 + 다음 형제	동등 관계를 가지며 바로 뒤의 요소를 나타낸다.	h1.title + h2
            "~"	형제 ~ 이후의 모든 형제	동등 관계를 가지며 이후의 모든 요소를 나타낸다.	h1 ~ pre
            "||"	기준 열(column) || 대상 열(column)	기준 요소가 속하는 열(column)에 대상 열(column)이 속해 있는 경우를 나타낸다. 현재 웹브라우저의 지원 현황을 확인할 필요가 있다.	col.selected || td

            • Selectors Level 4

              '>' | '+' | '~' | [ '|' '|' ]

          • <compound-selector>

            • Selectors Level 4

              [ <type-selector>? <subclass-selector>*[ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

            Details

            포함된 타입

            • <pseudo-class-selector>

              • Selectors Level 4

                ':' <ident-token> |':' <function-token> '(' <any-value> ')'

              Details

              포함된 타입

              • <function-token>

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

                Function Token Railroad Diagrams

                Details

                포함된 타입

                • <ident-token>

                  Ident Token Railroad Diagrams

              • <ident-token>

                Ident Token Railroad Diagrams

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<ident-token>]

              • <any-value>

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

                • CSS Syntax Module Level 3

                  <any-value>?

            • <pseudo-element-selector>

              • Selectors Level 4

                ':' <pseudo-class-selector>

              Details

              포함된 타입

              • <pseudo-class-selector>

                • Selectors Level 4

                  ':' <ident-token> |':' <function-token> '(' <any-value> ')'

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                타입에 대한 자세한 설명은 다음 링크를 참조하라.[]

            • <subclass-selector>

              • <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>

              Details

              포함된 타입

              • <attribute-selector>

                • Selectors Level 4

                  '[' <wq-name> ']' |'[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

                Details

                포함된 타입

                • <attr-modifier>

                  • Selectors Level 4

                    i | s

                • <attr-matcher>

                  연산자	형식	선택자 대상	예
                  =	[att=val]	애트리뷰트(attribute)의 값이 완전히 일치해야 한다.	[type="email"]
                  ~=	[att~=val]	애트리뷰트(attribute) 값의 공백으로 구분된 토큰 목록중에 "val" 이 포함되어야 한다. "val"에 공백이 포함되어 있거나 빈 문자열이면 무효가 된다.	[class~="my"]
                  |=	[att|=val]	애트리뷰트(attribute)의 값이 정확히 "val"이거나 "val" 바로 뒤에 "-"(U+002D)으로 시작해야 한다. 애트리뷰트(attribute)의 값에 하이픈이 포함된 경우에 활용도가 높다.	a[hreflang|="en"]
                  ^=	[att^=val]	애트리뷰트(attribute)의 값이 "val"을 접두사로 시작해야 한다. "val"이 빈 문자열이면 무효가 된다.	[type^="image/"]
                  $=	[att$=val]	애트리뷰트(attribute)의 값이 "val"을 접미사로 끝나야 한다. "val"이 빈 문자열이면 무효가 된다.	a[href$=".html"]
                  *=	[att*=val]	애트리뷰트(attribute)의 값에 하위 문자열 "val"이 하나 이상 포함되어야 한다. "val"이 빈 문자열이면 무효가 된다.	[title*="hello"]

                   

                  • Selectors Level 4

                    [ '~' | '|' | '^' | '$' | '*' ]? '='

                • <wq-name>

                  • Selectors Level 4

                    <ns-prefix>? <ident-token>

                    애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.

                  Details

                  포함된 타입

                  • <ns-prefix>

                    • Selectors Level 4

                      [ <ident-token> | '*' ]? '|'

                    Details

                    포함된 타입

                    • <ident-token>

                      Ident Token Railroad Diagrams

                  • <ident-token>

                    Ident Token Railroad Diagrams

                    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<ident-token>]

                • <ident-token>

                  Ident Token Railroad Diagrams

                • <string-token>

                  String Token Railroad Diagrams

              • <class-selector>

                • Selectors Level 4

                  '.' <ident-token>

                  class 값이 "mybox"인 요소를 선택자로 사용한다.
                Details

                포함된 타입

                • <ident-token>

                  Ident Token Railroad Diagrams

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<ident-token>]

              • <id-selector>

                • Selectors Level 4

                  <hash-token>

                  id 애트리뷰트의 값이 "mybox"인 요소를 선택자로 사용한다.
                Details

                포함된 타입

                • <hash-token>

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

                  Hash Token Railroad Diagrams

                  • #[a-zA-Z0-9_-]

              • <pseudo-class-selector>

                • Selectors Level 4

                  ':' <ident-token> |':' <function-token> '(' <any-value> ')'

                Details

                포함된 타입

                • <function-token>

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

                  Function Token Railroad Diagrams

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<function-token>]

                • <ident-token>

                  Ident Token Railroad Diagrams

                • <any-value>

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

                  • CSS Syntax Module Level 3

                    <any-value>?

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<any-value>]

            • <type-selector>

              • Selectors Level 4

                <wq-name> | <ns-prefix>? '*'

              Details

              포함된 타입

              • <ns-prefix>

                • Selectors Level 4

                  [ <ident-token> | '*' ]? '|'

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                타입에 대한 자세한 설명은 다음 링크를 참조하라.[]

              • <wq-name>

                • Selectors Level 4

                  <ns-prefix>? <ident-token>

                  애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

                타입에 대한 자세한 설명은 다음 링크를 참조하라.[]

  사용되는 키워드

  • and

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

  • not

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

  • or

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