Geek Answers Handbook

CSS rule grouping @keyframes

I fully understand that you cannot group an animation keyframe selector, for example

@keyframes, @-moz-keyframes, @-webkit-keyframes { /*do something*/ }

and what you absolutely SHOULD do

 @keyframes { /*do something*/ } @-moz-keyframes { /*do something*/ } @-webkit-keyframes { /*do something*/ }

I know that there are pre-processors that can do all this for me. But I'm more interested in the reason why this is so.

My google-fu is failing. It seems that I always direct me to the stackoverflow page telling someone that they "cannot" do this, and they should share them or tell people about the preprocessors. Or I go to this terrible site and read things like

This is obviously not true in this case. If someone can direct me to an article or explain to me why , it cannot be grouped, it would be very useful.

+6
source share
2 answers

Keep in mind that with rules and selectors there are completely different things.

At-rules are described in this section of the CSS2.1 specification , which states that the at rule consists of one keyword followed by a statement (whether it be a statement with a trailing semicolon or a block). As for the CSS parser, you have a set of three separate at rules, one prefix for each provider, and one rule without prior fix for the standard one.

More suitable for rules is the set of rules or style rules described here . A set of rules consists of a selector and a declaration block (containing style declarations). This is similar to the contents of the at-rule, as described above. It also means that the selector is only part of the ruleset.

Certain at rules allow you to enter comma-separated values ​​in your preludes, for example @media :

 @media screen, projection { /* Styles for both screen and projection media */ }

But instead of grouping the entire at-rules, grouping occurs inside the value that appears after the at keyword at the beginning of the rule.

This @media can be broken down into two separate rules:

 @media screen { /* Styles for screen media */ } @media projection { /* Styles for projection media */ }

Note that each rule has its own @media keyword.

Similarly, when you group multiple selectors into one rule, you have one style rule. The part that is grouped is a selector; Everything in the following declaration block applies to all selectors listed in the group:

 .foo, .bar { /* Styles that apply to both .foo and .bar elements */ }

And when you expand it, it becomes two sets of rules:

 .foo { /* Styles that apply to .foo elements */ } .bar { /* Styles that apply to .bar elements */ }
+6
source

because of

When the user agent cannot parse the selector (i.e., it is not valid with CSS 2.1), it should ignore the selector and the next declaration block (if any).

found http://www.w3.org/TR/CSS21/syndata.html#rule-sets

Thus, each vendor prefix makes the entire rule not subject to analysis for all other providers.

+2
source

More articles:


All Articles