Grouping vendor selectors

It's not recommended to group selectors that are meant to work with different browsers. For example, styling an input's placeholder needs multiple selectors per the browser. If we group the selectors, the entire rule will be invalid, according to w3c.

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

Instead, do this.

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

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

Support Defensive CSS

Do you like the content? You can buy me a cup of coffee. Thank you!

About the author

Ahmad Shadeed

Ahmad is a UX designer and front-end developer from Palestine. He enjoys working on challenging design and front-end development projects. He wrote a book on debugging CSS, writes extensively on CSS, Accessibility, and RTL (right to left) text styling.