是否有仅适用于 safari 而不是 chrome 的 css hack? [英] is there a css hack for safari only NOT chrome?

问题描述

我试图为 safari 而不是 chrome 找到一个 css hack，我知道这些都是 webkit 浏览器，但我在 chrome 和 safari 中的 div 对齐有问题，每个都显示不同.

im trying to find a css hack for just safari NOT chrome, i know these are both webkit browsers but im having problems with div alignments in chrome and safari, each displays differently.

我一直在尝试使用它，但它也会影响 chrome，

i have been trying to use this but it affects chrome as well,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

有谁知道另一种只适用于 safari 的吗?

does anyone know of another one that will just apply to safari please?

推荐答案

• 更新了 CATALINA &SAFARI 13(2020 年初更新)*

请--如果您遇到问题，并且真的想通过发表评论来获得帮助或帮助他人，请发布您的浏览器和设备(MacBook/IPad/等...浏览器和操作系统版本号！)

PLEASE PLEASE -- If you are having trouble, and really want to get help or help others by posting a comment about it, Post Your Browser and Device (MacBook/IPad/etc... with both browser and OS version numbers!)

声称没有这些工作是不准确的(实际上甚至不可能.)其中许多并不是真正的黑客"，而是由 Safari 版本内置的代码苹果.需要更多信息.我喜欢你来到这里的事实，并且真的希望事情为你解决.

Claiming none of these work is not accurate (and actually not even possible.) Many of these are not really 'hacks' but code built into versions of Safari by Apple. More info is needed. I love the fact that you came here, and really want things to work out for you.

如果您在从这里获取一些东西在您的网站上运行时遇到问题，请通过下面的链接检查测试网站 -- 如果黑客在那里工作，但不在您的网站上，则黑客是不是问题 - 您的网站发生了其他事情，通常只是如下所述的 CSS 冲突，或者可能没有任何效果，但您可能不知道您实际上根本没有使用 Safari.请记住，此信息旨在帮助人们解决(希望如此)短期问题.

If you have issues getting something from here working on your site, please do check the test site via links below -- If a hack is working there, but not on your site, the hack is not the issue - there is something else happening with your site, often just a CSS conflict as mentioned below, or perhaps nothing is working but you may be unaware that you are not actually using Safari at all. Remember that this info is here to help people with (hopefully) short term issues.

测试地点:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

还有镜子！

https://browserstrangeness.github.io/css_hacks.html#safari

注意:过滤器和编译器(例如 SASS 引擎)需要标准的跨浏览器"代码——而不是像这样的 CSS hack，这意味着它们会重写，销毁或删除黑客，因为这不是黑客所做的.其中大部分是非标准代码，经过精心设计，仅针对单个浏览器版本，如果更改则无法运行.如果您希望将其与这些一起使用，您必须在任何过滤器或编译器之后加载您选择的 CSS hack.这似乎是理所当然的，但很多人都没有意识到他们正在通过此类并非为此目的而设计的软件运行黑客来撤消黑客行为，他们对此产生了很多困惑.

NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like these which means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.

Safari 自 6.1 版以来发生了变化，正如许多人所注意到的那样.

请注意:如果您在 iOS 上使用 Chrome [现在还有 Firefox](至少在 iOS 6.1 及更高版本中)并且您想知道为什么没有任何黑客似乎将 Chrome 与 Safari 分开，这是因为 iOS 版的 Chrome 使用的是 Safari 引擎.它使用 Safari 黑客而不是 Chrome 黑客.更多相关信息:https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plate-apple/ Firefox for iOS 于秋季发布2015 年.它也响应了 Safari Hacks，但没有响应 Firefox，与 iOS Chrome 相同.

Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as iOS Chrome.

另外:如果您尝试过一种或多种黑客攻击但无法使它们工作，请发布示例代码(最好是测试页面)-您尝试的黑客攻击以及使用的浏览器(s)(确切版本！)您正在使用以及您正在使用的设备.如果没有这些额外信息，我或这里的其他任何人都无法为您提供帮助.

通常是一个简单的修复或缺少分号.使用 CSS 通常是代码在样式表中列出的顺序或问题，如果不仅仅是 CSS 错误.请在测试站点上测试这里的黑客.如果它在那里工作，这意味着黑客确实适用于您的设置，但它是其他需要解决的问题.这里的人真的很乐意提供帮助，或者至少为您指明了正确的方向.

这里有一些技巧供您用于更新版本的 Safari.

That out of the way here are hacks for you to use for more recent versions of Safari.

您应该先尝试这个，因为它涵盖了当前的 Safari 版本并且仅适用于纯 Safari:

You should try this one first as it covers current Safari versions and is pure-Safari only:

这个仍然适用于 Safari 13(2020 年初):

This one still works properly with Safari 13 (early-2020):

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

要覆盖更多版本，6.1 及更高版本，此时您必须使用下一对 css hack.6.1-10.0 与处理 10.1 及更高版本的那个.

To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.

那么——这是我为 Safari 10.1+ 设计的:

So then -- here is one I worked out for Safari 10.1+:

这里的双媒体查询很重要，不要删除它.

The double media query is important here, don't remove it.

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

如果 SCSS 或其他工具集在嵌套媒体查询方面遇到问题，请尝试此方法:

Try this one if SCSS or other tool set has trouble with the nested media query:

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

下一个适用于 6.1-10.0 但不适用于 10.1(2017 年 3 月下旬更新)

This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)

这个 hack 是我在数月的测试和实验中结合多个其他 hack 创造的.

This hack I created over many months of testing and experimentation by combining multiple other hacks.

注意:如上所述，双重媒体查询并非偶然——它排除了许多无法处理媒体查询嵌套的旧浏览器.-- 'and' 之后的空格也很重要.毕竟，这是一种 hack ……并且是目前唯一适用于 6.1 和所有更新的 Safari 版本的方法.另请注意，如下面的评论中所列，hack 是非标准 css，必须在过滤器之后应用.SASS 引擎等过滤器将重写/撤消或完全删除它.

NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.

如上所述，请检查我的测试页面以查看它按原样运行(无需修改！)

As mentioned above, please check my test page to see it working as-is (without modification!)

这是代码:

/* Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

有关更多特定于版本"的 Safari CSS，请继续阅读以下内容.

For more 'version specific' Safari CSS, please continue to read below.

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Safari 11.0 的一个:

One for Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 10.0:

One for Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

针对 10.1 稍作修改的作品(仅限):

Slightly modified works for 10.1 (only):

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Safari 10.0(非 iOS 设备):

Safari 10.0 (Non-iOS Devices):

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9 CSS 黑客:

Safari 9 CSS Hacks:

针对 Safari 9.0 及更高版本的简单支持功能查询黑客:

A simple supports feature query hack for Safari 9.0 and up:

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

适用于 Safari 9.0 及更高版本的简单下划线技巧:

A simple underscore hack for Safari 9.0 and up:

_:not(a,b), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9.0 及更高版本的另一个:

Another one for Safari 9.0 and up:

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

另一个也支持功能查询:

and another support features query too:

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}

Safari 9.0-10.0:

One for Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9 现在包括功能检测，所以我们现在可以使用它...

Safari 9 now includes feature detection so we can use that now...

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

现在仅针对 iOS 设备.如上所述，由于 iOS 上的 Chrome 植根于 Safari，所以它当然也会命中那个.

Now to target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

一个适用于 Safari 9.0+ 但不适用于 iOS 设备:

one for Safari 9.0+ but not iOS devices:

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

一个适用于 Safari 9.0-10.0 但不适用于 iOS 设备:

And one for Safari 9.0-10.0 but not iOS devices:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

以下是将 6.1-7.0 和 7.1+ 分开的黑客这些还需要多种技巧的组合才能获得正确的结果:

Below are hacks that separate 6.1-7.0, and 7.1+ These also required a combination of multiple hacks in order to get the right result:

/* Safari 6.1-7.0 */

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

      color:#0000FF; 
      background-color:#CCCCCC; 

    );}
}

既然我已经指出了阻止 iOS 设备的方法，这里是针对非 iOS 设备的 Safari 6.1+ hack 的修改版本:

Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    _:-webkit-full-screen, .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

使用它们:

<div class="safari_only">This text will be Blue in Safari</div>

---

通常[就像在这个问题中]人们询问Safari hacks的原因是主要是指将其与 Google Chrome 分开(再次不是 iOS！)发布替代方案可能很重要:如何单独定位 Chrome也来自 Safari，因此我会在此处为您提供，以备不时之需.

---

Usually [like in this question] the reason people ask about Safari hacks is mostly in reference to separating it from Google Chrome (again NOT iOS!) It may be important to post the alternative: how to target Chrome separately from Safari as well, so I am providing that for you here in case it is needed.

这里是基础知识，再次检查我的测试页面以获取许多特定版本的 Chrome，但这些通常涵盖 Chrome.Chrome 版本为 45，Dev 和 Canary 版本目前最高版本为 47.

Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.

我在浏览器黑客上使用的旧媒体查询组合仍然仅适用于 Chrome 29+:

My old media query combo I put on browserhacks still works just for Chrome 29+:

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

@supports 功能查询也适用于 Chrome 29+ 以及我们在下面用于 Chrome 28+ 的修改版本.Safari 9、即将推出的 Firefox 浏览器和 Microsoft Edge 浏览器均未采用此浏览器:

An @supports feature query works well for Chrome 29+ as well... a modified version of the one we were using for Chrome 28+ below. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one:

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

以前，Chrome 28 及更新版本很容易被定位.这是我在看到它包含在其他 CSS 代码块中(最初不是作为 CSS hack)并意识到它的作用后发送给 browserhacks 并意识到它的作用，所以我为了我们的目的提取了相关部分:

Previously, Chrome 28 and newer were easy to target. This is one I sent to browserhacks after seeing it included within a block of other CSS code (not originally intended as a CSS hack) and realized what it does, so I extracted the relevant portion for our purposes:

[ 注意:] 下面的这个旧方法现在可以在没有上述更新的情况下拍摄 Safari 9 和 Microsoft Edge 浏览器.即将推出的 Firefox 和 Microsoft Edge 版本在其编程中添加了对多个 -webkit-CSS 代码的支持，Edge 和 Safari 9 都添加了对@supports 功能检测的支持.Chrome 和 Firefox 之前包含 @supports.

[ NOTE: ] This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update. The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming, and both Edge and Safari 9 have added support for @supports feature detection. Chrome and Firefox included @supports previously.

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

Chrome 版本 22-28(如果需要支持旧版本)的块也可以通过我在上面发布的 Safari 组合黑客的扭曲来定位:

The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

       color:#0000FF; 
       background-color:#CCCCCC; 

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

与上面的 Safari CSS 格式化技巧一样，这些可以按如下方式使用:

Like the Safari CSS formatting hacks above, these can be used as follows:

<div class="chrome_only">This text will be Blue in Chrome</div>

所以你不必在这篇文章中搜索它，这是我的实时测试页面:

So you don't have to search for it in this post, here is my live test page again:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

[或镜子]

https://browserstrangeness.github.io/css_hacks.html#safari

测试页面还有很多其他的，特别是基于版本的以进一步帮助您区分 Chrome 和 Safari，以及针对 Firefox、Microsoft Edge 和 Internet Explorer 网络浏览器的许多技巧.

The test page has many others as well, specifically version-based to further help you differentiate between Chrome and Safari, and also many hacks for Firefox, Microsoft Edge, and Internet Explorer web browsers.

注意:如果某些内容对您不起作用，请先检查测试页，但请提供示例代码以及您正在尝试的黑客攻击以帮助您.

NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.

这篇关于是否有仅适用于 safari 而不是 chrome 的 css hack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！