欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何將特定的CSS規則僅應用于Chrome？

CSS
黃文隆1年前10瀏覽0評論

有沒有辦法只在Google Chrome中將下面的CSS應用到特定的div？

position:relative;
top:-2px;

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) {
  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 
}

正如我們所知，Chrome是一個Webkit瀏覽器，Safari也是一個Webkit瀏覽器，也是Opera，所以很難使用媒體查詢或CSS黑客來瞄準谷歌Chrome，但Javascript確實更有效。

這是一段針對谷歌Chrome 14及更高版本的Javascript代碼，

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

下面是谷歌chrome瀏覽器可用的黑客列表，包括受黑客影響的瀏覽器

WebKit黑客:

.selector:not(*:root) {}

谷歌瀏覽器:所有版本 Safari:所有版本 歌劇:14及以后 安卓:所有版本 支持黑客:

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

谷歌Chrome 28和谷歌Chrome & gt28，Opera 14和Opera & gt14

谷歌瀏覽器:28及更高版本 歌劇:14及以后 Firefox: 64及更高版本(即不再適用) 屬性/價值黑客:

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

谷歌Chrome 28，以及谷歌Chrome & lt28，Opera 14和Opera & gt14，還有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;

谷歌瀏覽器:所有版本 Safari: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歲及以后 欲了解更多信息，請訪問該網站

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;
  }
}

這個css瀏覽器選擇器可以幫助你?？匆豢?。

CSS瀏覽器選擇器是一個非常小的javascript，只有一行代碼 它賦予CSS選擇器權力。它賦予你寫作的能力 每個操作系統和每個瀏覽器的特定CSS代碼。

http://www . template monster . com/help/how-to-create-browser-specific-CSS-rules-styles . html

僅通過使用將特定的CSS規則應用于Chrome。選擇器:not(*:root)與您的選擇器:

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

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

到目前為止，我還從未遇到過不得不進行純Chrome CSS黑客攻擊的情況。然而，我發現這是為了移動幻燈片下面的內容。在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;
    }

公認的答案也符合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可能是唯一的選擇。

的。選擇器:not(*:root){ } https://stackoverflow.com/a/25496712/1218408的hack通過92版仍然排除Firefox但匹配Safari。

如果你愿意，我們可以給特定的瀏覽器添加一個類。

示例:

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>

如此簡單。只需在加載時向元素添加第二個類或id，指定它是哪個瀏覽器。

因此，基本上在前端，檢測瀏覽器，然后設置id/class，你的css將使用這些瀏覽器特定的名稱標簽

Chrome沒有提供自己的條件來設置CSS定義！應該沒有必要這樣做，因為Chrome解釋網站就像w3c標準中定義的那樣。

所以，你有兩種有意義的可能性:

通過javascript獲取當前瀏覽器(看這里) 通過php/serverside獲取當前瀏覽器(看這里) 我用的是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; }
}

如果你想把CSS只應用到Chrome瀏覽器(Webkit/Blink)，你可以試試下面的代碼。請記住，還有其他瀏覽器使用Chrome的Webkit引擎...

@supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {

  body {
    background: blue;
  }

}

在2022年，這段代碼運行得很好，應該可以在2013年以前的大多數Chrome瀏覽器上運行。它應該過濾掉所有的Internet Explorer、早期的Trident Edge、Firefox、Safari和許多其他瀏覽器。但是請測試！

請記住微軟Edge版本83，后來在2020年5月從舊的三叉戟引擎切換到Chrome的Blink瀏覽器引擎。因此，這應該也適用于較新的Edge瀏覽器。期待這樣的功能，因為發動機在封面下是接近相同的！

關于此CSS的注釋

如上所述，上面的代碼適用于所有共享Chrome Webkit或Blink引擎的現代版本的瀏覽器。在基于Chrome的引擎中盡可能早地支持瀏覽器代碼中的兩個主要決定因素是對CSS特性at-rule @supports和較新的Chrome pre fixed property-WebKit-appearance:none的支持。加起來，Chrome對兩者的全面支持直到2013年5月才開始(我相信)。所以你可以指望Chrome瀏覽器版本28到今天會或應該支持上面的CSS黑客。不過還是那句話，請測試！

所以讓我們來看看黑客是如何工作的.....

使用新的@supports at-rule或“功能檢查”允許您的瀏覽器檢查用戶瀏覽器是否支持特定的CSS屬性或功能及其值。問題是很少有老的甚至是新的瀏覽器支持@supports CSS技巧。直到2013年5月瀏覽器發布時，它才真正在Chrome中得到支持。所以這將是最早支持的Chrome瀏覽器。請記住，Chrome直到2008年才發布，所以是一個遲到的瀏覽器。

但是瀏覽器不支持@supports是這種CSS對幾乎所有其他瀏覽器隱藏的主要方式，因為采用率仍然很低。2010年之前的所有瀏覽器以及2013年之前的大多數瀏覽器都將忽略上述規則。但是Chrome版本27直到今天都支持這個規則。微軟Inte rnet Explorer 1-11完全忽略它，只有微軟Edge版本83到現在(2020年至今)才會理解@supports規則。Firefox直到2019年才采用，大多數Safari用戶代理從2021年開始采用。所以它是一個主要的過濾工具！

通用的& quot外觀& quotCSS屬性(無前綴版本)早在2006年就在Mozilla/ Firefox中得到支持，在2010年左右的Chrome中，有前綴的實驗版本部分支持各種功能。Firefox前綴版本on -moz-appearance和Chrome瀏覽器前綴版本webkit-appearance似乎很早就被采用了，因此會得到廣泛的瀏覽器支持。值& quot按鈕& quot(2006年之前)比& quot無& quot對于& quot外貌& quot，所以增加了你過濾掉那些瀏覽器的機會。"無& quot對于& quot外觀& quot在Chrome中是一個很早就被支持的屬性值(2010)，所以被用來盡可能的拓寬Chrome瀏覽器的范圍。因此，在上面的代碼中，這兩個前綴規則都刪除了大多數mozilla/Firefox瀏覽器，并盡可能拓寬了大多數Chrome瀏覽器。

所以你可以假設從2013年開始Chrome瀏覽器將能夠使用下面的規則，并且從那以后所有使用Webkit引擎的瀏覽器都可以看到。

邏輯(not (-moz-appearance:none))對所有Mozilla/Firefox瀏覽器隱藏CSS塊。當結合對& quot@支持& quot然而，它確保甚至更早的都被排除在外。

CSS屬性contain:paint主要是2016年以后在Chrome和Firefox中支持的。所以這將Safari瀏覽器排除在CSS塊之外。然而，一些Safari iOS轉而使用Webkit Chrome引擎。所以contain:paint確保那些老的Safari瀏覽器被排除在Chrome Webkit過濾器之外。

最后，Chrome前綴規則-webkit-appearance只適用于Chrome Webkit瀏覽器。它確保下面的規則只被Chrome看到。請記住，一些后來的Firefox瀏覽器開始支持Chrome前綴屬性。但是有了上面的額外過濾器，它們現在從上面的CSS塊中隱藏了。如上所述，-webkit-appearance:沒有一個被廣泛采用，至少可以追溯到@support at-rules在web瀏覽器中的最早采用日期。據我所知，那是2013年5月左右的某個時候。

所以總的來說，上面的CSS過濾器只允許2013年版本27和2020年版本83的Chrome瀏覽器查看代碼。

為什么我們甚至需要為CHROME應用CSS？

自2010年以來，HTML5和CSS標準發生了變化。不再有W3C推薦標準了，所有瀏覽器都應用了經過仔細協商的標準。這意味著瀏覽器供應商在CSS支持范圍內不斷隨機改變他們的瀏覽器(稱為Evergreen)。這也意味著CSS將動態變化，代碼分叉將很少對齊，所有其他瀏覽器中的CSS將很少相互匹配，并且& quot黑客& quot以上也可能發生變化。

這一失敗的Web標準運動形成了為什么新的CSS在瀏覽器和版本之間具有部分支持的基礎，瀏覽器將越來越看起來不一樣，并且這些前綴CSS hacks將在未來被需要。不好:(

看看這個，對我有用。