是否有针对 safari 而不是 chrome 的 CSS hack?-前端问题

is there a css hack for safari only NOT chrome?(是否有针对 safari 而不是 chrome 的 CSS hack?)

本文介绍了是否有针对 safari 而不是 chrome 的 CSS hack?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图为 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?

推荐答案

为 MONTEREY &SAFARI 15(2022 年初更新)*

PLEASE PLEASE --如果您遇到问题，并且真的想通过发表评论来获得帮助或帮助他人，请发布您的浏览器和设备(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 黑客攻击，但没有响应 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's 后面的空格也很重要.毕竟，这是一个 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+, < 13.1 */

@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，因此它当然也适用于 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 hack 的原因是主要是指将其与 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.

我在 browserhacks 上使用的旧媒体查询组合仍然适用于 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 浏览器的许多 hack.

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.

注意:如果某些东西对您不起作用，请先检查测试页面，但请提供示例代码和您尝试的哪些 hack，以便任何人帮助您.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！