Question

大家好，我可以用少量检测浏览器版本，例如我有一些我不想在IE8浏览器上加载的代码，而且我发现了更少的防护，这似乎是我需要的但我的问题是如何从较少检测浏览器以设置保护参数是真还是假。

http://lesscss.org/features/#mixin-guards-feature

.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style()

Answer 1

看到你标记了Javascript我将在下面提供 - 虽然注意这不是原生的LESS方法。

我不建议以这种方式使用浏览器定位条件来加载CSS或任何其他数量的可能替代条件......但是如果您已经确定，请转到：

使用JS：

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

添加例如以下是html标记：

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

允许您将LESS嵌套在例如（您需要关注规则，以下仅为示例）

html:not([data-useragent*='IE/8']){
    // non IE8 styles
}

Answer 2

我总是首选使用条件注释将<html>元素方法的类添加到直接用户代理嗅探中。条件注释仅由Internet Explorer查看并被其他浏览器忽略，因此IE的指定版本是唯一获取类名称的版本。对我而言，主要的好处是你不必依赖Javascript。

它有点像这样：

<强> HTML：

<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

<强> LESS：

.ie8 {
    .selector {
        color: red;
    }
 }

在这种情况下，嵌套在LESS / Sass中可以轻松地对所有IE8覆盖样式进行分组。您可以在此处详细了解此方法：

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

以下是有关条件评论的更一般信息：

http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

使用LESS检测浏览器版本

2 个答案: