Belirli CSS kuralları yalnızca Chrome'a ​​nasıl uygulanır?

Aşağıdaki CSS'yi divyalnızca Google Chrome'da belirli bir alana uygulamanın bir yolu var mı ?

position:relative;
top:-2px;

CSS Çözümü

dan 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 Çözümü

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

Bildiğimiz gibi, Chrome bir Webkit tarayıcısıdır, Safari de bir Webkit tarayıcısıdır ve Ayrıca Opera, bu nedenle Google Chrome'u medya sorguları veya CSS korsanları kullanarak hedeflemek çok zordur, ancak Javascript gerçekten daha etkilidir.

İşte Google Chrome 14 ve sonraki sürümleri hedefleyecek Javascript kodu parçası,

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

ve aşağıda, bu saldırıdan etkilenen tarayıcı dahil olmak üzere Google Chrome için Kullanılabilir Tarayıcı korsanlarının bir listesi bulunmaktadır.

WebKit saldırısı:

.selector:not(*:root) {}

• Google Chrome : Tüm sürümler
• Safari : Tüm sürümler
• Opera : 14 ve Daha Sonra
• Android : Tüm sürümler

Hack'leri Destekler:

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

Google Chrome 28 ve Google Chrome> 28, Opera 14 ve Opera> 14

• Google Chrome : 28 ve Daha Sonra
• Opera : 14 ve Daha Sonra

Özellik / Değer Hackleri:

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

Google Chrome 28 ve Google Chrome <28, Opera 14 ve Opera> 14 ve Safari 7 ve Daha Az 7. - Google Chrome : 28 ve Öncesi - Safari : 7 ve Öncesi - Opera : 14 ve Sonrası

JavaScript Hacks: 1

var isChromium = !!window.chrome;

• Google Chrome : Tüm sürümler
• Opera : 14 ve Daha Sonra
• Android : 4.0.4

JavaScript Hacks: 2 {Webkit}

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

• Google Chrome : Tüm sürümler
• Safari : 3 ve Daha Sonra
• Opera : 14 ve Daha Sonra

JavaScript Hacks: 3

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

• Google Chrome : 14 ve Daha Sonra

Medya Sorgu Hack'leri: 1

@media \\0 screen {}

• Google Chrome : 22-28
• Safari : 7 ve Daha Sonra

Medya Sorgu Hack'leri: 2

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

• Google Chrome : 29 ve Daha Sonra
• Opera : 16 ve Daha Sonra

Daha fazla bilgi için lütfen bu web sitesini ziyaret edin

Chrome> 29 ve Safari> 8 için bir güncelleme:

Safari artık @supportsözelliği de destekliyor . Bu, bu saldırıların Safari için de geçerli olacağı anlamına geliyor.

Ben tavsiye ederim

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

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

Bu css tarayıcı seçici size yardımcı olabilir. Bir göz at.

CSS Tarayıcı Seçici, CSS seçicilerini güçlendiren tek bir satıra sahip çok küçük bir javascripttir. Size her işletim sistemi ve her tarayıcı için belirli CSS kodu yazma yeteneği sağlar.

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

Belirli CSS kurallarını yalnızca .selector:not(*:root)seçicilerinizle kullanarak Chrome'a ​​uygulayın :

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

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

Şimdiye kadar yalnızca Chrome'a ​​özgü bir css kesmek zorunda kaldığım bir örneğe rastlamadım. Ancak, bunu net bir şekilde bir slayt gösterisinin altına taşımak için buldum: her ikisi de; Chrome'da hiçbir şeyi etkilemedi (ancak her yerde iyi çalıştı - IE bile!).

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

İsterseniz belirli bir tarayıcıya sınıf ekleyebiliriz bkz. [fiddle link] [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>

Krom stilleri için bir sass karışımı kullanıyorum, bu, Chrome 29+yukarıdaki Martin Kristiansson'dan alınan çözümü ödünç almak için.

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

Bunu şu şekilde kullanın:

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

Chrome, yalnızca kendisi için CSS tanımlarını ayarlamak için kendi koşullarını sağlamaz! Bunun yapılmasına gerek yoktur, çünkü Chrome web sitelerini w3c standartlarında tanımlandığı gibi yorumlar.

Yani, iki anlamlı olasılığınız var:

1. Geçerli tarayıcıyı javascript ile edinin ( buraya bakın )
2. Geçerli tarayıcıyı php / server ile alın ( buraya bakın )

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

bunu kontrol et. benim için çalış.

Çok basit. Yükleme sırasında, hangi tarayıcı olduğunu belirten ikinci bir sınıf veya kimlik eklemeniz yeterlidir.

Yani temelde ön uçta, tarayıcıyı tespit edin ve ardından kimlik / sınıf ayarlayın ve css'niz bu tarayıcıya özel isim etiketleri kullanılarak tanımlanacaktır.