apakah ada hack css hanya untuk safari TIDAK chrome?

Saya mencoba untuk menemukan hack css hanya untuk safari TIDAK chrome, saya tahu ini adalah kedua browser webkit tetapi saya mengalami masalah dengan penyelarasan div di chrome dan safari, masing-masing menampilkan berbeda.

saya telah mencoba menggunakan ini tetapi itu mempengaruhi chrome juga,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

apakah ada yang tahu tentang yang lain yang hanya akan berlaku untuk safari?

• DIPERBARUI UNTUK CATALINA & SAFARI 13 (Pembaruan awal 2020) *

CATATAN: Filter dan kompiler (seperti mesin SASS) mengharapkan kode 'lintas-browser' standar - BUKAN peretasan CSS seperti ini yang berarti mereka akan menulis ulang, menghancurkan atau menghapus peretasan karena bukan itu yang dilakukan peretasan. Sebagian besar dari ini adalah kode non-standar yang telah dibuat dengan susah payah untuk hanya menargetkan versi peramban tunggal dan tidak dapat berfungsi jika diubah. Jika Anda ingin menggunakannya dengan itu, Anda harus memuat hack CSS yang Anda pilih SETELAH filter atau kompiler . Ini mungkin tampak seperti diberikan tetapi ada banyak kebingungan di antara orang-orang yang tidak menyadari bahwa mereka sedang membatalkan hack dengan menjalankannya melalui perangkat lunak yang tidak dirancang untuk tujuan ini.

Safari telah berubah sejak versi 6.1, seperti yang banyak disadari.

Harap perhatikan: jika Anda menggunakan Chrome [dan sekarang juga Firefox] di iOS (setidaknya di iOS versi 6.1 dan yang lebih baru) dan Anda bertanya-tanya mengapa tidak ada peretasan yang tampaknya memisahkan Chrome dari Safari, itu karena Chrome versi iOS dari Chrome menggunakan mesin Safari. Ini menggunakan peretasan Safari bukan yang Chrome. Lebih lanjut tentang itu di sini: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox untuk iOS dirilis pada musim gugur 2015. Juga menanggapi Safari Hacks, tetapi tidak ada yang Firefox, sama seperti iOS Chrome.

JUGA: Jika Anda telah mencoba satu atau beberapa peretasan dan mengalami kesulitan untuk membuatnya berfungsi, silakan kirim kode sampel (lebih baik daripada halaman uji coba) - peretasan yang Anda coba, dan peramban apa (versi persis!) Yang Anda menggunakan serta perangkat yang Anda gunakan. Tanpa informasi tambahan itu, tidak mungkin bagi saya atau siapa pun di sini untuk membantu Anda.

Seringkali ini adalah perbaikan sederhana atau titik koma yang hilang. Dengan CSS biasanya itu atau masalah urutan kode yang tercantum dalam style sheet, jika bukan hanya kesalahan CSS. Silakan lakukan uji coba peretasan di sini di situs uji. Jika berhasil di sana, itu berarti peretasan benar-benar berfungsi untuk pengaturan Anda, tetapi itu adalah hal lain yang perlu diselesaikan. Orang-orang di sini sangat suka membantu, atau setidaknya mengarahkan Anda ke arah yang benar.

Situs uji:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

DAN CERMIN!

https://browserstrangeness.github.io/css_hacks.html#safari

Yang jauh dari sini adalah peretasan untuk Anda gunakan untuk versi Safari yang lebih baru.

Anda harus mencoba yang ini terlebih dahulu karena mencakup versi Safari saat ini dan murni-Safari:

Yang ini masih berfungsi dengan baik dengan Safari 13 (awal-2020):

/* Safari 7.1+ */

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

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

}

Untuk membahas lebih banyak versi, 6.1 dan lebih tinggi, saat ini Anda harus menggunakan pasangan hack css berikutnya. Yang untuk 6.1-10.0 untuk pergi dengan yang menangani 10.1 dan lebih tinggi.

Jadi - inilah yang saya kerjakan untuk Safari 10.1+:

Permintaan media ganda penting di sini, jangan hapus.

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

Coba ini jika SCSS atau set alat lain mengalami masalah dengan kueri media bersarang:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

Ini berikutnya bekerja untuk 6.1-10.0 tetapi tidak 10.1 (Pembaruan Maret 2017 terlambat)

Peretasan ini saya buat selama berbulan-bulan pengujian dan percobaan dengan menggabungkan beberapa peretasan lainnya.

CATATAN: seperti di atas, kueri media ganda BUKAN kecelakaan - itu mengesampingkan banyak browser lama yang tidak dapat menangani sarang kueri media. - Ruang yang hilang setelah salah satu 'dan juga penting. Ini adalah retas ... dan satu-satunya yang berfungsi untuk 6.1 dan semua versi Safari yang lebih baru saat ini. Perlu diketahui juga sebagaimana tercantum dalam komentar di bawah, peretasan adalah css non-standar dan harus diterapkan SETELAH filter. Filter seperti mesin SASS akan menulis ulang / membatalkan atau sepenuhnya menghapusnya.

Seperti disebutkan di atas, silakan periksa halaman pengujian saya untuk melihatnya berfungsi apa adanya (tanpa modifikasi!)

Dan ini kodenya:

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

    }
}}

Untuk Safari CSS 'lebih spesifik', lanjutkan membaca di bawah ini.

/* Safari 11+ */

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

    .safari_only { 

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

    }
}}

Satu untuk Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

Satu untuk Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

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

}

Karya yang sedikit dimodifikasi untuk 10.1 (hanya):

/* Safari 10.1 */

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

    .safari_only { 

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

    }
}}

Safari 10.0 (Perangkat Non-iOS):

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

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

}

Safari 9 CSS Hacks:

Peretasan permintaan fitur sederhana untuk Safari 9.0 dan lebih tinggi:

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Retasan garis bawah sederhana untuk Safari 9.0 dan lebih tinggi:

_:not(a,b), .safari_only {

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

}

Satu lagi untuk Safari 9.0 dan lebih tinggi:

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

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

}

dan permintaan fitur dukungan lainnya juga:

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

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

    }
}

Satu untuk Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

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

}

Safari 9 sekarang termasuk deteksi fitur sehingga kami dapat menggunakannya sekarang ...

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Sekarang hanya menargetkan perangkat iOS. Seperti yang disebutkan di atas, karena Chrome di iOS di-rooting di Safari, tentu saja hit juga.

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

satu untuk Safari 9.0+ tetapi tidak untuk perangkat iOS:

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

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

}

Dan satu untuk Safari 9.0-10.0 tetapi tidak untuk perangkat iOS:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

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

}

Di bawah ini adalah hack yang memisahkan 6.1-7.0, dan 7.1+ Ini juga membutuhkan kombinasi beberapa hack untuk mendapatkan hasil yang benar:

/* Safari 6.1-7.0 */

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

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

    );}
}

Karena saya telah menunjukkan cara untuk memblokir perangkat iOS, berikut adalah versi modifikasi dari hack 6.1.1 Safari yang menargetkan perangkat non-iOS:

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

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

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

    }
}}

Untuk menggunakannya:

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

Biasanya [seperti dalam pertanyaan ini] alasan orang bertanya tentang peretasan Safari sebagian besar mengacu pada pemisahannya dari Google Chrome (sekali lagi BUKAN iOS!) Mungkin penting untuk memposting alternatif: bagaimana menargetkan Chrome secara terpisah dari Safari juga, jadi Saya menyediakannya untuk Anda di sini jika diperlukan.

Berikut adalah dasar-dasarnya, periksa lagi halaman pengujian saya untuk banyak versi spesifik Chrome, tetapi ini mencakup Chrome secara umum. Chrome adalah versi 45, versi Dev dan Canary hingga versi 47 saat ini.

Kombo kueri media lama yang saya pakai di browser masih berfungsi hanya untuk Chrome 29+:

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

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

    }
}

Kueri fitur @supports berfungsi dengan baik untuk Chrome 29+ juga ... versi modifikasi dari yang kami gunakan untuk Chrome 28+ di bawah ini. Safari 9, browser Firefox yang akan datang, dan browser Microsoft Edge tidak diambil dengan yang ini:

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

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

    }
}

Sebelumnya, Chrome 28 dan yang lebih baru mudah ditargetkan. Ini adalah salah satu yang saya kirim ke browser setelah melihatnya dimasukkan dalam blok kode CSS lain (awalnya tidak dimaksudkan sebagai peretasan CSS) dan menyadari apa yang dilakukannya, jadi saya mengekstraksi bagian yang relevan untuk tujuan kita:

[CATATAN:] Metode yang lebih lama di bawah ini sekarang memunculkan Safari 9 dan browser Microsoft Edge tanpa pembaruan di atas. Versi Firefox dan Microsoft Edge yang akan datang telah menambahkan dukungan untuk beberapa kode -webkit- CSS dalam pemrograman mereka, dan baik Edge maupun Safari 9 telah menambahkan dukungan untuk deteksi fitur @supports. Chrome dan Firefox termasuk @supports sebelumnya.

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

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

    }
}

Blok Chrome versi 22-28 (Jika diperlukan untuk mendukung versi yang lebih lama) juga memungkinkan untuk ditargetkan dengan twist pada peretasan kombo Safari saya yang saya posting di atas:

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

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

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

Seperti hack pemformatan Safari CSS di atas, ini dapat digunakan sebagai berikut:

<div class="chrome_only">This text will be Blue in Chrome</div>

Jadi Anda tidak perlu mencarinya di pos ini, ini adalah halaman pengujian langsung saya lagi:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

[Atau Cermin]

https://browserstrangeness.github.io/css_hacks.html#safari

Halaman pengujian memiliki banyak lainnya, khususnya berbasis versi untuk lebih membantu Anda membedakan antara Chrome dan Safari, dan juga banyak peretasan untuk browser web Firefox, Microsoft Edge, dan Internet Explorer.

CATATAN: Jika sesuatu tidak berhasil untuk Anda, periksa halaman pengujian terlebih dahulu, tetapi berikan kode contoh dan peretasan WHICH yang Anda coba bagi siapa saja untuk membantu Anda.

Ada cara untuk memfilter Safari 5+ dari Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

Hanya Sarari

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

Peretasan ini 100% hanya berfungsi untuk safari 5.1-6.0. Saya baru saja mengujinya dengan sukses.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

Bagi mereka yang ingin menerapkan peretasan untuk Safari 7.0 dan di bawah, tetapi tidak 7.1 dan di atas - gunakan:

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

Ganti kelas Anda di (.myClass)

/ * Khusus Safari * / .myClass: not (: root: root) { enter code here }

Ngomong-ngomong, bagi siapa pun di antara Anda yang hanya perlu menargetkan Safari di ponsel, cukup tambahkan kueri media ke retasan ini:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

Dan jangan lupa untuk menambahkan kelas .safari_only ke elemen yang ingin Anda targetkan, contoh:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

Saya suka menggunakan metode berikut:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

Saat menggunakan filter khusus safari ini saya dapat menargetkan Safari (iOS dan Mac), tetapi mengecualikan Chrome (dan browser lainnya):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

Langkah 1: gunakan https://modernizr.com/

Langkah 2: gunakan kelas html .regions untuk memilih hanya Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr akan menambahkan kelas html ke DOM berdasarkan apa yang didukung browser saat ini. Safari mendukung kawasan http://caniuse.com/#feat=css-regions sedangkan peramban lain tidak (belum). Metode ini juga sangat efektif dalam memilih berbagai versi IE. Semoga kekuatan bersamamu.

hai saya sudah membuat ini dan itu berhasil untuk saya

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

Catatan: Jika hanya iOS yang mencukupi (jika Anda bersedia mengorbankan desktop Safari), maka ini berfungsi:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

Anda dapat menggunakan retas media-query untuk memilih Safari 6.1-7.0 dari browser lain.

@media \\0 screen {}

Penafian: Peretasan ini juga menargetkan versi Chrome lama (sebelum Juli 2013).

Ini bekerja:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

Pada akhirnya saya menggunakan sedikit JavaScript untuk mencapainya:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

kemudian di CSS saya untuk menargetkan mesin peramban Apple pemilih akan:

.on-apple .my-class{
    ...
}

https://stackoverflow.com/a/17637937/3174065 dijawab di sini meskipun metode ini menggunakan beberapa JS. Jika digunakan, pastikan untuk meletakkan js di footer, tubuh harus dimuat penuh untuk ini untuk menembak dengan benar, ketika ditempatkan di kepala itu kesalahan karena itu menyala sebelum tubuh dimuat.

itu kemudian menambahkan kelas .safari ke tubuh, tetapi hanya di safari, membuat penargetan css sangat mudah.

Ini bekerja 100% di safari..saya mencoba

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

Saya telah menguji dan itu berhasil untuk saya

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}