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

Question

是否有谷歌Chrome专用的CSS黑客攻击？以前存在的许多曾经适用于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工作.尝试在项目开始时使用重置样式表,以帮助避免这种情况.

此外,这些黑客可能不是未来的证据.

Answer 2

只有Chrome CSS黑客攻击:

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

Answer 3

要仅使用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 4

尝试使用新的"@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只有非铬？]

之前的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的黑客来完成此过程.我已经创建了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项目将显示为蓝色.