如何仅将特定的CSS规则应用于Chrome？

Question

有没有办法将以下CSS应用于div仅在Google Chrome中的特定内容？

position:relative;
top:-2px;

Answer 1

CSS解决方案

来自https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript解决方案

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Answer 2

众所周知,Chrome是一个Webkit浏览器,Safari也是一个Webkit浏览器,而且还有Opera,因此使用媒体查询或CSS黑客攻击谷歌Chrome很困难,但Javascript确实更有效.

以下是针对Google Chrome 14及更高版本的Javascript代码,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

以下是可用浏览器黑客的列表,包括受影响的浏览器的谷歌浏览器

WebKit黑客:

.selector:not(*:root) {}

• 谷歌浏览器:所有版本
• Safari:所有版本
• 歌剧:14岁及以上
• Android:所有版本

支持黑客:

@supports (-webkit-appearance:none) {}

谷歌Chrome 28,谷歌浏览器> 28,Opera 14和Opera> 14

• 谷歌浏览器:28及更高版本
• 歌剧:14岁及以上

物业/价值黑客:

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

谷歌Chrome 28,谷歌Chrome <28,Opera 14和Opera> 14,Safari 7和少于7. - 谷歌浏览器:28和之前 - Safari:7和之前 - 歌剧:14及以后

JavaScript Hacks:1

var isChromium = !!window.chrome;

• 谷歌浏览器:所有版本
• 歌剧:14岁及以上
• Android:4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• 谷歌浏览器:所有版本
• Safari:3及以后
• 歌剧:14岁及以上

JavaScript Hacks:3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• 谷歌浏览器:14及更高版本

媒体查询黑客:1

@media \\0 screen {}

• 谷歌浏览器:22到28
• Safari:7及以后

媒体查询黑客:2

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

• 谷歌浏览器:29及更高版本
• 歌剧:16岁及以上

有关更多信息,请访问此网站

Answer 3

chrome> 29和Safari> 8的更新:

Safari现在也支持该@supports功能.这意味着这些黑客对Safari也有效.

我会推荐

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Answer 4

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

仅通过.selector:not(*:root)与选择器一起使用，才能将特定的 CSS 规则应用于 Chrome ：

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Answer 5

这个 css浏览器选择器可以帮助你.看一看.

CSS浏览器选择器是一个非常小的javascript,只有一行授权CSS选择器.它使您能够为每个操作系统和每个浏览器编写特定的CSS代码.

Answer 6

接受的答案也与 Firefox 80+ 匹配。

要针对所有 Webkit 浏览器（Edge 79+、Chrome、Safari），请查找Firefox 不支持的-webkit特定 CSS 扩展（使用https://caniuse.com）。这是一个移动的目标；一种 Webkit 浏览器可能会删除它，而非 Webkit 浏览器可能会添加对它的支持。

下面是两个例子：

@supports(-webkit-text-security: circle) {
  /* Matches Edge 79 - latest (92) */
  /* Matches Chrome 4 - latest (95) */
  /* Matches Safari 3.1 - latest (15/TP) */
  /* Matches Opera 15 - latest (78) */

  /* does not match Firefox */
}

@supports(-webkit-tap-highlight-color: black) {
  /* Matches Edge 12 - latest (92) */
  /* Matches Chrome 16 - latest (95) */
  /* Matches Opera 15 - latest (78) */

  /* does not match Safari */
  /* does not match Firefox */
}

如果您实际上只需要 Chrome，那么 JS 可能是唯一的选择。

/sf/answers/1784769871/.selector:not(*:root) {}中的黑客攻击仍然排除 Firefox 至版本 92，但与 Safari 匹配。