CSS平台特定的黑客(CSS platform specific hacks)

2019-08-17 07:14发布

站内文章 / 前端开发
37 0 0

我想知道是否有与CSS定位平台的方式，即在不同的运行操作系统 - Windows 7，Windows 8中，Linux的等等......

我有一个样式，与UL列表，并悬停在菜单元素时改变颜色的无边框，底部设置。 问题是，在利项不会不显示视窗7和Windows8的/ Ubuntu的之间是相同的，所有的浏览器（浏览器，FF IE等...）我使用不同的CSS性质在如线高度，填充，余量等试过，但无论我做什么，该项目的布局是不是Win7和Win8的/ Ubuntu之间是相同的。 我测试各种PC和我的浏览器的相同版本之间测试（最新的Chrome，最新的FF，IE9 ...）

所以，我可以定位说Windows 8中使用CSS黑客？ 或者只是Ubuntu的/ Linux呢？

Answer 1:

有一个办法由您使用的浏览器，一点点演绎推理的性质做一些这方面，和一些技巧...不是一切都会做，但也有一些可以使用的OS只针对CSS。 脚本提供，当然更多的选择。 如下文中指出这反映了约6个月的研究和工作，对我而言的准确性。

在这个时候，我不知道的方式与Chrome浏览器做到这一点，我没有看过成歌剧，尤其是现在，它使用许多相同的方法，适用于Chrome。 Chrome浏览器未发布一个版本的Mac直到第3版也为苹果，谷歌发表声明称OS X 10.6-10.8将不被支持后的Chrome 49因此Chrome 50和更新将显示的Mac OS X 10.9（小牛）或新。

火狐，IE和Safari有更好的选择，虽然。

火狐4和新的可检测到正在使用的Windows主题，所以即使火狐的旧版本至少会检测你是否为或者不使用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;
    }
}

在Firefox 25媒体查询添加-moz-OS版本，但只有几个选项根据来自Mozilla的文档https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

操作系统的方式：windows-XP | Windows的Vista的| Windows的WIN7 | Windows的win8的| 窗户-win10

这套因此，只有在现代Firefox浏览器版本> = 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;
    }
}

微软的浏览器边缘（原斯巴达）就是在这个时候只能在Windows 10检测到它： 

/* Microsoft Edge Browser */

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

注意：以前-MS-加速器：真正的方法得到了新版本中改变，让一个可用于目标边缘的特定版本，但不是所有的人。 -MS-IME对齐：自动适用于所有的人仍然在2017年。

也有方法来检测Macintosh计算机为好。

火狐> = 24引入了新的滚动条覆盖方法对OS X 10.7狮子和较新的，其与媒体查询检测： 

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

火狐> = 25也有一个方法来检测的Mac OS X，因为它们增加了在25版的OS X字体平滑支持： 

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

因为@media查询和@supports过滤器可以在彼此嵌套，以下现在是可能的 - 为了目标JUST OS X 10.6雪豹与Firefox 24和较新的： 

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

火狐17岁以上仅支持Mac OS X 10.6+（雪豹和更新的），所以如果你有任何的上述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，就意味着这个人是不是苹果在所有： 

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

火狐49中，火狐不再支持Mac OS X版本之前10.9，所以如果你有版本48或更少它必须是OS X 10.8版或以上，或者如果你有17-48之间的版本必须是OS X 10.6-10.8通过同样的道理。

的iOS（iPad和iPhone）没有一个版本的Firefox时，我写了这个，所以火狐OS X字体平滑确实只包括Mac电脑只，而不是苹果公司在这个时候移动设备。 像iOS版Chrome，火狐iOS版会使用Safari的引擎，因此在使用iPad和iPhone Safari的黑客。 因此，他们都是靶向 - 如Safari，但暗地里，他们说不是他们的引擎盖下。

通过在一次否定两个，我们有办法的目标还剩下什么：安卓/ 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的存在条件的意见，所以那些可以用来收集更多的信息：

这只能检测到有窗户，但不一定是因为版本的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或赢远景） 

@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公司（或机器人会） - 同样是为使用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-劈东西，但是-IOS /

苹果确实有Internet浏览器的一段时间，但5.5版本后没有做出新的版本。

窗户确实有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 /边缘（为便于参考）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的在此张贴时的当前版本。

对于历史的兴趣，如果你真的想，你可以实际确定Internet Explorer 5或更低的Mac上使用旧的黑客，我发现： 

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

IE浏览器的Mac版只有在旧的PowerPC Mac，而不是英特尔型号。



Answer 2:

我不相信这是可能的，在短短的CSS，但是一点点JS可以帮助您识别平台： http://rafael.adm.br/css_browser_selector/



文章来源: CSS platform specific hacks
标签： css cross-platform
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~