Bagaimana Saya Boleh Menggunakan Hacks CSS untuk Menggayakan Safari Sahaja?

Css Hacks untuk Menyasarkan Safari Sahaja

Mengapa Gaya Asingkan untuk Safari?

CSS Hacks selalunya digunakan untuk menyasarkan tertentu pelayar untuk tujuan penggayaan. Dalam kes ini, kami berhasrat untuk menggunakan gaya semata-mata pada Safari, tidak termasuk penyemak imbas lain seperti Chrome.

Ketidakberkesanan Hacks Semasa

Seperti yang dinyatakan dalam catatan asal, @media skrin dan (-webkit-min-device-pixel-ratio:0) hack telah menjejaskan kedua-dua Safari dan Chrome.

Penyelesaian Dikemas Kini untuk Safari

Walau bagaimanapun, berikut ialah beberapa peretasan CSS baharu yang akan menyasarkan Safari secara eksklusif:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/ Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Penggunaan

Untuk menggunakan gaya ini secara khusus pada elemen dalam Safari, gunakan kelas safari_only seperti ini:

<div class="safari_only">This text will be blue in Safari</div>

Nota:

Adalah penting untuk menggunakan nama kelas tersuai semasa melaksanakan penggodaman ini untuk mengelakkan akibat yang tidak diingini. Selain itu, ambil perhatian bahawa penggodaman ini mungkin tidak berfungsi dalam semua senario, terutamanya jika tapak web menggunakan penapis atau pengkompil CSS, kerana ia mungkin mengubah atau mengalih keluar penggodaman.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggunakan Hacks CSS untuk Menggayakan Safari Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!