Bagaimana cara menerapkan aturan CSS khusus ke Chrome saja?

Apakah ada cara untuk menerapkan CSS berikut ke khusus divhanya di Google Chrome?

position:relative;
top:-2px;

Solusi CSS

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

Solusi JavaScript

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

Seperti yang kita ketahui, Chrome adalah Webkit browser , Safari juga browser Webkit, dan juga Opera, jadi sangat sulit untuk menargetkan Google Chrome, menggunakan kueri media atau hack CSS, tetapi Javascript benar-benar lebih efektif.

Berikut adalah potongan kode Javascript yang akan menargetkan Google Chrome 14 dan yang lebih baru,

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

dan di bawah ini adalah daftar peretasan Peramban yang Tersedia, untuk Google chrome termasuk peramban yang terpengaruh, oleh peretasan itu

Retas WebKit:

.selector:not(*:root) {}

• Google Chrome : Semua versi
• Safari : Semua versi
• Opera : 14 dan Nanti
• Android : Semua versi

Mendukung Hacks:

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

Google Chrome 28, dan Google Chrome> 28, Opera 14 dan Opera> 14

• Google Chrome : 28 dan Nanti
• Opera : 14 dan Nanti

Properti / Nilai Hacks:

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

Google Chrome 28, dan Google Chrome <28, Opera 14 dan Opera> 14, serta Safari 7 dan Kurang dari 7. - Google Chrome : 28 dan Sebelumnya - Safari : 7 dan Sebelumnya - Opera : 14 dan Nanti

Peretasan JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : Semua versi
• Opera : 14 dan Nanti
• Android : 4.0.4

Peretasan JavaScript: 2 {Webkit}

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

• Google Chrome : Semua versi
• Safari : 3 dan Nanti
• Opera : 14 dan Nanti

Peretasan JavaScript: 3

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

• Google Chrome : 14 dan Nanti

Hacks Query Media: 1

@media \\0 screen {}

• Google Chrome : 22 hingga 28
• Safari : 7 dan Nanti

Hacks Media Query: 2

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

• Google Chrome : 29 dan Nanti
• Opera : 16 dan Nanti

Untuk informasi lebih lanjut silakan kunjungi situs web ini

Pembaruan untuk chrome> 29 dan Safari> 8:

Safari sekarang mendukung @supports fitur tersebut juga. Itu berarti peretasan itu juga berlaku untuk Safari.

saya ingin merekomendasikan

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

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

Pemilih browser css ini dapat membantu Anda. Lihatlah.

CSS Browser Selector adalah javascript yang sangat kecil dengan hanya satu baris yang memberdayakan pemilih CSS. Ini memberi Anda kemampuan untuk menulis kode CSS khusus untuk setiap sistem operasi dan setiap browser.

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

Terapkan aturan CSS tertentu ke Chrome hanya dengan menggunakan .selector:not(*:root)dengan pemilih Anda:

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

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

Tidak pernah menemukan contoh di mana saya harus melakukan peretasan css khusus Chrome sampai sekarang. Namun, saya menemukan ini untuk memindahkan konten ke bawah slideshow yang jelas: keduanya; tidak mempengaruhi apa pun di Chrome (tetapi bekerja dengan baik di tempat lain - bahkan 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;
    }

jika mau kita bisa menambahkan kelas ke brwoser tertentu lihat [link biola] [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>

Saya menggunakan campuran sass untuk gaya krom, ini untuk Chrome 29+meminjam solusi dari Martin Kristiansson di atas.

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

Gunakan seperti ini:

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

Chrome tidak memberikan persyaratan sendiri untuk menetapkan definisi CSS hanya untuk itu! Seharusnya tidak perlu melakukan ini, karena Chrome mengartikan situs web seperti yang ditentukan dalam standar w3c.

Jadi, Anda memiliki dua kemungkinan yang berarti:

1. Dapatkan browser terkini dengan javascript ( lihat di sini )
2. Dapatkan browser saat ini dengan php / serveride ( lihat di sini )

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

periksa ini. itu berhasil untuk saya.

Sangat sederhana. Cukup tambahkan kelas atau id kedua ke elemen Anda pada waktu pemuatan yang menentukan browser mana itu.

Jadi pada dasarnya di bagian depan, deteksi browser lalu atur id / class dan css Anda akan ditentukan menggunakan nametag khusus browser tersebut