CSS Conditional comments in LESS CSS

While Integrating LESS CSS, I encountered with some conditional comments in CSS like

[if IE 7] margin-top: -2px;
[if IE 8] margin-top: -3px;
[if Webkit] margin-top: -1px;

And of course they cannot be compiled to CSS by LESS compiler,

So for IE I found a way to avoid conditional comment and make them work, as mentioned IN THIS ARTICLE

But, there seems to be no way for [IF Webkit], rather than detecting webkit through JS and adding a class.

Can any body please hep me on this ?


You should use conditional comments when specifying which style sheet to use and not inside a stylesheet.. Like so:

<!--[if IE 6]>
    <link rel="stylesheet" href="style_ie6.css">

Or you should use specific classes inside your css files:

.ie6 .container {}

and make sure you use the class .ie6 in your html as appropriate

In some cases it might be a good idea to use browser specific stylesheets but i highly recommend that instead of testing for browsers test for features if that is a possibility. Check out modernizr

Though technically it is not valid CSS you still can get it via certain escape hacks:

.cond(@c, @p, @v) {
    -: ~"; [if @{c}] @{p}: @{v}";

div {
    .cond(IE 7,   margin-top, -2px);
    .cond(IE 8,   margin-top, -3px);
    .cond(Webkit, margin-top, -1px);

This is simplified minimalistic example producing dummy -: ; in output (you'll find more gorgeous escape hack examples by searching here for ~").

P.S. I'm giving this answer just in case, i.e. to show you can get these strings in LESS, but it does not cancel the fact that this CSS itself is very questionable ([if Webkit]? - what browser/library is it supported in?)

Need Your Help

Rails — “remember me” capability

ruby ruby-on-rails-3 remember-me

I am having trouble understanding the implementation of "Remember Me" in the Ruby on Rails Tutorial by Michael Hartl. He creates a SessionsHelper module with methods for signing in, containing the

C/C++ optimize data structures, array of arrays or just array

c++ c arrays

Working with a program that uses 16bytes 4v4 one byte matrices :

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.