Question

我想知道是否有一种针对CSS平台的方法，即不同的操作系统 - Windows 7，Windows 8，Linux等......

我有一个样式表，带有ul列表和边框底部设置，当鼠标悬停在菜单元素上时会改变颜色。问题是，在所有浏览器（Chrome，FF IE等）上，li项目在Windows 7和Windows8 / Ubuntu之间不会显示相同的内容我尝试使用不同的css特性，如行高，填充，边距等，但不管我做什么，win7和win8 / ubuntu之间的项目布局都不一样。我在各种PC上进行了测试，并且我在相同版本的浏览器之间进行了测试（最新的Chrome，最新的FF，IE9 ......）

那么我可以针对css hack说Windows 8吗？或者只是Ubuntu / Linux？

Answer 1

有一种方法可以根据您使用的浏览器的性质，一些演绎推理和一些技巧来做一些...不是所有的事情都会这样做但是有一些你可以用来进行操作系统目标定位仅限CSS。当然，脚本提供了更多选项。这反映了大约6个月的研究和工作，如下文所述。

目前我还不知道如何通过Chrome实现这一目标，而且我还没有看过Opera，特别是现在它使用了与Chrome相同的方法。 Chrome在版本3之前没有发布适用于Mac的版本。同样对于Mac，谷歌已经发布声明，在Chrome 49之后将不再支持OS X 10.6-10.8，因此Chrome 50及更新版本将表示Mac OS X 10.9（Mavericks）或新。

Firefox，Internet Explorer和Safari有更好的选择。

Firefox 4及更新版本可以检测到正在使用Windows主题，因此即使是旧版本的Firefox也至少会检测您是否使用Windows。我在前一段时间创建了这个并在今天再次测试了这个：

@media screen and (-moz-windows-theme) {
    .windows {
        color:red;
    }
}

出于同样的原因，这个适用于Windows以外的任何功能，适用于Firefox 4及更新版本：

@media not screen and (-moz-windows-theme) {
    _:-moz-ui-valid, .nonwindows {
        color:red;
    }
}

-moz-os-version在firefox 25媒体查询中添加，但根据https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

的mozilla文档只提供了一些选项

OS＆＃39>：windows-xp | windows-vista | windows-win7 | windows-win8 |窗口-win10

因此，此套装仅适用于现代Firefox浏览器版本＆gt; = 25.在此发布更新时，Firefox为版本35.

@media screen and (-moz-os-version:windows-xp) {
    .windows,.winxp {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-vista) {
    .windows,.vista {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win7) {
    .windows,.win7 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win8) {
    .windows,.win8 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win10) {
    .windows,.win10 {
        color:red;
    }
}

微软的Edge浏览器（以前的Spartan）目前仅在Windows 10中。要检测它：

/* Microsoft Edge Browser */

@supports (-ms-ime-align:auto) {
    .windows,.win10 {
        color:red;
    }
}

注意：之前的-ms-accelerator：true方法在较新版本中已更改，因此可以使用一个方法来定位特定版本的边缘，但不是全部。 -ms-ime-align：自动适用于2017年的所有人。

还有一些方法可以检测Macintosh计算机。

Firefox＆gt; = 24为OS X 10.7 Lion和更新版本引入了一种新的滚动条覆盖方法，可通过媒体查询检测到：

@media screen and (-moz-overlay-scrollbars) {
    .mac,.mac10_7up {
        color:red; 
    } 
}

Firefox＆gt; = 25也有办法检测Mac OS X，因为它们在版本25中添加了对OS X字体平滑的支持：

@supports (-moz-osx-font-smoothing:auto) {
    .mac,.mac10_6up {
        color:red; 
    } 
}

因为@media查询和@supports过滤器可以相互嵌套，所以现在可以实现以下目标 - 为了使用Firefox 24及更新版本来定位JUST OS X 10.6 Snow Leopard：

@supports (-moz-osx-font-smoothing:auto) {
  @media not all and (-moz-overlay-scrollbars) {
    .mac,.mac10_6 {
        color:red;
    } 
  }
}

Firefox 17及更高版本仅支持Mac OS X 10.6+（Snow Leopard及更新版本），因此如果您有上述任何OS X CSS规则的结果，则表示您未使用OS X 10.5或更早版本。（https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29）

相反，再次在Firefox 25+中可以否定OS X（10.6及更新版本） - 由于10.5及更早版本不支持此版本的Firefox，这意味着它根本不是Mac：

@supports (-moz-appearance:none) and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    .nonmac {
        color:red; 
    } 
}

从Firefox 49开始，Firefox不再支持版本10.9之前的Mac OS X，因此如果您的版本为48或更低版本，则必须是OS X版本10.8或更低版本，或者如果您的版本在17-48之间，则必须是OS X 10.6-10.8同样的标记。

当我写这篇文章时，iOS（iPad和iPhone）没有Firefox的版本，因此具有OS X字体平滑功能的Firefox实际上只覆盖Mac计算机，而不是Apple移动设备。与Chrome for iOS一样，Firefox for iOS使用Safari引擎，因此在iPad和iPhone上使用Safari黑客攻击。因此，它们都是可定位的 - 就像Safari一样，但暗中并不是他们所说的内容。

通过立即否定两者，我们有办法瞄准剩下的东西：Android / Linux，再次使用Firefox 25及更新版本：

@supports (-moz-appearance:none) and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    @media not screen and (-moz-os-version) { 
        .lindroid {
           color:red; 
        }
    } 
}

如果您使用的是Internet Explorer，版本6或更高版本（Windows XP及更高版本），那么无论如何您都清楚地使用Windows。这也可以通过多种方式确定。

Windows中存在条件注释，直到Internet Explorer 9，因此可以使用这些注释来收集更多信息：

这只会检测到您有Windows，但不一定是版本，因为Internet Explorer 6-9仅存在于Windows平台上。目前，Internet Explorer 11是当前版本，因此不检测10和11，但是9和之前：

<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">

    .windows {
        color:red;
    }

</style><![endif]-->

Internet Explorer 6仅存在于Windows XP中，或者现在不再使用的旧版Windows，因此适用于该版本：

<!--[if (IE 6)]><style type="text/css">

    .windows,.winxp {
        color:red;
    }

</style><![endif]-->

Internet Explorer 7存在于Windows XP Vista中，并且通常在您单击Internet Explorer 8或更高版本中的兼容模式选项时进行模拟。

如果您使用的是Internet Explorer 10或更高版本，则可以使用此版本，因此您可以使用Windows 7或8。

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { 
    .windows {
        color:red;
    }
}

我个人制作的其中一件作品检测到Internet Explorer 11或更新版本，适用于Windows 7及更高版本，最高可达8.1。

_:-ms-fullscreen, :root .windows { 
    color:red; 
}

如果您不想使用Internet Explorer条件评论但更愿意使用媒体查询，则确实存在：

要检测Internet Explorer 6-7（因此Windows XP及更早版本的Windows 7），可以使用：

@media screen\9 
{
    .windows {
        color:red;
    }
}

这是我为Internet Explorer 9创建的，因为没有。（所以赢7或赢得vista）

@media screen and (min-width:0\0) and (min-resolution:.001dpcm) 
{
    .windows {
        color:red;
    }
}

这会检测Internet Explorer 8（因此Windows XP-windows 7）

@media \0screen
{
    .windows {
        color:red;
    }
}

我在去年制作了来自其他各个部分的媒体查询，它处理Safari 6.1及更新版本。 Safari在发布时是版本7。将以这种方式检测Mac和基本Android浏览器等移动设备：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
    .mac_or_mobile {(;
        color:red;
    );} 
}

这是检测大多数新Mac的更好方法，而不包括iPad（或Androids）等移动设备 - 再次适用于Safari 6.1及更新版本，因此它是Mac ...：

@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0)
{
    .mac_osx {(;
        color:red;
    );} 
}

如果你想要手机，这适用于最近的高清手机：

@media screen and (-webkit-min-device-pixel-ratio:1.1) and (min-color-index:0)
{
    .retina {(;
        color:red;
    );} 
}

我在这里有更多关于手机和平板电脑的信息： https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/此处： https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/

Mac确实有Internet Explorer一段时间，但在版本5.5之后没有制作更新的版本。

Windows确实有Safari已经有一段时间了，但是在版本5之后没有制作更新版本。大多数Windows用户从不使用Safari，因此在检测到Safari时通常可以排除窗口。

如果您将所有上述样式都包含在文档中，则下面的div将反映上面样式的结果：

Per Firefox and Internet Explorer/Edge:

<div class="windows"> If this is Windows this is red </div>

<div class="winxp"> If this is Windows XP or older this is red </div>

<div class="win10"> If this is Windows 10 this is red </div>

Per Firefox:

<div class="vista"> If this is Windows Vista this is red </div>
<div class="win7"> If this is Windows 7 this is red </div>
<div class="win8"> If this is Windows 8 this is red </div>

<div class="nonwindows"> If this is NOT Windows this is red </div>

<div class="nonmac"> If this is NOT Mac OS X this is red </div>

<div class="mac"> If this is Mac OS X this is red </div>

<div class="mac10_7up"> If this is Mac OS X 10.7 or newer this is red </div>
<div class="mac10_6up"> If this is Mac OS X 10.6 or newer this is red </div>
<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </div>

<div class="lindroid"> If this is Linux or Android this is red </div>

Per Safari:

<div class="mac_osx"> If this is a Mac using Safari
(desktop or laptop computer) this is red (includes old mobile devices but not before iOS 6) </div>

<div class="mac_or_mobile"> If this is a Mac or a mobile device using Safari
(Android or iPad/iPhone) this is red </div>

<div class="retina"> If this is a hi-def mobile device using Safari
(Android or iPad/iPhone) this is red </div>

关于侦查的补充说明......

基于Internet Explorer / Edge的Windows版本（为便于参考）：

As stated above if you detect Internet Explorer 6, you are using XP (or older Win)
If you detect Internet Explorer 7-8, you are using Windows XP, Vista, or Windows 7
If you detect Internet Explorer 9 you are using Windows Vista or Windows 7
If you detect Internet Explorer 10 you are using Windows 7 or Windows 8.0
If you detect Internet Explorer 11 you are using Windows 7 or Windows 8.0/8.1 or Windows 10
If you detect Microsoft Edge you are using Windows 10

Windows 10是此次发布时的当前Windows版本。

对于历史兴趣，如果您真的想要，您实际上可以在Mac上确定Internet Explorer 5或更少版本，并且我找到了旧的黑客：

/*\*//*/ .mac_internet_explorer { color:red; } /**/

Mac版的Internet Explorer仅适用于旧的PowerPC Mac，而非英特尔型号。

Answer 2

我不认为这在只是 CSS中是可行的，但是一些小js可以帮助您识别平台： http://rafael.adm.br/css_browser_selector/

CSS平台特定的黑客攻击

2 个答案: