Bagaimanakah Saya Boleh Menggunakan Gaya CSS Secara Eksklusif pada Safari Semasa Mengelakkan Konflik dengan Penyemak Imbas Lain?

Adakah Mungkin Menggayakan Kandungan Eksklusif untuk Safari?

Masalah:

Anda' kembali bergelut untuk mencari CSS yang hanya mempengaruhi Safari, kerana kaedah sebelumnya turut memberi kesan kepada Chrome disebabkan kedua-dua penyemak imbas pada masa ini menggunakan WebKit. Penjajaran yang berbeza dalam Safari dan Chrome menjadikan penggayaan amat mencabar.

Penyelesaian:

/* Safari 7.1+ */

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

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

Sebagai alternatif, untuk Safari 10.1 dan ke atas, gunakan:

/* Safari 10.1+ */

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

    .safari_only { 

        /* CSS styles */

    }
}}

atau

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        /* CSS styles */

    }
}}

Untuk Safari 6.1 hingga 10.0, gunakan:

/* 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 { 

        /* CSS styles */

    }
}}

Penggodaman tambahan untuk versi Safari tertentu boleh didapati dalam respons yang disediakan.

Penggunaan:

<div>

Nota:

Ingat untuk sentiasa menguji godaman ini pada halaman ujian langsung yang disediakan sebelum melaksanakannya di tapak web anda. Pastikan halaman ujian berfungsi seperti yang dimaksudkan, menghapuskan kemungkinan konflik CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Gaya CSS Secara Eksklusif pada Safari Semasa Mengelakkan Konflik dengan Penyemak Imbas Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!