是否有针对Safari的CSS hack(仅适用于Chrome)? [英] 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; }
}
请问有人知道另一个仅适用于野生动物园的事吗?
does anyone know of another one that will just apply to safari please?
推荐答案
- 已更新CATALINA& SAFARI 13(2020年初更新)*
注意:过滤器和编译器(例如SASS引擎)期望使用标准的跨浏览器"代码-而不是像此类的CSS黑客 ，这意味着它们将被重写，销毁或删除这些骇客，因为这不是骇客所做的.其中大部分是非标准代码，这些代码经过精心设计，仅针对单个浏览器版本，如果更改了它们，将无法正常工作.如果您希望将它们与之配合使用， 您必须在任何过滤器或编译器之后加载所选的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.
自6.1版以来，Safari进行了更改.
Safari has changed since version 6.1, as many have noticed.
请注意:如果您在iOS上使用Chrome [以及现在也在使用Firefox](至少在iOS 6.1和更高版本中)，并且您想知道为什么没有一个黑客似乎能将Chrome与Safari分开，这是因为iOS的Chrome版本正在使用Safari引擎.它使用的是Safari hack，而不是Chrome hack.有关更多信息，请参见: https秋季发布了://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ 2015.它也对Safari Hacks做出了响应，但与iOS Chrome一样，都没有响应Firefox.
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)(精确版本！)以及您使用的设备.没有这些额外的信息，我或这里的任何其他人将无法为您提供帮助.
ALSO: If you have tried one or more of the hacks and have trouble getting them to work, please post sample code (better yet a test page) - the hack you are attempting, and what browser(s) (exact version!) you are using as well as the device you are using. Without that additional information, it is impossible for me or anyone else here to assist you.
通常是简单的修复或缺少分号.对于CSS，通常不仅是样式错误，还是样式表中列出了代码的顺序问题.请在测试站点的此处进行测试.如果能够在此处正常运行，则说明该hack确实适用于您的设置，但这是需要解决的其他问题.这里的人确实很乐于提供帮助，或者至少可以为您指明正确的方向.
Often it is a simple fix or a missing semicolon. With CSS it is usually that or a problem of which order the code is listed in the style sheets, if not just CSS errors. Please do test the hacks here on the test site. If it works there, that means the hack really is working for your setup, but it is something else that needs to be resolved. People here really do love to help, or at least point you in the right direction.
测试站点:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
和镜子！
https://browserstrangeness.github.io/css_hacks.html#safari
在这里，您可以使用一些hacks来使用较新版本的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)
我通过结合其他多种黑客，经过数月的测试和实验，创建了这种黑客.
This hack I created over many months of testing and experimentation by combining multiple other hacks.
注:像上面一样，双重媒体查询也不是偶然的-它排除了许多无法处理媒体查询嵌套的较旧的浏览器. -在"and"之后的缺失空间也很重要.毕竟，这是一种骇客……而且是目前唯一适用于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 hacks:
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骇客的原因是 主要是为了将其与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 Web浏览器的黑客.
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.
注意:如果某些内容对您不起作用，请先检查测试页，但请提供示例代码和您正在尝试的WHICH骇客，任何人都可以为您提供帮助.
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的CSS hack(仅适用于Chrome)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
