Is there a generic way to add vendor prefixes in LESS?
Notice:
The recommendation is to stop rely on this technique and consider using a dedicated prefixing tool (e.g. Autoprefixer, -prefix-free etc.). Hardcoding vendor prefixes via CSS pre-processor mixins (Less, SCSS or whatever) is a pure anti-pattern these days and considered harmful. Auto-prefixing tools will make your code clean, readable, future-proof and easily maintainable/customizable.
See for example: less-plugin-autoprefix
Original answer:
Well, currently LESS does not support "property name interpolation" so you cannot use a variable in property names. There's a hack however: How to pass a property name as an argument to a mixin in less
So if you don't mind "dummy" properties in the output CSS, here we go:
.property_(@property, @value) {
_: ~"; @{property}:" @value;
}
.vendor(@property, @value) {
.property_('-webkit-@{property}', @value);
.property_( '-khtml-@{property}', @value);
.property_( '-moz-@{property}', @value);
.property_( @property, @value);
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}
Output:
#usage {
_: ; -webkit-border-radius: 3px;
_: ; -khtml-border-radius: 3px;
_: ; -moz-border-radius: 3px;
_: ; border-radius: 3px;
_: ; -webkit-box-shadow: 10px 10px;
_: ; -khtml-box-shadow: 10px 10px;
_: ; -moz-box-shadow: 10px 10px;
_: ; box-shadow: 10px 10px;
}
Update:
Less v1.6.0 introduced Property Interpolation feature so now you don't need any hacks anymore:
.vendor(@property, @value) {
-webkit-@{property}: @value;
-khtml-@{property}: @value;
-moz-@{property}: @value;
@{property}: @value;
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}
How to autoprefix css files generated by less, in Webstorm?
There is a plugin for less which does this job without adding a watcher: https://github.com/less/less-plugin-autoprefix
After installation you can add --autoprefix="…"
to your arguments for the output in webstorms file watcher.
Dynamic prefixed keyframe generation with LESS CSS
In short, no, an interpolation of the at-rule
directive identifiers is not supported (and is not planned to be).
Well, you can get what you want with something like:
.vendorize-keyframes(dostuff, {
0% {color: tomato}
to {color: potato}
});
.vendorize-keyframes(@name, @frames) {
@-webkit-keyframes @name {@frames();}
@-moz-keyframes @name {@frames();}
@-o-keyframes @name {@frames();}
@keyframes @name {@frames();}
}
But in general the recommendation is to consider to use a tool like autoprefixer and stop polluting your Less and/or CSS code with these hardcoded vendor prefixes.
Should I remove vendor prefixes?
No, you shouldn't remove all of them, however you may as well remove the ones which are no longer required.
How can I find out which prefixes are no longer required?
Can I use... is a great resource for checking browser support for various CSS, HTML and JavaScript features. If you perform a search for box-sizing
, for instance, it will tell you that all modern browsers have partial support for this and that Firefox requires the -moz-
prefix. You can also view all of the CSS support tables on just one page here.
How can I clarify that the prefixes are no longer required?
There are a couple of online resources which display information about browser usage. An example of this is StatCounter. StatCounter offers browser version statistics which can be filtered on time. If we look at the last 3 months, we can guestimate that we should still aim to support Firefox 20+, Chrome 25+, IE 8+ and Safari 5.1+.
Related Topics
Color for Styled Placeholder Text Is Muted in Firefox
How to Use Nth-Child Correctly
Postcss - Color Function Plugin - "Unable to Parse Color from String"
Site Doesn't Look Right in Mobile Browser
How to Add Second Level to a Submenu in a Dropdown Navigation CSS
What Are Common Classes, Helper Classes, and Utility Classes in CSS
How to Animate an Ellipsis with CSS Animations
Best Way to Have Global CSS in Vuejs
Using Gulp to Compile SASS and Minify Vendor CSS
How to Combine Position: Relative and Float: Left
Grid Layout: Create CSS So Elements Keep Position When Adjacent Element Gets Resized
Attr as Property in CSS Selector
Highlight Div1 and Div2 on Div2 Mousover, Highlight Nothing on Div1 Mouseover
Nested Div Elements Wrapping with Float Left
Displaying Third Tier Submenus Properly with CSS Only Menu