CSS平台特定的hacks [英] CSS platform specific hacks
问题描述
我想知道是否有一种方法可以通过CSS定位平台，即不同的操作系统 - Windows 7，Windows 8，Linux等...
我有一个样式表，有ul列表和边框底部设置，当悬停在菜单元素上时更改颜色。问题是，li项目不显示相同的Windows 7和Windows8 / Ubuntu，在所有浏览器（Chrome，FF IE等...）我尝试使用不同的CSS属性，如行高，填充，边距等，但无论我做什么，项目的布局在win7和win8 / ubuntu之间是不一样的。我测试了各种PC和我测试相同版本的浏览器（最新的Chrome，最新的FF，IE9 ...）
所以我可以目标说Windows 8与css黑客？或者只是Ubuntu / Linux？
有一种方法来做一些这种性质的浏览器，你使用，小演绎推理和一些技巧...不是一切都会这样做，但有几个你可以使用操作系统定位与CSS只。脚本提供了更多的选择。这反映了大约6个月的研究和我的工作准确性，如下文所述。
这时候我不知道一个办法做到这一点Chrome和我没有看过Opera，特别是现在它使用了与Chrome相同的方法。 Chrome还没有发布Mac版本，直到版本3.对于Mac，Google发布了一份声明，声明Chrome 49后不支持OS X 10.6-10.8，因此Chrome 50及更高版本将指示Mac OS X 10.9（Mavericks）或
Firefox 4和更高版本可以检测到。一个Windows主题正在使用，所以即使旧版本的Firefox将至少检测您是否使用Windows。我今天创建了这个，并今天再次测试这个：
@media屏幕和（-moz-windows-主题）{
.windows {
color：red;
}
}
同样的道理， Windows，再次针对Firefox 4及更高版本：
@media不是屏幕和（-moz-windows-主题）{
_： - moz-ui-valid，.nonwindows {
color：red;
}
}
-moz-os-媒体查询，但只有几个选项，根据来自的mozilla文档https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
操作系统：windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
因此，此组仅适用于现代Firefox浏览器版本> = 25。在发布更新时，Firefox是版本35.
@media screen and（-moz-os-version：windows-xp）{
.windows，.winxp {
红色;
}
}
@media屏幕和（-moz-os-version：windows-vista）{
.windows，.vista {
color ：红;
}
}
@media屏幕和（-moz-os-version：windows-win7）{
.windows，.win7 {
color ：红;
}
}
@media屏幕和（-moz-os-version：windows-win8）{
.windows，.win8 {
color ：红;
}
}
@media屏幕和（-moz-os-version：windows-win10）{
.windows，.win10 {
color ：红;
}
}
Microsoft的Edge Browser（以前的Spartan）只有在Windows 10中。要检测它：
/ * Microsoft Edge浏览器* /
@supports （-ms-ime-align：auto）{
.windows，.win10 {
color：red;
}
}
注意：上一个-ms-accelerator：true方法在较新版本中更改，因此可以用于定位特定版本的边缘，但不是所有的。 -ms-ime-align：auto在2017年为所有人工作。
也有办法检测Macintosh电脑。
Firefox> = 24为OS X 10.7 Lion引入了一种新的滚动条覆盖方法，可通过媒体查询检测到：
@media screen和（-moz-overlay-scrollbars）{
.mac，.mac10_7up {
color：red;
}
}
Firefox> = 25也有一种方法来检测Mac OS X，因为他们在版本25中添加了对OS X字体平滑的支持：
@supports（-moz-osx- ：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 ;
}
}
}
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） （background-attachment：local）
和（not（-moz-osx-font-smoothing：auto））{
.nonmac {
color：red;
}
}
iOS（iPad和iPhone）的Firefox，当我写这个，所以Firefox与OS X字体平滑真的只包括Mac电脑，而不是苹果移动设备在这个时候。像Chrome for iOS，Firefox for iOS使用Safari引擎，因此在iPad和iPhone上使用Safari hack。所以他们都可以定位 - 如Safari，但是秘密不是他们说他们在底层。
通过一次否定两者，我们有一个方法，剩下的内容：Android / Linux，再次使用Firefox 25和更新版本：
@supports（-moz- appearance：none） （background-attachment：local）
和（not（-moz-osx-font-smoothing：auto））{
@media不是屏幕和（-moz-os-版本）{
.lindroid {
color：red;
}
}
}
如果您使用Internet Explorer ，版本6或更新（Windows XP和更新），那么你明显是使用窗口无论什么。
条件注释存在于windows中，直到Internet Explorer 9，因此可用于收集更多信息：
p>这只会检测到你有窗口，但不一定是版本，因为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 10或更高版本，则可以使用此工具，因此您可以使用Windows 7或8。
@media屏幕和（-ms高对比度：活动），（-ms-高对比度：无）{
.windows {
color：red;
}
}
我个人创作的一个作品检测Internet Explorer 11或更高版本，适用于Windows 7及更高版本，最高8.1。
_： - ms-fullscreen .windows {
color：red;
}
如果您不想使用Internet Explorer条件注释，查询，这些确实存在：
要检测Internet Explorer 6-7（因此Windows XP和更早到Windows 7），它的工作原理：
@media screen\9
{
.windows {
color：red;
}
}
这是我为Internet Explorer 9创建的，因为没有。 （min-width：0 \0）和（min-width：0 \0）。（$ win7或win vista）
分辨率：.001dpcm）
{
.windows {
color：red;
}
}
这会检测Internet Explorer 8 7）
@media \0screen
{
.windows {
color：red ;
}
}
我从其他部分制作了此媒体查询去年，它处理Safari 6.1及更高版本。 Safari是发布时的版本7。 Mac和移动设备（例如基本Android浏览器）将以此方式检测：
@media屏幕和（-webkit- min-device-pixel-ratio：0）和（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屏幕和（-webkit-min-device-pixel-ratio：1.1） （min-color-index：0）
{
.retina {（;
color：red;
）;}
}
有关手机和平板电脑的详情，请访问： https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/ < a> ，并在此处： https://jeffclayton.wordpress.com/2014/07 / 28 / css-hack-anything-but-ios /
Mac有IE浏览器一段时间，但没有更新版本5.5之后。
Windows也有Safari一段时间，但没有做新版本5之后。大多数Windows用户从来不使用Safari，通常在检测到Safari时排除窗口。
如果将以上所有样式都包含在文档中，下面的div将反映上面样式的结果： / p>
每个Firefox和Internet Explorer / Edge：
< div class =windows如果这是Windows，这是红色< / div>
< div class =winxp>如果这是Windows XP或更早版本，这是红色< / div>
< div class =win10>如果这是Windows 10，这是红色< / div>
每个Firefox：
< div class =vista>如果这是Windows Vista，这是红色< / div>
< div class =win7>如果这是Windows 7，这是红色< / div>
< div class =win8>如果这是Windows 8，这是红色< / div>
< div class =nonwindows>如果这不是Windows，这是红色< / div>
< div class =nonmac>如果这不是Mac OS X，这是红色< / div>
< div class =mac>如果这是Mac OS X，这是红色< / div>
< div class =mac10_7up>如果这是Mac OS X 10.7或更新版本，这是红色< / div>
< div class =mac10_6up>如果这是Mac OS X 10.6或更高版本，则为红色< / div>
< div class =mac10_6>如果这是Mac OS X 10.6，只有这是红色< / div> $ b¥b
< div class =lindroid>如果这是Linux或Android，这是红色< / div>
每个Safari：
< div class =mac_osx>如果这是Mac使用Safari
（台式机或笔记本电脑），这是红色（包括旧的移动设备，但不是iOS 6之前）< / div>
< div class =mac_or_mobile>如果这是Mac或使用Safari
（Android或iPad / iPhone）的移动设备，则为红色< / div>
< div class =retina>如果这是使用Safari
（Android或iPad / iPhone）的高清移动设备，则为红色< / div>
检测...的其他注意事项...
基于Internet Explorer / Edge的Windows版本（为了方便参考）：
如上所述，如果您检测到Internet Explorer 6，您使用的是XP（或较旧的Win）
如果检测到Internet Explorer 7-8，则使用的是Windows XP，Vista或Windows 7
如果检测到Internet Explorer 9，则使用的是Windows Vista或Windows 7
如果检测到Internet Explorer 10正在使用Windows 7或Windows 8.0
如果检测到Internet Explorer 11正在使用Windows 7或Windows 8.0 / 8.1或Windows 10
如果检测到Microsoft Edge您正在使用Windows 10
Windows 10是此发布时的Windows的当前版本。
对于历史兴趣，如果你真的想，你可以确定Internet Explorer 5或更少在Mac与我发现一个老黑客：
/ * \ * // * / .mac_internet_explorer {color：red; } / ** /
Mac版的Internet Explorer只能在旧版PowerPC Mac上使用，英特尔型号。
I would like to know if there is a way of targeting platforms with CSS, that is different operating systems- Windows 7, Windows 8, Linux etc...
I have a stylesheet, with a ul list and a border-bottom setting that changes color when hovering over the menu element. Problem is, that the li items does not not display the same between Windows 7 and Windows8/Ubuntu, on all browsers (Chrome, FF IE etc...)I tried using different css properites such as line height, padding, margin etc, but no matter what I do, the layout of the items are not the same between the win7 and win8/ubuntu. I tested on various PC's and I tested between same versions of browsers(latest Chrome, latest FF, IE9...)
So can I target say Windows 8 with a css hack? Or just Ubuntu/Linux?
There is a way to do some of this by nature of the browser you are using, a little deductive reasoning, and a few tricks... not everything will do it but there are a few you can use for OS targeting with CSS only. Scripting offers more options of course. This reflects about 6 months of research and work on my part for accuracy as noted in the text below.
At this time I do not know of a way to do this with Chrome and I have not looked into Opera, especially now that it uses much of the same methodology as Chrome. Chrome did not release a version for Mac until version 3. Also for a Mac, Google has issued a statement that OS X 10.6-10.8 will not be supported after Chrome 49 so Chrome 50 and newer will indicate Mac OS X 10.9 (Mavericks) or newer.
Firefox, Internet Explorer, and Safari have better options though.
Firefox 4 and newer can detect that a Windows theme is being used, so even old versions of Firefox will at least detect whether you are or are not using Windows. I created this a while back and tested this again today:
@media screen and (-moz-windows-theme) {
.windows {
color:red;
}
}
By the same token, this one works for anything but Windows, again for Firefox 4 and newer:
@media not screen and (-moz-windows-theme) {
_:-moz-ui-valid, .nonwindows {
color:red;
}
}
-moz-os-version was added in firefox 25 media queries but only has a few options according to the mozilla documentation from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
OS's: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
This set therefore only works in modern Firefox browsers version >= 25. At the time of this posting update, Firefox is version 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’s Edge Browser (Formerly Spartan) is at this time only in Windows 10. To detect it:
/* Microsoft Edge Browser */
@supports (-ms-ime-align:auto) {
.windows,.win10 {
color:red;
}
}
note: the previous -ms-accelerator:true method got changed in newer versions, and so that one can be used to target specific versions of edge, but not all of them. -ms-ime-align:auto works for all of them still in 2017.
There are also ways to detect Macintosh computers as well.
Firefox >= 24 introduced a new scrollbar overlay method for OS X 10.7 Lion and newer that is detectable with a media query:
@media screen and (-moz-overlay-scrollbars) {
.mac,.mac10_7up {
color:red;
}
}
Firefox >= 25 also has a way to detect Mac OS X since they added support for OS X font smoothing in version 25:
@supports (-moz-osx-font-smoothing:auto) {
.mac,.mac10_6up {
color:red;
}
}
Because @media queries and @supports filters can nest within each other, the following is now possible -- in order to target JUST OS X 10.6 Snow Leopard with Firefox 24 and newer:
@supports (-moz-osx-font-smoothing:auto) {
@media not all and (-moz-overlay-scrollbars) {
.mac,.mac10_6 {
color:red;
}
}
}
Firefox 17 and above only support Mac OS X 10.6+ (Snow Leopard and newer) so if you have results from any of the above OS X CSS rules, you are not using OS X 10.5 or older. (https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29)
Conversely, again in Firefox 25+ it is possible to negate OS X (10.6 and newer) -- Since 10.5 and older do not support this version of Firefox, it means this one is not Mac at all:
@supports (-moz-appearance:none) and (background-attachment:local)
and (not (-moz-osx-font-smoothing:auto)) {
.nonmac {
color:red;
}
}
iOS (iPad and iPhone) did not have a version of Firefox when I wrote this, so Firefox with OS X font smoothing really does only cover Mac computers only, not Apple mobile devices at this time. Like Chrome for iOS, Firefox for iOS uses the Safari engine so uses the Safari hacks on iPads and iPhones. So they both are targetable -- as Safari, but are secretly not what they say they are under the hood.
By negating both at once, we have a way to target what is left: Android/Linux, again with Firefox 25 and newer:
@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;
}
}
}
If you are using Internet explorer, version 6 or newer (Windows XP and newer) then you are clearly using windows no matter what. That can be determined in more than one way as well.
Conditional comments existed in windows up until internet explorer 9, so those can be used to gather more information:
This only detects that you have windows, but not necessarily the version because Internet Explorer 6-9 only existed on the windows platform. At this time, Internet Explorer 11 is the current version so this does not detect 10 and 11, but 9 and before:
<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">
.windows {
color:red;
}
</style><![endif]-->
Internet Explorer 6 only existed in Windows XP, or older Windows versions no longer used today, so this works for that one:
<!--[if (IE 6)]><style type="text/css">
.windows,.winxp {
color:red;
}
</style><![endif]-->
Internet Explorer 7 existed in Windows XP Vista and also is often emulated when you click the compatibility mode choice in Internet Explorer 8 or newer however.
This one works if you are using Internet Explorer 10 or newer, so you have windows 7 or 8.
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
.windows {
color:red;
}
}
One of my creations that I personally crafted detects Internet Explorer 11 or newer, which is available for Windows 7 and newer, up to 8.1.
_:-ms-fullscreen, :root .windows {
color:red;
}
If you don't want to use Internet Explorer Conditional Comments but would rather Media Queries, these do exist:
To detect Internet Explorer 6-7 (therefore Windows XP and older up to Windows 7) this works:
@media screen\9
{
.windows {
color:red;
}
}
This one I created for Internet Explorer 9 since none existed. (so win 7 or win vista)
@media screen and (min-width:0\0) and (min-resolution:.001dpcm)
{
.windows {
color:red;
}
}
This detects Internet Explorer 8 (Therefore windows XP-windows 7)
@media \0screen
{
.windows {
color:red;
}
}
I crafted this media query from various other parts over the last year, and It handles Safari 6.1 and newer. Safari is version 7 at the time of this posting. Macs and mobile devices such as the base Android browser, will be detected in this fashion:
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.mac_or_mobile {(;
color:red;
);}
}
Here is a better way to detect for most newer macs, and NOT include mobile devices such as iPads (or Androids) - Again it is for Safari 6.1 and newer, so it is a Mac...:
@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0)
{
.mac_osx {(;
color:red;
);}
}
If you want the mobiles instead, this works for recent hi-definition ones:
@media screen and (-webkit-min-device-pixel-ratio:1.1) and (min-color-index:0)
{
.retina {(;
color:red;
);}
}
I have more about mobile phones and tablets here: https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/ and here: https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/
Mac did have Internet Explorer for a while, but did not make newer versions after version 5.5.
Windows did have Safari for a while as well, but did not make newer versions after version 5. Most windows users never use Safari, so you could generally rule out windows when Safari is detected.
If you include all of the above styles into a document, the divs below will reflect the results of the styles from above:
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>
Additional notes on detection...
Windows versions based on Internet Explorer/Edge (for ease of reference):
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 is the current version of Windows at the time of this posting.
For historical interest, if you really want to, you could actually determine Internet Explorer 5 or less on a Mac with an old hack I have found:
/*\*//*/ .mac_internet_explorer { color:red; } /**/
The Mac version of Internet Explorer was only available on the old PowerPC Macs, not the Intel models.
这篇关于CSS平台特定的hacks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
