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

Question

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

Navigation

#1 by (5 votes)

3

For example if I do this to leave the element that is in fullscreen with height and width equal to 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 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;
}

The same thing happens with other selectors; if I do this does not 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">

css seletores

asked by anonymous 19.03.2017 / 20:37

1 answer

Is there a problem with adding a bit of bootstrap on the page that is not? Algorithm to calculate the sum of the numbers typed in portugol

score 5 · Accepted Answer

This is informed at link , in this excerpt:

Warning: The equivalence is true in this example because all the selectors are valid selectors. If only 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 one of the three individual heading rules would be invalidated.

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

Ungrouped (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, although achieving the same result. In the grouped rule ( a, b, c {} ) the h1, h2..foo, h3 is invalid by discarding the entire rule, but when the selectors are not grouped, only the h2..foo rule 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 h2..foo is valid, but the rest are invalid, so they all rule out and so none of the selectors work.

If running in IE11 the :fullscreen selector is recognized, but as it is 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 given browser we must separate them into different rules.