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

Posted

技术标签:

【中文标题】如何仅将特定的 CSS 规则应用于 Chrome?【英文标题】:How to apply specific CSS rules to Chrome only? 【发布时间】:2012-03-08 21:17:31 【问题描述】:

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

position:relative;
top:-2px;

【问题讨论】:

How to do a Chrome/Opera specific stylesheet? 的可能重复项 您面临什么问题迫使您这样做?针对特定浏览器的 CSS 规则并不是很好的设计,在大多数情况下,现在应该不再需要了。 @Pekka 这是我的问题***.com/questions/9311965/…,我发现唯一的解决方案是添加这些但仅适用于 chrome,请帮助:( 您原来问题中的答案没有帮助吗? 我个人为 Chrome 开发(往往会复制到 Firefox),最后担心 IE。 【参考方案1】:

CSS 解决方案

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

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


/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) 
    divtop: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 

【讨论】:

此规则将同时适用于 safari 和 chrome @AlirezaNoori 可能是因为它适用于 Chrome Safari,而不是 Chrome。 CSS 解决方案 hack 仅适用于“Chrome only”,因为 @media screen and(-webkit-min-device-pixel-ratio:0) - 请注意“and”后面的重要缺失空格。但要注意:在 CSS 预处理器中,您需要找到一种方法来避免它们所做的更正...... 它也可以在 IE Edge 中使用,请查看jeffclayton.wordpress.com/2015/08/10/1279 我使用 data-ng-class 来表示角度,并添加了一个带有 JS 表达式的 .chrome 类。像魅力一样工作。谢谢【参考方案2】:

众所周知,Chrome 是一个Webkit 浏览器,Safari 也是一个 Webkit 浏览器,还有 Opera,所以很难针对 Google Chrome,使用媒体查询或 CSS hack,但 javascript 确实更有效。

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

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

以下是可用浏览器黑客的列表,适用于谷歌浏览器,包括受影响的浏览器,通过该黑​​客

WebKit 破解:

.selector:not(*:root) 
谷歌浏览器所有版本 Safari所有版本 Opera :14 及更高版本 Android所有版本

支持黑客:

@supports (-webkit-appearance:none) 

Google Chrome 28、Google Chrome > 28、Opera 14 和 Opera > 14

谷歌浏览器28 岁及以后 Opera :14 及更高版本 Firefox64 及更高版本(即不再有效)

财产/价值黑客:

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

Google Chrome 28、Google Chrome 14、Safari 7 和小于 7。

谷歌浏览器28 岁及之前 Safari7 及之前 Opera :14 及更高版本

JavaScript 黑客:1

var isChromium = !!window.chrome;
谷歌浏览器所有版本 Opera :14 及更高版本 Android4.0.4

JavaScript Hacks:2 Webkit

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
谷歌浏览器所有版本 Safari3 及更高版本 Opera :14 及更高版本

JavaScript 黑客:3

var isChrome = !!window.chrome && !!window.chrome.webstore;
谷歌浏览器14 及更高版本

媒体查询黑客:1

@media \\0 screen 
谷歌浏览器22 到 28 Safari7 及更高版本

媒体查询黑客:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm)  .selector  
谷歌浏览器29 岁及以后 Opera16 岁及以后

欲了解更多信息,请访问this website

【讨论】:

正如 Sebastian 所说,@supports (-webkit-appearance:none) 影响 Safari,在 v.10 上测试 @supports (-webkit-appearance:none) 现在为 MS Edge 工作。 @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) .selector 现在也会影响 Firefox “支持 hack”匹配 Firefox 64+。【参考方案3】:

chrome > 29 和 Safari > 8 的更新:

Safari 现在也支持@supports 功能。这意味着这些 hack 也适用于 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;
  

【讨论】:

对我来说,Firefox 中的文本也是红色的。【参考方案4】:

Thiscss 浏览器选择器可能会对您有所帮助。看看吧。

CSS 浏览器选择器是一个非常小的 javascript,只有一行 赋予 CSS 选择器权力。它让你有写作的能力 每个操作系统和每个浏览器的特定 CSS 代码。

【讨论】:

声明“css浏览器选择器”对于一个简单的javascript来说有点混乱。 CSS 本身不支持任何浏览器的选择! 抱歉,它的创建者是这么称呼它的。我刚刚引用了他的话:( 作者非常骇人听闻的话 ;-) 是的,真的不想为此添加一大堆 js :( 但否则可能会有所帮助。 主要问题是它成为一个脆弱的单点故障,因为它依赖于一个专门的程序员,并且需要不断跟踪他们的更改以保持最新。基本上,这是一种处理持续问题的可疑方法,虽然它可能在短期内有所帮助,但并不能解决问题。【参考方案5】:

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>

【讨论】:

这个技巧对我有用。依赖屏幕分辨率的解决方案也影响了 Firefox。 @stevebreese 注意到了,我怀疑它只适用于现代浏览器。 这个解决方案对我不起作用。但我喜欢森林绿色。【参考方案6】:

到目前为止,我从未遇到过我必须进行仅限 Chrome 的 css hack 的实例。但是,我发现这会将内容移动到清晰的幻灯片下方:两者;在 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;
    

【讨论】:

【参考方案7】:

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

要针对所有 Webkit 浏览器(Edge 79+、Chrome、Safari),请找到 Firefox 不支持的 -webkit specific CSS extension(使用 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 可能是唯一的选择。

https://***.com/a/25496712/1218408 中的 .selector:not(*:root) hack 仍然排除 Firefox 至 92 版,但匹配 Safari。

【讨论】:

很好,这是迄今为止唯一对我有用的解决方案(截至 2022 年 1 月)【参考方案8】:

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

所以基本上在前端,检测浏览器然后设置 id/class 并且您的 css 将使用那些特定于浏览器的名称标签来优化

【讨论】:

【参考方案9】:

如果您愿意,我们可以将类添加到特定的浏览器,请参阅 [小提琴链接][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>

【讨论】:

【参考方案10】:

Chrome 没有提供自己的条件来设置 CSS 定义!没有必要这样做,因为 Chrome 会像 w3c 标准中定义的那样解释网站。

因此,您有两种有意义的可能性:

    通过javascript获取当前浏览器(look here) 通过php/serverside(look here)获取当前浏览器

【讨论】:

你肯定有理由想申请 Chrome 但不是例如Safari 或 Firefox,例如浏览器如何呈现 Chrome 并不完美。就像任何其他软件一样,它也有包括渲染引擎在内的错误,而且有些在几年后还没有修复。因此,能够检测 Chrome 以抵消这些错误的影响非常重要。 bugs.chromium.org/p/chromium/issues/… 不仅仅是 CSS 需要特定于 Chrome。假设您想使用 Chrome 的 #:~:text=... 功能(如果可用),否则,您想使用 #nearestanchor ?太糟糕了,我们没有旧的 IE 条件黑客:【参考方案11】:

我正在为 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; 

【讨论】:

Firefox 现在也读取此规则,因此如果您只想针对 Chrome,则不再适用。 我的确切问题@Mahn,很惊讶这个线程中没有解决方案......【参考方案12】:
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) 
     /*your rules for chrome*/
     #divid 
         position:relative;
         top:-2px; 
     

检查一下。它对我有用。

【讨论】:

这匹配 Firefox 63+ 和 Edge 12+。

以上是关于如何仅将特定的 CSS 规则应用于 Chrome?的主要内容,如果未能解决你的问题,请参考以下文章

仅将 CSS 样式表应用于单个 UserControl

使 ESLint 仅将规则应用于某些文件名模式

如何仅将 CSS 过渡应用于 transform 属性

SwiftUI:如何仅将修饰符应用于特定元素?

如何仅将 CSS 样式应用于文本

如何仅将加载状态应用于 livewire 中的特定组件