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

102

有没有一种方法可以将以下CSS div仅应用于Google Chrome中的特定CSS ？

position:relative;
top:-2px;

css google-chrome css-hack

— 用户名
source

1

如何制作Chrome / Opera特定样式表的

— 雅各布2012年

1

您面临什么问题迫使您这样做？针对特定浏览器定位CSS规则并不是很好的设计，在大多数情况下，如今不再需要。

— Pekka '02

@Pekka这是我的问题stackoverflow.com/questions/9311965/…，我发现唯一的解决方案是添加但仅适用于chrome的解决方案，请帮忙:(

— user1213707 2012年

您原始问题的答案没有帮助吗？

— Pekka '02

2

我个人是为Chrome开发的（倾向于复制到Firefox），最后担心IE。

— SpaceBeers '02

196

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 
}

— 马丁·克里斯蒂安森
source

16

此规则将同时适用于Safari和Chrome

— Miuranga

1

大概@AlirezaNoori，因为它适用于Chrome浏览器和 Safari浏览器，而不是唯一的浏览器。

— thom_nic 2014年

2

它也可以在IE Edge中使用，请查看此jeffclayton.wordpress.com/2015/08/10/1279

— llamerr

1

我使用data-ng-class了angular并.chrome在JS表达式中添加了一个类。像魅力一样工作。谢谢

— Kraken

1

我发现将媒体查询放在底部有帮助。

— Brownrice

27

众所周知，Chrome是Webkit浏览器，Safari也是Webkit浏览器，也是Opera，因此使用媒体查询或CSS hacks很难将Google Chrome定位为目标，但是Javascript确实更有效。

这是针对Google Chrome 14及更高版本的一段Javascript代码，

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

以下是可用浏览器黑客的列表，其中包括受该浏览器影响的Google Chrome浏览器

WebKit骇客：

.selector:not(*:root) {}

Google Chrome：所有版本
Safari：所有版本
歌剧：14及更高版本
Android：所有版本

支持黑客：

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

Google Chrome 28，以及Google Chrome> 28，Opera 14和Opera> 14

Google Chrome：28及更高版本
歌剧：14及更高版本

财产/价值黑客：

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

谷歌浏览器28，和谷歌浏览器<28，歌剧14和Opera> 14，和Safari 7且小于7 - 谷歌浏览器：28和前 - Safari浏览器： 7和前 -歌剧：14及更高版本

JavaScript技巧：1

var isChromium = !!window.chrome;

谷歌浏览器：所有版本
歌剧：14及更高版本
安卓： 4.0.4

JavaScript技巧：2 {Webkit}

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

谷歌浏览器：所有版本
苹果浏览器：3及更高版本
歌剧 ：14及更高版本

JavaScript技巧：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岁及以上

欲了解更多信息，请访问该网站

— Hbirjand
source

正如塞巴斯蒂安所说，@supports（-webkit-appearance：none）{}影响Safari，已在v.10上进行了测试

— Dmitrii Malyshev

1

@supports (-webkit-appearance:none) { }现在为MS Edge工作。

— Vadim Ovchinnikov

@media all和（-webkit-min-device-pixel-ratio：0）和（min-resolution：.001dpcm）{.selector {}}现在也影响Firefox

— Joe Salazar

13

chrome> 29和Safari> 8的更新：

Safari现在支持 @supports功能。这意味着这些黑客也将适用于Safari。

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

— bil
source

4

对我来说，文本在FireFox中也是红色的。

— Kerry7777

9

此 CSS浏览器选择器可能会对您有所帮助。看一看。

CSS Browser Selector是一款非常小的javascript，只有一行可以启用CSS选择器。它使您能够为每个操作系统和每个浏览器编写特定的CSS代码。

— tarashish
source

对于简单的JavaScript，声明“ css浏览器选择器”有点令人困惑。CSS本身不支持浏览器的任何选择！

— 阿明2012年

抱歉，但这就是其创建者所称的。我刚刚引用了他:(

— tarashish 2012年

作者的话语很刺眼；-)

— 阿明2012年

1

你们，真的不希望添加JS的整个负载只为这:(否则可能会有所帮助。

— 杰米Hutber

主要问题是，由于它依赖于单个程序员，因此它变成了易碎的单点故障，并且需要不断跟踪其更改以保持最新。基本上，这是一种解决当前问题的可疑方法，尽管这可能会在短期内有所帮助，但并不能解决问题。

— Patanjali

7

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

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

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

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

展开摘要

— CodeGust
source

2

这个技巧对我有用。依靠屏幕分辨率的解决方案也影响了Firefox。

— 史蒂夫·布雷斯

@stevebreese注意，我怀疑它仅适用于现代浏览器。

— 莎莎

3

到目前为止，从未遇到过我不得不做一个仅限Chrome的CSS hack的实例。但是，我发现这可以将内容移动到幻灯片下面的位置：clear; both; 在Chrome中什么都没有影响（但在其他地方都可以正常工作-甚至是IE！）。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }

— 伊莱恩
source

1

很简单。只需在加载时向您的元素添加第二个类或id即可指定它是哪个浏览器。

因此，基本上在前端，检测浏览器，然后设置id / class，然后将使用这些浏览器特定的名称标签来定义您的css

— 颜·贝拉万
source

1

如果您希望我们可以将类添加到特定的浏览器，请参阅[小提琴链接] [1] [1]：

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

展开摘要

— Neel Upadhyay
source

1

我正在使用适用于chrome样式的sass mixin，这是为了Chrome 29+借鉴上述Martin Kristiansson的解决方案。

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

像这样使用它：

@include chrome-styles {
  .header { display: none; }
}

— 纳米级
source

5

Firefox现在也可以读取此规则，因此，如果您只想定位Chrome，则不再适用。

— 马恩

0

Chrome没有提供专门的条件来设置CSS定义！不需要这样做，因为Chrome浏览器会解释w3c标准中定义的网站。

因此，您有两种有意义的可能性：

通过javascript获取当前的浏览器（在这里查看）
通过php / serverside获取当前的浏览器（在这里查看）

— 阿明
source

2

绝对有理由为什么要应用Chrome，而不是Safari或Firefox，例如浏览器呈现<select>元素的方式有所不同。纯CSS解决方案比必须包含服务器或客户端代码要干净得多。

— thom_nic 2014年

1

Chrome并不完美。像其他任何软件一样，它也有错误，包括渲染引擎中的错误，并且某些错误在几年后仍未得到修复。因此，能够检测到Chrome浏览器以应对这些错误的影响非常重要。bugs.chromium.org/p/chromium/issues/...

— 乔·萨拉萨尔

0

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

检查this.it为我工作。

— 阿山鲁帕辛河
source