Skip to content

Grouping Vendor Selector

About 111 wordsLess than 1 minute

2024-01-17

Grouping Vendor Selector

It is not recommended to group selectors with different browser prefixes.

For example, styling an input placeholder requires multiple selectors per browser.

This is because, according to W3C, if one of the selectors in a selector group is invalid, it will invalidate all selectors in the entire group.

/* Please don't do this */
input::-webkit-input-placeholder,
input:-moz-placeholder {
  color: #222;
}

Instead, do this:

input::-webkit-input-placeholder {
  color: #222;
}

input:-moz-placeholder {
  color: #222;
}