是否有一种方法只对Safari应用样式?

有一种方法可以从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;
}
}

Sarari只

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

对于那些想要在Safari 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人，请使用:

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

• 更新蒙特利&SAFARI 15(2022年初更新)*

拜托拜托如果你遇到了麻烦，并且真的想要获得帮助或通过发表评论来帮助别人，张贴你的浏览器和设备(MacBook/IPad/等…浏览器和操作系统版本号!)

声称这些工作都是不准确的(实际上甚至不可能)其中许多不是真正的“黑客”，而是由苹果内置到Safari版本的代码。还需要更多的信息。我很高兴你能来这里，也很希望你能如愿以偿。

如果你有问题从这里得到一些东西在你的网站上工作，请通过下面的链接查看测试站点——如果黑客在那里工作，但不是在你的网站上，黑客不是问题-你的网站发生了其他事情，通常只是下面提到的CSS冲突，或者可能什么都没有工作，但你可能没有意识到你实际上并没有使用Safari。记住，这些信息是为了帮助人们解决短期问题(希望如此)。

测试地点:

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

和镜子!

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

注意:过滤器和编译器(如SASS引擎)期望标准的“跨浏览器”代码——而不是像这些CSS黑客，这意味着他们将重写，销毁或删除黑客，因为这不是黑客所做的。其中大部分是非标准代码，这些代码经过精心设计，只针对单个浏览器版本，如果修改了它们就无法工作。如果你想使用它与那些，你必须在任何过滤器或编译器后加载你选择的CSS hack 。这似乎是一个给定的，但有很多人没有意识到他们正在通过这样的软件来解除黑客攻击，这不是为这个目的而设计的。

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

请注意:如果你在iOS(至少iOS 6.1及更新版本)上使用Chrome[现在也使用Firefox]，并且你想知道为什么没有黑客将Chrome和Safari分开，这是因为iOS版本的Chrome使用的是Safari引擎。它使用的是Safari浏览器，而不是Chrome浏览器。更多关于这一点:https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS于2015年秋季发布。它还能响应Safari的黑客攻击，但不响应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 hacks。6.1-10.0版本与10.1及以上版本配套使用。

下面是我为Safari 10.1+设计的:

double media查询在这里很重要，不要删除它。

/* 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后面缺少的空格也很重要。毕竟，这是一个黑客…也是目前唯一一个适用于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技巧:

一个简单的支持功能查询hack 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;


}

/* 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+黑客的修改版本:

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

这里是基本的，再次检查我的测试页面的许多特定版本的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;


}
}

一个@支持功能查询工作良好的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组合hacks:

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

注意:如果某些东西对你不起作用，首先检查测试页面，但要提供示例代码和你试图帮助任何人。

这个hack 100%只适用于safari 5.1-6.0。我刚刚测试成功了。

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

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

@media \\0 screen {}

免责声明:此攻击也针对旧Chrome版本(2013年7月之前)。

第一步:使用https://modernizr.com/

第二步:使用html类.regions只选择Safari

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

Modernizr将根据当前浏览器支持的内容向DOM添加html类。Safari支持区域http://caniuse.com/#feat=css-regions，而其他浏览器不支持(无论如何)。这种方法在选择不同版本的IE时也非常有效。原力与你同在

在(.myClass)中替换你的类

/* Safari only */ .myClass:没有(:根:根){ enter code here } < / p >

顺便说一下，对于那些只需要在移动设备上使用Safari的人来说，只需在这个黑客中添加一个媒体查询:

@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>

我喜欢用下面的方法:

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">')
};

它在safari中100%工作，我试过了

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

嗨，我做了这个，它为我工作

@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;
}


}


}

如此:

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

我已经测试过了，它对我很有效

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

最后，我使用了一点JavaScript来实现它:

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

然后在我的CSS目标苹果浏览器引擎的选择器将是:

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

注意:如果iOS-only是足够的(如果你愿意牺牲Safari桌面)，那么这是可行的:

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

当使用这个Safari专用过滤器时，我可以针对Safari (iOS和Mac)，但排除Chrome(和其他浏览器):

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

如果你正在寻找Safari特定的浏览器黑客

我试过了，对我有效(只适用于Safari)

@supports (-webkit-hyphens:none){
@content
}
    

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

适用于iOS 16和macOS Ventura:

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}

https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari

@supports (background: -webkit-named-image(i)) {
//
}

h1::after {
content: "No";
margin-left: .3em;
color: red;
}


@supports (background: -webkit-named-image(i)) {
h1::after {
content: "Yes";
color: green;
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
  

<h1>Safari?</h1>


</body>
</html>