Using mixins for browser specific CSS properties

João Horta
Faber .dev
Published in
1 min readNov 27, 2015

When styling placeholders or defining transitions, browser specific selectors and properties make every CSS structure a mess.

Duplicated code, difficult to memorize property names, pollution in a clean stylesheet.

A simple solution was shown to me by Łukasz Korecki: using mixins.

For specific selectors (placeholder example):

In the mixins stylesheet:

In your stylesheet:

For specific properties (transition example):

In the mixins stylesheet:

In your stylesheet:

Mixins like these ones can be used with other browser specific selectors or properties and will save a lot of code.

Issues

This last type kind of mixin will not work with property values separated by commas, for example:

--

--