CSS - @supports

---

---

The CSS @supports rule allows you to define CSS declarations based on a browser's support for specific CSS features.

The @supports at-rule must be placed at the top-level of the code or should be nested within any other conditional group at-rule.

Syntax

The @supports at-rule includes block of statements with supports condition. This condition is defined by one or more name-value pairs.(ex-, <property> : <value>)

@supports (<supports-condition>) {
/* Apply the CSS within this block if the condition is true. */
}

Here, <supports-condition> is a feature query that checks whether a browser supports a specific CSS property and value. If the condition is true, the styles inside the @supports block will be applied; otherwise, they will be ignored.

Conditions can be combined with conjunctions (and), disjunctions (or), and/or negations (not).

@supports (<supports-condition>) and (<supports-condition>) {
/* Apply the CSS within this block if the condition is true. */
}

The precedence of operators may be indicated by parentheses. Supporting conditions may take either a <property>: <value> declaration structure or a <function()> syntax.

The following sections explain the use of each type of supporting condition.

Declaration Syntax

The syntax for declarations checks whether a browser supports the specified <property>: <value> declaration, which must be enclosed in parentheses.

@supports (transform-origin: 10px 10px) {
}

Function Syntax

If a browser accepts values or expressions inside the function, it is verified by the function syntax. The following sections provide descriptions of the functions that the function syntax supports.

Selector

This function examines if a browser supports the given selector syntax. If the browser supports descendant combinator, the following example returns true and applies the CSS styling.

@supports selector(div p) {
}                                   

font-tech()

This function examines if a browser supports the given font technology for displaying and layout. If the browser supports color-colrv0 font technology, the following example returns true and applies the CSS styling.

@supports font-tech(color-COLRv0) {
}

The font technologies (<font-tech>), which can be requested with the font-tech() function, are described in the table below along with the color font technologies (<color-font-tech>), font feature technologies (<font-features-tech>), and other available font technologies:

font-format()

This function examines if a browser supports rendering and arranging the given font format. If the browser supports the svg font format, the following example returns true and applies the CSS style:

@supports font-format(svg) {
}

The readily accessible formats (<font-format> values) that can be queried using this function are listed in the following table:

The not operator

The not operator precedes an expression, negating it. The following syntax returns true, when the browser's transform-origin property identifies 15px 15px 15px as not valid:

@supports not (transform-origin: 15px 15px 15px) {
}

The not operator can be used with a declaration of any complexity, i.e., along with other operators, such as and and another not.

Note: At the top level the not operator is not required to be enclosed between two parentheses, but when the not operator is combined with other operators, like and and or, it is a must to enclose it in between the parentheses.

The and operator

The operator and combines two shorter expressions to form a new expression. It is evaluated as true only when both shorter expressions are also true.

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

Multiple conjunctions can be placed together without requiring additional parentheses.

The or operator

The or operator forms a new expression by joining two shorter expressions by disjunction. It is evaluated as true when one or both shorter expressions are true.

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

Multiple disjunctions can be combined without the need for additional parentheses.

Note: While using and and or operators, the parentheses must be used correctly to specify the order in which they needs to be applied. In case the parentheses are not used appropriately, the condition will be considered invalid and the complete rule will be ignored.

CSS @supports - Test Support For CSS Selector

The following example uses CSS @supports at-rule to conditionally apply the CSS styling based on the browser's support for certain selectors.

:has() Selector:

• .list:has(> li > ul): Targets unordered lists with direct child list items containing nested unordered lists, applying specific styles when :has() is supported, i.e., background-color: lightblue; padding: 20px;.

@supports Rule:

• @supports selector(:has(> li > ul)) and (background-color: lightblue): Applies the styling of color: green; font-weight: bold; when both the expressions are true.

:is() Selector:

• .container :is(h2, h3): Targets <h2> and <h3> elements within .container, applying a color style when the :is() pseudo-class is supported.

<html>
<head>
<style>
   /* This rule won't be applied in browsers that don't support :has() */
   .list:has(> li > ul) {
      /* CSS is applied when the :has(…) pseudo-class is supported */
      background-color: lightblue;
      padding: 20px;
   }
   /* Fallback for when :has() is unsupported */
   @supports selector(:has(> li > ul)) and (background-color: lightblue) {
      ul > li > ul {
      color: green;
      font-weight: bold;
      }
   }
   /* Check for support of the :is() selector */
   @supports selector(:is(h2, h3)) {
      /* Styles applied when the :is() selector is supported */
      .container :is(h2, h3) {
      color: red;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h2>@supports example</h2>
      <h3>to check selectors</h3>
      <ul class="list">
      <li>Item 1
         <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
         </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3
         <ul>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
         </ul>
      </li>
      </ul>
   </div>
</body>
</html>

CSS @supports - Test Support For CSS property

The following example tests support (by browsers) of certain CSS properties.

• In the following example, we have two @supports at-rules. The first rule checks if the browser supports the display: grid CSS property.

• If it does, the styles inside the at-rule are applied. In this case, the body element is set to display: grid, creating a grid layout with two columns and a gap of 20 pixels.

• The .box class is styled with a background color, padding, and centered text.

• The second @supports at-rule checks if the browser does not support the display: grid property.

• If it doesn't, the styles inside the rule are applied. In this case, the body element is set to display: flex, creating a flexbox layout with wrapped items and space between them.

• The .box class is styled with a background color, padding, centered text, a width of 45%, and a bottom margin.

<html>
<head>
<style>
   @supports (display: grid) {
   body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
   }
   .box {
      background-color: gray;
      padding: 20px;
      text-align: center;
   }
   }
   @supports not (display: grid) {
   body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .box {
      background-color: #fff;
      padding: 20px;
      text-align: center;
      width: 45%;
      margin-bottom: 20px;
   }
   }
</style>
</head>
<body>
   <div class="box">Box 1</div>
   <div class="box">Box 2</div>
   <div class="box">Box 3</div>
   <div class="box">Box 4</div>
</body>
</html>

CSS @supports - Test Support Of Font Technology

The example below is to test for the support of a font technology;

• In the following example, CSS @supports is used to check if the browser supports a font technology called color-COLRv1.

• This conditional rule allows the following CSS, where the font-family property is set to Brygada1918-Italic via. the @font-face at-rule, to be applied only if the browser supports the specified font technology (color-COLRv1).

• It ensures that the font Brygada1918-Italic is used selectively, depending on the browser's compatibility with the color-COLRv1 font-tech function.

<html>
<head>
<style>
   @supports font-tech(color-COLRv1) {
      @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      }
   }

   h1, p {
      font-family: "f1";
   }
</style>
</head>
<body>
   <h1>Welcome to My Website</h1>
   <p>This is an example of using a font called Brygada1918-Italic.</p>
</body>
</html>

CSS @supports - Test Support Of Font Format

The example below is to test for the support of a font format.

• In the following example, CSS @supports is used to check if the browser supports a font format called woff.

• This conditional rule allows the following CSS, where the font-face property is set to woff via. the @font-face at-rule, to be applied only if the browser supports the specified font format (woff).

• It ensures that the font SansationLight is used selectively, depending on the browser's compatibility with the woff font-format function.

<html>
<head>
<style>
   @supports font-format(woff) {
      @font-face {
         font-family: "SansationLight";
         src: url("font/SansationLight.woff") format("woff");
      }
   }

   h1, p {
      font-family: "SansationLight";
   }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using a font called SansationLight, with font-format(woff).</p>
</body>
</html>