apakah ada hack css hanya untuk safari TIDAK chrome?


183

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?


Tidak menggunakan CSS, Anda harus menggunakan javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian

Saya akan lebih tertarik pada masalah yang sebenarnya daripada solusi yang rapuh dan hacky. Apakah masih tersedia di suatu tempat?
Matijs

Untuk orang yang memposting 'tidak berfungsi' - harap menyadari bahwa Anda perlu mengetahui versi Safari yang Anda uji. Tidak ada solusi Safari 'tangkap semua' untuk setiap versi. Anda perlu memberikan informasi itu dengan posting Anda atau tidak ada yang dapat membantu Anda dalam menemukan solusi.
Jeff Clayton

Versi Safari yang berbeda memiliki kebutuhan yang berbeda - lihat di sini untuk contoh langsung: browserstrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Jawaban:


357
  • 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.


9
Hanya ingin mengatakan bahwa halaman pengujian itu luar biasa. Sekarang saya dapat menjelajahi situs itu dengan perangkat apa pun dan melihat aturan css mana yang berlaku!
duyn9uyen

1
Apakah ini berlaku untuk Safari di iPhone atau iPad?
Greg Rozmarynowycz

1
sebenarnya, saya baru saja menyelesaikan pertanyaan saya sendiri menggunakan kombinasi contoh di atas DAN (; properti: nilai;); di bawah ini dan itu berhasil!
mydoglixu

1
Retasan untuk Safari 6.1+ di bagian atas jawaban ini menimbulkan kesalahan pada kompiler Sass. Apakah ada cara untuk menyelesaikannya?
Blackbird

2
@ Blackbird Maaf, tetapi Anda tidak dapat mengompilasi atau memfilter peretasan, itu merusaknya. Mereka harus digunakan apa adanya. (Tambahkan mereka ke file css selesai setelah kompilasi.) Fakta bahwa mereka tidak standar adalah mengapa mereka bekerja.
Jeff Clayton

89

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

3
jeffclayton.wordpress.com/2014/07/22/… - Saya telah mengerjakan banyak hal (saya menguji dan membuat hack css untuk browserhacks.com) dan halaman pengujian di sini: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton

Catatan: di iOS [diuji di iOS 7], versi chrome sebenarnya menjalankan mesin safari, jadi pada iPad atau iPhone, Anda menggunakan peretasan safari. Untuk perangkat lain, mereka berbeda.
Jeff Clayton

Jadi, pada dasarnya kode dalam jawaban berfungsi untuk Safari 5.0 dan 6.0 dan bukan 6.1+?
Nic Cottrell

Agar benar-benar akurat, konstruk :: i-block-chrome, .myClass {} hanya memungkinkan Safari 5.1-6.0, tetapi juga Chrome 10-24 (Chrome versi lama tidak benar-benar digunakan lagi sehingga tidak sepenuhnya layak disebutkan) tetapi tidak ada yang lebih baru disebutkannya - Peretasan Safari cenderung berfungsi seperti itu: satu batch menangani 5.1-6.0, lainnya hack 6.1-7.0, dan yang lebih baru menangani 7.1-8.0. Mereka tampaknya memperbarui banyak hal sampai mereka memutuskan untuk pergi ke versi numerik berikutnya yang sangat dekat dengan rilis '.1' sebelumnya.
Jeff Clayton

Pada saat jawaban ini pada tahun 2013, Safari 6.1 baru saja dirilis, jadi tidak cukup banyak orang yang melihat bahwa peramban telah berubah sehingga ini adalah yang paling akurat pada saat itu. Jika Anda membutuhkan yang lebih baru periksa jawaban saya di bawah ini. Ini adalah jawaban yang bagus pada saat diberikan. Namun waktu berubah jadi saya memposting pekerjaan saya sebagai pembaruan untuk yang ini. Butuh berbulan-bulan bagi saya untuk membuat 6.1-7.0 dan 7.1-8.0. Saya harap Anda menyukai hasilnya. Kemungkinan besar ketika versi 8.1 dirilis jika mengikuti pola, itu juga akan memerlukan peretasan yang berbeda. Sekali lagi hanya waktu yang akan menjawab.
Jeff Clayton

21

Hanya Sarari

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

8
Ingin menambahkan penjelasan? Apakah saya benar-benar mengetik root: root?
Nubtacular

1
Yang ini tepat untuk Safari 3.x (dan Chrome versi 1.0 hanya meskipun tidak ada yang menggunakan Chrome 1.0 karena sekarang sudah berusia 30-an ...)
Jeff Clayton

Yang ini sekarang juga menargetkan Safari 9.0, jadi statistik lengkap telah diperbarui: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton

4
The :not(:root:root)pemilih tidak valid menurut CSS Selectors 3 spesifikasi (di mana :not()hanya dapat berisi pemilih sederhana, yaitu satu jenis pemilih atau satu ID atau satu kelas atau satu pseudo-class), namun menurut benar-benar berlaku untuk CSS Selectors 4 (di mana :not()menerima daftar penyeleksi). Memang benar bahwa saat ini hanya Safari yang mengerti sintaks CSS Selectors 4, tetapi solusi ini tidak terbukti di masa depan.
Ilya Streltsyn

2
Sangat sedikit peretasan yang tidak (dan banyak kode standar aktual bukan karena perubahan versi) bukti masa depan. Rencana terbaik adalah jika Anda akan menggunakan hack css, gunakan hanya sebagai perbaikan sementara untuk membeli waktu untuk membuat pembaruan lintas browser yang lebih resmi.
Jeff Clayton

14

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

3
Retasan ini sebenarnya untuk Chrome dan Safari di versi yang berbeda. Ini memungkinkan Chrome 10-24 (yang tidak digunakan lagi oleh siapa pun karena itulah orang-orang yang mencantumkan itu memblokir Chrome) dan Safari 5.1-6.0 saja. Ini tidak berfungsi untuk Safari 6.1 dan yang lebih baru. Pada saat itu tidak ada retasan yang lebih baik dari jenisnya.
Jeff Clayton

1
@ veronica-lotti, ini berhasil juga untuk saya. Anda menyingkirkan sakit kepala saya. Terima kasih
Andhi Irawan

Orang-orang - harap berhati-hati. Apa yang dijelaskan oleh komentar ini adalah metode yang tidak berfungsi untuk versi Safari dalam beberapa tahun terakhir dan hanya berfungsi untuk versi lama. Yang benar-benar berarti adalah bahwa kebanyakan orang di internet tidak akan mendapatkan hasil yang Anda cari, tetapi hanya orang-orang dengan komputer yang lebih tua. Ini tidak berfungsi untuk sistem operasi saat ini. Pada saat ini kebanyakan orang memiliki versi 12 dan lebih tinggi (bukan 6.0 dan lebih rendah, yang saat ini hanya selama era windows XP.)
Jeff Clayton

8

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

Saya mencoba ini di Safari 7 dan tidak bisa berfungsi. Bisakah Anda memberikan contoh kerja?
Juicy

@Juicy: Ada tes langsung di browserhacks.com - Mereka berfungsi di Safari 7 dan lebih rendah, dan juga Chrome 28 dan lebih rendah. (Seperti yang disebutkan dalam postingan lain iOS 7 dan 8 mungkin yang lain juga menggunakan mesin Safari untuk Chrome, jadi Chrome dan Safari di iPad sama-sama benar-benar Safari)
Jeff Clayton

Anda mungkin telah mencobanya di Safari 7.1, bukan Safari 7.0. Ini berlaku untuk 7.0 dan sebelumnya, bukan 7.1 dan yang lebih baru. Ketika jawaban ini diposting, 7.0 adalah versi terbaru dari Safari, jadi itu benar pada saat itu.
Jeff Clayton

berfungsi untuk Safari untuk Windows (versi 5.1.7 (7534.57.2))
jave.web

berfungsi untuk Safari untuk Mac (Versi 6.0.2 (7536.26.17))
Merlin

6

Ganti kelas Anda di (.myClass)

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


Ini bagus untuk Safari - satu-satunya browser yang ditargetkan adalah Chrome 1 (tidak ada yang menggunakan Chome 1 lagi)
Jeff Clayton

Spesifikasi Tepat untuk orang-orang yang tidak menggunakan Mac terbaru: Chrome 1, Safari 3.X, Safari 9.0+ (bukan Safari 4-8)
Jeff Clayton

Ini berfungsi dengan versi terbaru dari Safari 7+ dan sejauh yang saya tahu harus menjadi jawaban yang diterima.
Jason Engage

Wow terima kasih, ini akhirnya berhasil bagi saya setelah mencoba banyak peretasan browser untuk Safari !!!
FairyQueen

4

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>

4

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">') 
};

Metode hack JavaScript ini membutuhkan paket JQuery untuk diinstal.
Jeff Clayton

Ini dianggap sebagai praktik yang sangat buruk, mengendus peramban sangat rentan kesalahan dan mengarah ke tumpukan positif palsu. Jangan lakukan ini, bahkan mengendus media-query sangat kotor tetapi bisa diterima untuk perubahan yang sangat kecil.
Wannes

3

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

2

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.


1
modernizr adalah addon javascript yang bagus untuk situs web untuk mengidentifikasi browser, alat yang luar biasa! - peretasan ini akan berfungsi (seperti yang lainnya) hingga peramban lain memutuskan untuk mendukung fitur kawasan
Jeff Clayton

1
Wilayah CSS tidak didukung lagi.
1stthomas

2
Wilayah memungkinkan saya untuk menargetkan Safari 6.1 hingga 11 dan 7.1 hingga 11.2 di iOS dan itu saja sudah bagus.
lowtechsun

@lowtechsun - bagus memposting statistik Anda tentang ini, peretasan hanya baik sebagai pengetahuan tentang browser apa yang mereka targetkan.
Jeff Clayton

2

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

    }

}

Ini adalah set yang bagus, penggunaan hack yang bagus dengan beberapa pengaturan perangkat untuk situs web menggunakan tampilan responsif.
Jeff Clayton

2

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

1

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 tidak berfungsi pada Safari yang lebih baru, statistik untuk yang satu ini bersifat bedah: Safari 6.1-7.0, Chrome 22-28 masih berguna.
Jeff Clayton

0

Ini bekerja:

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

0

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{
    ...
}

0

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.


-1

Ini bekerja 100% di safari..saya mencoba

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

Ini berfungsi pada versi Safari yang lebih lama, bukan yang sekarang-- 6.1 dan yang lebih baru.
Jeff Clayton

-1

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