css - CSS平台特定的技巧

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进行OS定位。脚本当然会提供更多选择。这反映了我为确保准确性而进行的大约6个月的研究和工作，如下文所述。

目前，我不知道如何使用Chrome进行此操作，而且我还没有研究Opera，尤其是因为它使用的方法与Chrome相同。 Chrome直到3版才发布适用于Mac的版本。对于Mac，Google也发布了一条声明，称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文档，只有几个选项

操作系统：Windows-xp | Windows Vista | Windows-win7 | Windows-win8 |视窗10

因此，此集仅在> = 25的现代Firefox浏览器中有效。在此发布更新时，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;
    }
}

目前，Microsoft的Edge浏览器（以前称为Spartan）仅在Windows 10中运行。要检测到它，请执行以下操作：

/* Microsoft Edge Browser */

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

注意：以前的-ms-accelerator：true方法在较新的版本中进行了更改，因此可以使用它来定位Edge的特定版本，但不能定位所有版本。 -ms-ime-align：auto在2017年仍然适用于所有这些工具。

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

Firefox> = 24引入了适用于OS X 10.7 Lion和更高版本的新滚动条覆盖方法，可通过媒体查询来检测该方法：

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

Firefox> = 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移动设备。与iOS的Chrome浏览器一样，iOS的Firefox使用Safari引擎，因此在iPad和iPhone上使用Safari hacks。因此，它们都是可针对性的-就像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。这也可以通过多种方式确定。

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

这只会检测到您有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 7。

如果您使用的是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或赢得远景）

@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（或Android）等移动设备-再次适用于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时排除Windows。

如果您将上述所有样式包含在文档中，则下面的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>

有关检测的其他说明...

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

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上可用，而在Intel型号上不可用。