css - 是否有针对 safari 而不是 chrome 的 CSS hack？

Question

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

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

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

请问有人知道另一种只适用于野生动物园吗？

score 460 · Accepted Answer

为 MONTEREY 和 SAFARI 15 更新（2022 年初更新）*

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

声称这些工作都没有是不准确的（实际上甚至不可能。）其中许多并不是真正的“黑客”，而是 Apple 内置到 Safari 版本中的代码。需要更多信息。我喜欢你来到这里的事实，并且真的希望事情对你有用。

如果您在从此处获取某些内容在您的网站上工作时遇到问题，请通过下面的链接检查测试网站——如果黑客在那里工作，但不在您的网站上，则黑客不是问题——还有其他事情发生您的网站，通常只是下面提到的 CSS 冲突，或者可能没有任何工作，但您可能没有意识到您实际上并没有使用 Safari。请记住，此信息旨在帮助人们（希望）解决短期问题。

测试地点：

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

和镜子！

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

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

正如许多人所注意到的，自 6.1 版以来，Safari 已经发生了变化。

请注意：如果您在 iOS 上使用 Chrome [现在还使用 Firefox]（至少在 iOS 6.1 和更高版本中）并且您想知道为什么没有一个黑客似乎将 Chrome 与 Safari 分开，这是因为 Chrome 的 iOS 版本正在使用 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 相同。

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

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

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

您应该首先尝试这个，因为它涵盖了当前的 Safari 版本并且仅是纯 Safari：

这个仍然适用于 Safari 13（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 及更高版本的版本一起使用。

那么 - 这是我为 Safari 10.1+ 制定的一个：

双重媒体查询在这里很重要，不要删除它。

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

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

/* 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 月下旬更新）

这个 hack 我通过结合多个其他 hack 经过数月的测试和实验创建。

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

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

这是代码：

/* 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，请继续阅读下文。

/* 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：

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

一个用于 Safari 10.0：

/* Safari 10.0 (not 10.1) */

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

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

}

稍作修改适用于 10.1（仅）：

/* 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 (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.0 及更高版本的功能查询破解：

@supports (-webkit-hyphens:none)
{

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

}

Safari 9.0 及更高版本的简单下划线破解：

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

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

}

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

/* Safari 9+ */

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

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

}

还有另一个支持功能查询：

/* 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：

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

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

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

}

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

/* Safari 9 */

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

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

}

现在只针对 iOS 设备。如上所述，由于 iOS 上的 Chrome 植根于 Safari，因此它当然也适用于 Safari。

/* 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 设备：

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

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

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

}

还有一个适用于 Safari 9.0-10.0 但不适用于 iOS 设备：

/* 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+ 的 hack，这些还需要多个 hack 的组合才能获得正确的结果：

/* 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 的修改版本：

/* 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 分开定位，所以我在这里为您提供，以备不时之需。

这是基础知识，请再次查看我的测试页面以了解许多特定版本的 Chrome，但这些通常涵盖 Chrome。Chrome 是 45 版，Dev 和 Canary 版本目前最高到 47 版。

我在 browserhacks 上使用的旧媒体查询组合仍然适用于 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 浏览器没有被这个选择：

/* 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 的，因此我出于我们的目的提取了相关部分：

[注意：] 下面这个较旧的方法现在描绘了没有上述更新的 Safari 9 和 Microsoft Edge 浏览器。即将到来的 Firefox 和 Microsoft Edge 版本在其编程中增加了对多个 -webkit- CSS 代码的支持，Edge 和 Safari 9 都增加了对 @supports 功能检测的支持。Chrome 和 Firefox 之前包含 @supports。

/* 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 组合黑客攻击进行调整：

/* 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 格式化技巧一样，这些可以按如下方式使用：

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

所以你不必在这篇文章中搜索它，这里又是我的现场测试页面：

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。

注意：如果某些东西对您不起作用，请先检查测试页面，但请提供示例代码和您正在尝试哪些黑客攻击以供任何人帮助您。

score 95 · Accepted Answer

有一种方法可以从 Chrome 中过滤 Safari 5+：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

score 21 · Accepted Answer

21

仅限萨拉里

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

于 2014-05-30T07:00:32.643 回答

score 14 · Accepted Answer

此 hack 100% 仅适用于 safari 5.1-6.0。我刚刚测试成功。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

score 7 · Accepted Answer

对于那些想要为 Safari 7.0 及更低版本而不是 7.1 及更高版本实现 hack 的人 - 使用：

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

score 7 · Accepted Answer

在 (.myClass) 中替换您的课程

/* 仅限 Safari */ .myClass:not(:root:root) { enter code here }

score 5 · Accepted Answer

我喜欢使用以下方法：

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

score 4 · Accepted Answer

顺便说一句，对于那些只需要在手机上定位 Safari 的人，只需在这个 hack 中添加一个媒体查询：

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

并且不要忘记将.safari_only类添加到您要定位的元素中，例如：

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

score 4 · Accepted Answer

当使用这个 safari-only 过滤器时，我可以针对 Safari（iOS 和 Mac），但排除 Chrome（和其他浏览器）：

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

score 3 · Accepted Answer

注意：如果仅 iOS 就足够了（如果您愿意牺牲 Safari 桌面），那么这可行：

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

score 3 · Accepted Answer

这有效：

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

score 2 · Accepted Answer

嗨，我做了这个，它对我有用

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

score 1 · Accepted Answer

您可以使用媒体查询黑客从其他浏览器中选择 Safari 6.1-7.0。

@media \\0 screen {}

免责声明：此 hack 还针对旧 Chrome 版本（2013 年 7 月之前）。

score 1 · Accepted Answer

Step 1: use https://modernizr.com/

Step 2: use the html class .regions to select only Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr will add html classes to the DOM based on what the current browser supports. Safari supports regions http://caniuse.com/#feat=css-regions whereas other browsers do not (yet anyway). This method is also very effective in selecting different versions of IE. May the force be with you.

score 0 · Accepted Answer

最后我使用一点 JavaScript 来实现它：

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

然后在我的 CSS 中以 Apple 浏览器引擎为目标，选择器将是：

.on-apple .my-class{
    ...
}

score 0 · Accepted Answer

https://stackoverflow.com/a/17637937/3174065 虽然这种方法确实使用了一些 JS，但它在这里得到了回答。如果使用，请务必将 js 放在页脚中，主体必须完全加载才能正确触发，当放置在头部时会出错，因为它在加载主体之前触发。

然后它在主体中添加了一个 .safari 类，但仅限于 safari，使得定位 css 非常容易。

score -1 · Accepted Answer

我已经测试过，它对我有用

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

score -1 · Accepted Answer

它在 safari 中 100% 工作。我试过

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

css - 是否有针对 safari 而不是 chrome 的 CSS hack？

18 回答 18

Related

Reference