Question

是否只有谷歌Chrome浏览器的黑客攻击？以前存在的许多曾经适用于Chrome的黑客攻击现在被其他浏览器选中（使用）。我需要一个针对谷歌浏览器，但不是其他浏览器，如Mozilla Firefox，Safari或Microsoft Edge。

Answer 1

当然是：

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

在行动中看到它有点小提琴 - http://jsfiddle.net/Hey7J/

必须添加......这通常是不好的做法，你不应该真正开始需要单独的浏览器黑客来让你的CSS工作。尝试在项目开始时使用reset style sheets，以帮助避免这种情况。

此外，这些黑客可能不会成为未来的证据。

Answer 2

要仅使用chrome或safari，请尝试：

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

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

Answer 3

只有Chrome CSS黑客攻击：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #selector {
        background: red;
    }
}

Answer 4

尝试使用新的＆＃39; @ supports＆＃39;功能，这是一个你可能喜欢的好黑客：

*更新!!! * Microsoft Edge和Safari 9都在2015年秋季增加了对@supports功能的支持，Firefox也是 - 所以这是我的更新版本：

/* Chrome 29+ (Only) */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
   .selector { color:red; } 
}

此处有更多信息（反向... Safari但不是Chrome）：[is there a css hack for safari only NOT chrome?]

之前的CSS Hack [在Edge和Safari 9或更新的Firefox版本之前]：

/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */

@supports (-webkit-appearance:none) { .selector { color:red; } }

这适用于（仅限）chrome，版本28及更新版本。

（上面的chrome 28+ hack不是我的创作之一。我在网上找到了这个，因为它非常好我最近发送到BrowserHacks.com，还有其他人来了。）

2014年8月17日更新：正如我所提到的，我一直致力于推出更多版本的chrome（和许多其他浏览器），这里是我精心设计的处理chrome 35及更新版本的版本。

/* Chrome 35+ */

_::content, _:future, .selector:not(*:root) { color:red; }

在下面的评论中，@ BoltClock提到了未来，过去，而不是......等等......我们实际上可以使用它们在Chrome历史上再往后走一点。

那么这是一个有效的但不仅仅是Chrome的＆＃39;这就是为什么我没有把它放在这里。您仍然需要通过仅限Safari的黑客来完成此过程。我已经创建了css hacks来做到这一点，不用担心。以下是其中一些，从最简单的开始：

/* Chrome 26+, Safari 6.1+ */

_:past, .selector:not(*:root) { color:red; }

或者更确切地说，这个可以追溯到Chrome 22和更新版本，但Safari也是如此......

/* Chrome 22+, Safari 6.1+ */

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm),
screen and(-webkit-min-device-pixel-ratio:0)
{
    .selector { color:red; } 
}

Chrome版本22-28的块（更复杂但效果很好）也可以通过我制定的组合进行定位：

/* Chrome 22-28 (Only!) */

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

       color:red; 

    );}
}

现在跟进下一对，我还创建了针对Safari 6.1+（仅限）的目标，以便仍然将Chrome和Safari分开。 已更新，包含Safari 8

/* Safari 6.1-7.0 */

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


/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .selector { color:blue; }

因此，如果您将Chrome + Safari中的一个黑客攻击，然后依次安装Safari 6.1-7和8个黑客，那么您将使用红色的Chrome项目和蓝色的Safari项目。

Answer 5

你可以使用javascript。日期的其他答案似乎也针对Safari。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    alert("You'll only see this in Chrome");
    $('#someID').css('background-position', '10px 20px');
}

Answer 6

我发现这只适用于Chrome（它是红色的），而不是Safari和所有其他浏览器（它是绿色的）......

.style {
color: green;
(-bracket-:hack;
    color: red;
);
}

来自http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm

是否有谷歌Chrome专用的CSS黑客攻击？

6 个答案: