Bagaimanakah Saya Boleh Memohon Peraturan CSS Tertentu Hanya pada Google Chrome?

Menggunakan Peraturan CSS Khusus pada Chrome: Teknik dan Penyelesaian

Menyasarkan elemen khusus dalam halaman web berdasarkan penyemak imbas yang digunakan boleh memberikan pengalaman pengguna yang dipertingkatkan dan mengoptimumkan prestasi laman web. Satu senario sedemikian melibatkan penggunaan gaya CSS pada div tertentu sahaja dalam Google Chrome.

Penyelesaian CSS

Untuk mencapai ini, anda boleh menggunakan pertanyaan media dengan -webkit- khusus awalan, seperti yang ditunjukkan dalam kod berikut:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

Pertanyaan ini menyasarkan peranti dengan nisbah piksel minimum daripada 0, dengan berkesan mengehadkan aplikasinya kepada Chrome manakala penyemak imbas tidak khusus kekal tidak terjejas.

Selain itu, versi Chrome yang lebih khusus boleh disasarkan menggunakan -webkit-min-device-pixel-ratio dan sifat resolusi min:

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

Untuk Chrome versi 22-28, awalan -chrome- boleh digunakan:

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

Penyelesaian JavaScript

Sebagai alternatif, anda boleh menggunakan JavaScript untuk menyemak kehadiran Chrome dalam penyemak imbas pengguna:

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

Pendekatan ini menyediakan pilihan untuk menggunakan gaya CSS secara dinamik berdasarkan jenis penyemak imbas. Walau bagaimanapun, ia memerlukan keupayaan JavaScript dan mungkin tidak sesuai dalam semua senario.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon Peraturan CSS Tertentu Hanya pada Google Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!