Why do selectors with prefixes in the same rule not work?

Question

For example if I do this to let the element that is in fullscreen with height and width equal 100% it does not work:

:fullscreen,
:full-screen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
}

But if I separate it like this it works:

:fullscreen {
    width: 100% !important;
    height: 100% !important;
}

:full-screen {
    width: 100% !important;
    height: 100% !important;
}

:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
}

:-moz-full-screen {
    width: 100% !important;
    height: 100% !important;
}

:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
}

Same with other selectors, if I do this doesn’t work:

::-webkit-input-placeholder, /* Chrome/Opera/Safari */
::-moz-placeholder, /* Firefox 19+ (com ::) */
:-moz-placeholder, /* Firefox 18- (com :) */
:-ms-input-placeholder { /* IE 10+ */
  color: #f00;
}

<input placeholder="testando">

But separating works:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #f00;
}
::-moz-placeholder { /* Firefox 19+ (com ::) */
  color: #f00;
}
:-moz-placeholder { /* Firefox 18- (com :) */
  color: #f00;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #f00;
}

<input placeholder="testando">

Answer 1

These are 3 selectors a, b, c {}, a group of selectors is called a "rule" (Rule), when one of the selectors within a rule is invalid then the entire "rule" is discarded.

This is reported in https://www.w3.org/TR/selectors4/#Logical-Combination, in this passage:

Warning: The equivalence is true in this example because all the selectors are Valid selectors. If just one of These selectors Were invalid, the entire selector list would be invalid. This would invalidate the Rule for all three Heading Elements, whereas in the former case only one of the three individual Heading Rules would be invalidated.

That is, if only one of the selectors is invalid, the entire list of selectors will be invalid, for example, this:

• Not grouped (selectors in different rules):

  h1 { font-family: sans-serif }
  h2..foo { font-family: sans-serif }
  h3 { font-family: sans-serif }
  

• Grouped (selectors in the same rule):

  h1, h2..foo, h3 { font-family: sans-serif }
  

Both above are considered different despite achieving the same result. In the rule grouped (h1, h2..foo, h3) the h2..foo is invalidated by discarding the whole rule, but when the selectors are not grouped, only the rule h2..foo will be discarded.

For example if you run in modern browsers this:

:fullscreen,
:full-screen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
}

The :fullscreen is valid, but the rest are invalid, so they discard the whole rule and so none of the selectors work.

If you rotate the selector on IE11 :-ms-fullscreen is recognized, but as this in a group with other selectors not supported by IE11, then the whole rule will be discarded.

So it is for this reason that when there are invalid selectors for a particular browser that we should separate into different rules.