What happens when browsers encounter unfamiliar at-rules?

Question

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they flag them as syntax errors?

For example, if I were to implement the @supports at-rule in a way that is not supported by any version of Internet Explorer, would IE throw a syntax error, or would it quietly overlook it?

@supports (pointer-events: none) {
  ...
}

css cross-browser

Answer 1

Answer №1

In accordance with the CSS 2.1 specification

4.2 Rules for dealing with parsing errors

Unknown at-keyword at-rules.

It is prescribed that user agents should disregard an invalid at-keyword along with any subsequent content, up until the end of the block containing the invalid at-keyword, or up to and including the next semicolon (;), or up to and including the next block ({...}), whichever happens first.

For instance, take a look at the following:
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  h1 { color: red }
}
h1 { color: blue }
The @three-dee at-rule does not conform to CSS 2.1. Consequently, the entire at-rule (up to, and including, the third right curly brace) is ignored. A CSS 2.1 user agent will overlook it, effectively simplifying the style sheet to:
h1 { color: blue }

Answer 2

In accordance with the CSS 2.1 specification

4.2 Rules for dealing with parsing errors

Unknown at-keyword at-rules.

It is prescribed that user agents should disregard an invalid at-keyword along with any subsequent content, up until the end of the block containing the invalid at-keyword, or up to and including the next semicolon (;), or up to and including the next block ({...}), whichever happens first.

For instance, take a look at the following:
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  h1 { color: red }
}
h1 { color: blue }
The @three-dee at-rule does not conform to CSS 2.1. Consequently, the entire at-rule (up to, and including, the third right curly brace) is ignored. A CSS 2.1 user agent will overlook it, effectively simplifying the style sheet to:
h1 { color: blue }

What happens when browsers encounter unfamiliar at-rules?

Answer №1

4.2 Rules for dealing with parsing errors

Similar questions

Enhancing transparency with a touch of background color

Getting the next sibling element with Selenium: A complete guide

Use CSS to insert a solid rectangle into the contents of a table cell

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Adjust the content size to 100% based on the quantity of items in a row

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Is it possible that the Divi blurb module fails to extend to the full height of the row?

How can I arrange the ng-class based on the clicked item's order?

Create various designs for a section of a webpage

The transition feature is not functioning properly in Firefox

In what ways can the accessibility of a website be impacted by using CSS

Tips for employing 'live CSS' in Rails

Error: Unable to retrieve the value of a null property | ReactJS |

Semantic UI table with rowspan feature

Employ jQuery for toggling CSS rotation

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

Include a parent class within the style tags in your CSS code

New feature that allows color change to be black or white depending on background color

Ways to display an icon with an underline effect upon hovering over text