Using mixins for browser specific CSS properties
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: