Search code examples
cssfallback

How is a CSS rule evaluated, with respect to duplicate (fallback) attributes?

How do web browsers interprete duplicate attributes in a CSS Rule?
Here an example what is meant:

body
{
    background-color:red;
    background-color:blue;
    background-color:rgba(0,0,255,1);
}

Important aspect to me:

  1. Is is valid to define a attribute multiple times?

  2. Is the rule evaluated so that the value of the attribute is set to the last value (last - as in appearing later in the rule's text) encountered is used? By experimenting I see that in the example above above rgba(0,0,255,1) is used, but is this coincidence or defined?

  3. What happens if a value is not understood by the browser? Will it "fallback" to the last value seen before, still understood or become undefined because of the not understood last value?

    For instance if a browser would not support rgba(r,g,b), but instead red and blue. would the background-color then be set to blue as it was the last value (sort of a fallback), or will it fail completely?

  4. (Assuming there is a defined behaviour to use the last "understood" value), will this be valid for all understood attributes? (Microsoft IE6 Apple's Safari Browser for instance is not implementing all touch-action values , only auto and manipulation, could I hence do the following: 

body
{
    /* first set to manipulation, to at*/
    /* least disable double-tap-zoom on iOS Safari*/
    touch-action:manipulation;
    /* then set it to the actually desired */
    /* value of pan-y, supported by other */
    /* modern browsers */
    touch-action:pan-y;
}
Solution

  • You are right on your assumptions. According to MDN: CSS If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error.

    Read here: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS