30

是否有仅限 Google Chrome 的 CSS hack？许多以前适用于 Chrome 的现有黑客现在正在被其他浏览器拾取（使用）。我需要一款针对 Google Chrome 的浏览器，但不针对 Mozilla Firefox、Safari 或 Microsoft Edge 等其他浏览器。

4

6 回答 6

37

当然是：

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

还有一点点小提琴可以看到它的实际效果 - http://jsfiddle.net/Hey7J/

必须补充一下...这通常是不好的做法，您不应该真的处于开始需要单独的浏览器黑客来使您的 CSS 工作的地步。尝试在项目开始时使用重置样式表，以帮助避免这种情况。

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

于 2012-05-30T07:51:06.593 回答
20

尝试使用新的“@supports”功能，这是您可能喜欢的一个好技巧：

* 更新！！！* 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）：[是否有针对 safari 的 CSS hack，而不是 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”的方法，这就是我没有把它放在这里的原因。您仍然必须通过仅限 Safari 的 hack 将其分开才能完成该过程。我已经创建了 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 hacks 放在上面，然后按顺序将 Safari 6.1-7 和 8 hacks 放在您的样式中，您将拥有红色的 Chrome 项目和蓝色的 Safari 项目。

于 2014-07-15T03:22:10.993 回答
20

只有 Chrome CSS hack：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #selector {
        background: red;
    }
}
于 2014-05-11T15:12:31.780 回答
19

要仅使用 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;
}}
于 2013-09-25T15:24:01.417 回答
4

你可以使用javascript。迄今为止的其他答案似乎也针对 Safari。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    alert("You'll only see this in Chrome");
    $('#someID').css('background-position', '10px 20px');
}
于 2014-01-15T13:18:07.753 回答
0

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

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

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

于 2014-06-03T07:21:39.437 回答