Bagaimana cara menerapkan aturan CSS khusus ke Chrome saja?


102

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

position:relative;
top:-2px;


1
Masalah apa yang Anda hadapi yang memaksa Anda melakukan ini? Menargetkan aturan CSS untuk browser tertentu bukanlah desain yang bagus dan dalam banyak kasus, seharusnya tidak diperlukan lagi saat ini.
Pekka

@Pekka, ini masalah saya stackoverflow.com/questions/9311965/… , dan saya menemukan bahwa satu-satunya solusi adalah menambahkannya tetapi hanya untuk chrome, tolong bantu :(
user1213707

Apakah jawaban dalam pertanyaan awal Anda tidak membantu?
Pekka

2
Secara pribadi saya mengembangkan untuk Chrome (yang cenderung menyalin ke Firefox) dan khawatir tentang IE di akhir.
SpaceBeers

Jawaban:


196

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 
}

16
Aturan ini akan berlaku untuk safari dan chrome
Miuranga

1
@AlirezaNoori mungkin karena ini berlaku untuk Chrome dan Safari, tidak hanya Chrome.
thom_nic

2
Ini juga berfungsi di IE Edge, periksa jeffclayton.wordpress.com/2015/08/10/1279
llamerr

1
Saya menggunakan data-ng-classuntuk angular dan menambahkan .chromekelas dengan ekspresi JS. Bekerja seperti pesona. Terima kasih
Kraken

1
Saya merasa terbantu dengan memiliki pertanyaan media di bagian bawah.
Brownrice

27

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


seperti yang dikatakan Sebastian @supports (-webkit-appearance: none) {} memengaruhi Safari, diuji pada v.10
Dmitrii Malyshev

1
@supports (-webkit-appearance:none) { }sekarang bekerja untuk MS Edge.
Vadim Ovchinnikov

@media all dan (-webkit-min-device-pixel-ratio: 0) dan (min-resolution: .001dpcm) {.selector {}} sekarang memengaruhi Firefox juga
Joe Salazar

13

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

4
Teksnya juga berwarna merah di FireFox untuk saya.
Kerry7777

9

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.


Deklarasi "css browser selector" agak membingungkan untuk javascript sederhana. CSS sendiri tidak mendukung pilihan apa pun oleh browser!
Armin

Maaf tapi itulah yang disebut penciptanya. Saya baru saja mengutipnya :(
tarashish

Frasa penulis yang sangat seram ;-)
Armin

1
kamu, tidak benar-benar ingin menambahkan seluruh beban js hanya untuk ini :( tapi selain itu bisa membantu.
Jamie Hutber

Masalah utamanya adalah bahwa hal itu menjadi titik kegagalan tunggal yang rapuh karena bergantung pada satu programmer yang berdedikasi, dan bahwa seseorang perlu terus melacak perubahan mereka agar tetap up to date. Pada dasarnya, cara yang meragukan untuk menangani masalah yang sedang berlangsung, karena meskipun dapat membantu dalam jangka pendek, itu tidak menyelesaikan masalah.
Patanjali

7

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>


2
Peretasan ini berhasil untuk saya. Solusi yang mengandalkan resolusi layar juga memengaruhi Firefox.
Steve Breese

@stevebreese Memperhatikannya, saya kira ini hanya untuk browser modern.
Shasha

3

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

1

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>


1

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

5
Firefox sekarang membaca aturan ini juga, jadi tidak ada gunanya lagi jika Anda hanya ingin menargetkan Chrome.
Mahn

0

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 )

2
Ada alasan pasti mengapa Anda ingin menerapkan ke Chrome tetapi tidak misalnya Safari atau Firefox, misalnya perbedaan dalam cara browser merender elemen <select>. Solusi khusus CSS akan jauh lebih bersih daripada harus melibatkan kode sisi server atau klien.
thom_nic

1
Chrome tidak sempurna. Sama seperti perangkat lunak lainnya, ia memiliki bug termasuk di mesin rendering, dan beberapa tidak diperbaiki setelah beberapa tahun. Jadi, penting untuk dapat mendeteksi Chrome untuk melawan efek dari bug tersebut. bugs.chromium.org/p/chromium/issues/…
Joe Salazar

0
/* 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.


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.