How do browsers handle unrecognized at-rules?


Tags: css,css3,cross-browser

Problem :

CSS at-rules (e.g., @import) have existed since CSS2. New rules are slowly being added to CSS3 such as @supports with varying levels of browser support. How do the major browsers handle unsupported rules they don't recognize? Are they just ignored? Or are they treated as syntax errors?

E.g., if I were to use the @supports at-rule which is not supported by any version of IE, would IE fail with a syntax error, or would it be silently ignored?

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


Solution :

The CSS 2.1 spec says

4.2 Rules for handling parsing errors

At-rules with unknown at-keywords.

User agents must ignore an invalid at-keyword together with everything following it, up to the end of the block that contains the invalid at-keyword, or up to and including the next semicolon (;), or up to and including the next block ({...}), whichever comes first.

For example, consider the following:

@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  h1 { color: red }
}
h1 { color: blue }

The @three-dee at-rule is not part of CSS 2.1. Therefore, the whole at-rule (up to, and including, the third right curly brace) is ignored. A CSS 2.1 user agent ignores it, effectively reducing the style sheet to:

h1 { color: blue }

    CSS Howto..

    How to let Fancybox Next and Previous button stay visible

    How can I disable inherit in CSS?

    How to show div of google maps after hidding it

    How to select text within li using css [duplicate]

    How do you set background-color rgba on the body with background-image also?

    How to make CSS animation not reverse after finishing? Example inside

    How to resize DIV to less than its initial width & height?

    How is percentage calculated when using it for margin and padding?

    CSS HTML How to make a larger image than div display in full in div

    How to center CSS-shapes within a wrapper in a row

    How to set the CSS styles of the image to fit bootstrap width

    How to display a custom css animation with jquery and fall back to just show() if not supported?

    How to avoid universal Rule CSS Asterisk(*)?

    How to center a container and make webpage fit on mobile?

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How to style a button's font in CSS?

    how to affect an element's width by one child element but not others using CSS

    How to scale a .svg being the background in a div?

    How to format text in input box with css

    How to add css for div tag and Panel in asp

    Use anchors and :target for navigation. How to show first layer by default

    How to change placeholder color for number input? (Firefox)

    How to create border corner spacing in CSS

    How to do a webkit css endless rotation-animation.

    how to make an odd shaped html/css menu?

    How to give slide down effect when hover?

    How to change Polymer(1.0) paper-toolbar background colour?

    How to set padding-left to my custom textbox in css?

    How to handle javascript & css files across a site?

    Angular: How to alternate CSS classes for a list, with more than 2 classes?