sadece krom değil safari için bir css kesmek var mı?


184

im sadece safari DEĞİL krom için bir css kesmek bulmaya çalışıyorum, bu her ikisi de webkit tarayıcılar ama im krom ve safari div hizalama ile ilgili sorunlar yaşıyorsanız biliyorum, her biri farklı görüntüler.

bunu kullanmaya çalışıyorum ama krom da etkiler,

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

Herkes sadece safari için geçerli başka birini biliyor mu lütfen?


CSS kullanmıyorsanız, javascript kullanmanız gerekir. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian

Asıl problemle kırılgan ve hileli bir çözümden daha fazla ilgilenirim. (Hala) bir yerde mevcut mu?
Matijs

'Çalışmıyor' yazan kişiler için - lütfen test ettiğiniz Safari sürümünü bilmeniz gerektiğini unutmayın. Her sürüm için 'tümünü yakala' Safari çözümü yoktur. Bu bilgileri yayınlamanızı sağlamanız gerekir, aksi takdirde kimse size bir çözüm bulma konusunda yardımcı olamaz.
Jeff Clayton

Safari'nin farklı sürümlerinin farklı ihtiyaçları vardır - canlı örnekler için buraya bakın: browserstrangeness.bitbucket.io/css_hacks.html#safari [Ya da Ayna] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Yanıtlar:


358
  • CATALINA & SAFARI 13 İÇİN GÜNCELLEME (2020 başı Güncelleme) *

NOT: Filtreler ve derleyiciler (SASS motoru gibi) standart 'çapraz tarayıcı' kodunu bekler - CSS bu gibi Korsanları DEĞİLDİR ; Bunların çoğu, yalnızca tek tarayıcı sürümlerini hedeflemek için özenle hazırlanmış ve değiştirildiklerinde çalışamayan standart olmayan koddur. Bunlarla kullanmak isterseniz , seçtiğiniz CSS kesmek herhangi bir filtre veya derleyiciden SONRA yüklenmelidir . Bu belirli bir şey gibi görünebilir, ancak bu amaç için tasarlanmamış böyle bir yazılım aracılığıyla bir hack'i geri aldıklarını fark etmeyen insanlar arasında çok fazla karışıklık var.

Safari, birçoklarının fark ettiği gibi, 6.1 sürümünden beri değişti.

Lütfen dikkat: iOS'ta Chrome [ve şimdi de Firefox] kullanıyorsanız (en azından iOS 6.1 ve daha yeni sürümlerinde) ve hack'lerin hiçbirinin Chrome'u Safari'den neden ayırmadığını merak ediyorsunuz, bunun nedeni Chrome'un iOS sürümünün Safari motorunu kullanıyor. Chrome'u değil Safari kesmek kullanır. Bununla ilgili daha fazla bilgi için: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ iOS için Firefox 2015 Sonbaharında piyasaya sürüldü. Safari Hacks, ancak Firefox'un hiçbiri iOS Chrome ile aynı değil.

AYRICA: Bir veya daha fazla hack'i denediyseniz ve işe koyma konusunda sorun yaşıyorsanız, lütfen örnek kod (daha iyi bir test sayfası) - denediğiniz hack ve hangi tarayıcıları (tam sürüm!) kullandığınız cihazın yanı sıra. Bu ek bilgi olmadan, benim veya buradaki başkalarının size yardımcı olması imkansızdır.

Genellikle basit bir düzeltme veya eksik bir noktalı virgül. CSS ile genellikle kodun stil sayfalarında listelenen sorun veya sıralaması, sadece CSS hataları değil. Lütfen buradaki saldırıları test sitesinde test edin. Orada çalışırsa, bu saldırı gerçekten kurulumunuz için çalışıyor demektir, ancak bu çözülmesi gereken başka bir şeydir. Buradaki insanlar gerçekten yardım etmeyi sever veya en azından sizi doğru yöne yönlendirir.

Test sitesi:

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

VE AYNA!

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

Buradaki yol, Safari'nin daha yeni sürümleri için kullanmanız için kesmek.

Mevcut Safari sürümlerini kapsadığı ve yalnızca saf Safari olduğu için bunu denemelisiniz:

Bu hala Safari 13 (2020 başı) ile düzgün çalışıyor:

/* Safari 7.1+ */

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

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

}

6.1 ve sonraki sürümleri daha fazla kapsamak için, şu anda bir sonraki css kesmek kullanmanız gerekir. 6.1-10.0 için olan ve 10.1 ve üzeri olanlarla gitmek için.

O zaman - İşte Safari 10.1+ için çalıştığım:

Çift ortam sorgusu burada önemlidir, kaldırmayın.

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

SCSS veya başka bir araç kümesinde iç içe ortam sorgusunda sorun varsa bunu deneyin:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

Bir sonraki sürüm 6.1-10.0 için çalışıyor, ancak 10.1 için değil (Mart 2017 sonu güncellemesi)

Bu hack, diğer birçok hack'leri birleştirerek aylarca test ve deneme yarattım.

NOTLAR: yukarıdaki gibi, çift ortam sorgusu bir kaza DEĞİLDİR - ortam sorgusu yuvalamayı işleyemeyen birçok eski tarayıcıyı dışlar. - 've' lerden birinden sonraki boşluk da önemlidir. Sonuçta bu bir hack ... ve şu anda 6.1 ve daha yeni Safari sürümleri için çalışan tek şey. Ayrıca, aşağıdaki yorumlarda listelendiği gibi, bilgisayar korsanı standart olmayan css'dir ve bir filtreden SONRA uygulanmalıdır. SASS motorları gibi filtreler, yeniden yazacak / geri alacak veya tamamen kaldıracaktır.

Yukarıda belirtildiği gibi, olduğu gibi çalıştığını görmek için lütfen test sayfamı kontrol edin (değişiklik yapmadan!)

Ve işte kod:

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

    }
}}

Daha 'sürüme özgü' Safari CSS için lütfen aşağıda okumaya devam edin.

/* Safari 11+ */

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

    .safari_only { 

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

    }
}}

Safari 11.0 için bir tane:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

Safari 10.0 için bir tane:

/* Safari 10.0 (not 10.1) */

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

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

}

Biraz değiştirilmiş 10.1 için çalışır (sadece):

/* 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 (iOS Dışı Cihazlar):

/* 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 Hack'leri:

Basit bir Safari 9.0 ve üstü için özellik sorgu kesmek destekler:

@supports (-webkit-hyphens:none)
{

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

}

Safari 9.0 ve üstü için basit bir alt çizgi kesmek:

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

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

}

Safari 9.0 ve üstü için bir tane daha:

/* Safari 9+ */

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

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

}

ve başka bir destek özellikleri sorgusu da:

/* Safari 9+ */

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

    .safari_only { 

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

    }
}

Safari 9.0-10.0 için bir tane:

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

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

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

}

Safari 9 şimdi özellik algılamayı içeriyor, böylece şimdi kullanabiliriz ...

/* Safari 9 */

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

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

}

Şimdi yalnızca iOS cihazlarını hedeflemek için. Yukarıda belirtildiği gibi, iOS'taki Chrome Safari'ye kök saldığından, elbette buna da vuruyor.

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

}

biri Safari 9.0+ için değil, iOS cihazlar için değil:

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

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

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

}

Ve biri Safari 9.0-10.0 için ancak iOS cihazlar için değil:

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

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

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

}

Aşağıda 6.1-7.0 ve 7.1+ 'yi ayıran saldırılar bulunmaktadır. Bunlar ayrıca doğru sonucu elde etmek için birden fazla saldırının bir kombinasyonunu gerektirir:

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

    );}
}

İOS cihazlarını engellemenin yolunu işaret ettiğimden, iOS olmayan cihazları hedefleyen Safari 6.1+ hackinin değiştirilmiş sürümü:

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

    }
}}

Bunları kullanmak için:

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

Genellikle [bu sorudaki gibi] insanların Safari saldırıları hakkında sordukları neden çoğunlukla Google Chrome'dan ayırmakla ilgilidir (yine iOS DEĞİL!) Alternatifi göndermek önemli olabilir: Chrome'u Safari'den ayrı olarak nasıl hedefleyebilirsiniz, bu yüzden Gerekli olması halinde bunu sizin için sağlıyorum.

İşte temel bilgiler, test sayfamı Chrome'un birçok özel sürümü için tekrar kontrol edin, ancak bunlar genel olarak Chrome'u kapsar. Chrome sürüm 45, Dev ve Canary sürümleri şu anda 47 sürümüne kadar.

Tarayıcı ortamlarına koyduğum eski medya sorgusu kombinasyonum hala Chrome 29+ için çalışıyor:

/* Chrome 29+ */

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

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

    }
}

Bir @supports özellik sorgusu Chrome 29+ için de iyi çalışır ... aşağıda Chrome 28+ için kullandığımızın değiştirilmiş bir sürümü. Safari 9, yaklaşan Firefox tarayıcıları ve Microsoft Edge tarayıcısı bu tarayıcıyla alınmıyor:

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

    }
}

Önceden, Chrome 28 ve daha yenisini hedeflemek kolaydı. Bu, diğer CSS kodunun bir bloğunda (başlangıçta bir CSS kesmek olarak tasarlanmamıştır) dahil olduğunu gördükten sonra tarayıcı saldırılarına gönderdiğim ve ne yaptığını fark ettiğim için, bu nedenle amaçlarımız için ilgili kısmı çıkardım:

[NOT:] Aşağıdaki bu eski yöntem, Safari 9'u ve Microsoft Edge tarayıcısını yukarıdaki güncelleştirme olmadan resmediyor. Firefox ve Microsoft Edge'in gelecek sürümleri, programlarında çoklu -webkit- CSS kodları için destek ekledi ve hem Edge hem de Safari 9, @supports özellik tespiti için destek ekledi. Chrome ve Firefox daha önce @supports içeriyordu.

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

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

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

    }
}

Chrome 22-28 sürümlerinin bloğu (Eski sürümleri desteklemek gerekirse) yukarıda gönderdiğim Safari kombo bilgisayarlarımda bir bükülme ile hedeflemek de mümkündür:

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

Yukarıdaki Safari CSS biçimlendirme saldırıları gibi, bunlar aşağıdaki gibi kullanılabilir:

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

Yani bu yazıda aramak zorunda değilsiniz, işte tekrar canlı test sayfam:

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

[Ya da Ayna]

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

Test sayfasında, Chrome ve Safari arasında daha fazla ayrım yapmanıza yardımcı olmak için özellikle sürüm tabanlı birçok Firefox ve ayrıca Firefox, Microsoft Edge ve Internet Explorer web tarayıcıları için birçok saldırı var.

NOT: Sizin için bir şey işe yaramıyorsa, önce test sayfasını kontrol edin, ancak örnek kod ve HANGİ kesmek için kimsenin size yardım etmeye çalıştığını sağlayın.


9
Sadece test sayfasının harika olduğunu söylemek istiyorum. Şimdi herhangi bir cihazla bu siteye göz atabilir ve hangi css kurallarının geçerli olduğunu görebilirim!
duyn9uyen

1
Bu iPhone veya iPad'de Safari için geçerli olacak mı?
Greg Rozmarynowycz

1
aslında, yukarıdaki örneğin bir kombinasyonunu kullanarak kendi sorumu çözdüm AND ((property: value;); Aşağıda ve harika çalıştı!
mydoglixu

1
Bu cevabın üstündeki Safari 6.1+ hack, Sass derleyicisine bir hata veriyor. Çözmenin bir yolu var mı?
Blackbird

2
@Blackbird Üzgünüm ama kesmek ya da filtre edemez, onları mahveder. Olduğu gibi kullanılmaları gerekir. (Bunları derlemeden sonra tamamlanan css dosyasına ekleyin.) Standart olmamaları, neden çalıştıklarıdır.
Jeff Clayton

89

Safari 5+ sürümünü Chrome'dan filtrelemenin bir yolu var:

@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/… - Burada çok çalışıyorum (browserhacks.com için css kesmek test ediyorum ve test ediyorum) ve burada test sayfası: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton

Not: iOS'ta [iOS 7'de test edilmiştir], krom sürümü aslında safari motorunu çalıştırıyor, bu nedenle ipad'lerde veya iphone'larda safari kesmek kullanıyorsunuz. Diğer cihazlar için farklıdırlar.
Jeff Clayton

Yani, temelde cevabın kodu 6.1 + değil Safari 5.0 ve 6.0 için çalışıyor mu?
Nic Cottrell

Kesinlikle doğru olmak gerekirse, :: i-block-chrome, .myClass {} yapısı yalnızca Safari 5.1-6.0'a değil, aynı zamanda Chrome 10-24'e (Chrome'un eski sürümü artık kullanılmayacak kadar söz konusu değil, ancak daha yeni bir şey değil) izin veriyor - Safari saldırıları şu şekilde çalışma eğilimindedir: bir parti 5.1-6.0, diğeri 6.1-7.0 ve yenileri 7.1-8.0. Önceki '.1' sürümüne çok yakın olan bir sonraki sayısal sürüme geçmeye karar verene kadar işleri çok günceller gibi görünüyorlar.
Jeff Clayton

2013'teki bu cevap sırasında, Safari 6.1 piyasaya sürüldü, bu yüzden tarayıcının değiştiğini yeterince insan görmemişti, bu da o zaman en doğru olanıydı. Daha yenilerine ihtiyacınız varsa aşağıda cevabımı kontrol edin. Bu, sağlandığı zaman harika bir cevaptı. Ancak zaman değişiyor, bu yüzden çalışmamı bir güncelleme olarak yayınladım. 6.1-7.0 ve 7.1-8.0 sürümlerini oluşturmak benim için aylar aldı. Umarım sonuçları beğenirsiniz. Büyük olasılıkla, modeli takip ederse 8.1 sürümü yayınlandığında, farklı bir hack gerektirecektir. Yine sadece zaman gösterecek.
Jeff Clayton

21

Sadece Sarari

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

8
Biraz açıklama eklemek ister misiniz? Kelimenin tam anlamıyla root: root yazabilir miyim?
Nubtacular

1
Bu, Safari 3.x için tam olarak doğrudur (ve Chrome sürüm 1.0 yalnızca 30'da olduğu için kimse Chrome 1.0 kullanmasa da ...)
Jeff Clayton

Bu şimdi Safari 9.0'ı da hedefliyor, bu yüzden tam istatistikler güncellendi: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton

4
:not(:root:root)Seçici (ki buradaki CSS Seçiciler 3 spec göre geçersiz :not()sadece basit bir seçici, yani, bir tip seçici içerebilir ya da bir kimlik veya bir sınıf veya bir sahte-sınıf), ancak tamamen geçerli olup CSS Seçiciler 4 (burada :not()listesini kabul seçiciler). Şu anda yalnızca Safari'nin CSS Seçiciler 4 sözdizimini anladığı doğrudur, ancak bu çözüm geleceğe dönük değildir.
Ilya Streltsyn

2
Çok az sayıda saldırı gelmeyecektir (ve gerçek standart kodun sürüm değişikliklerinden kaynaklanmadığı) geleceğin kanıtıdır. En iyi plan, bir css kesmek kullanacaksanız, daha resmi bir çapraz tarayıcı güncellemesi yapmak için zaman satın almak için yalnızca geçici bir düzeltme olarak kullanın.
Jeff Clayton

14

Bu kesmek% 100 sadece safari 5.1-6.0 için çalışır. Sadece başarıyla test ettim.

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

3
Bu kesmek aslında farklı sürümlerde hem Chrome hem de Safari içindir. Chrome 10-24'e (daha fazla kimse kullanmaz, bu yüzden insanlar Chrome'u engellediğini listeledi) ve Safari 5.1-6.0'a izin verir. Ancak Safari 6.1 ve daha yeni sürümlerde çalışmaz. O zamanlar bu türden daha iyi bir saldırı yoktu.
Jeff Clayton

1
@ veronica-lotti, bu da benim için çalıştı. Başımdan kurtuldun. Teşekkür ederim
Andhi Irawan

İnsanlar - lütfen dikkatli olun. Bu yorumların açıkladığı şey, son birkaç yıl içinde Safari sürümleri için çalışmayan ve yalnızca eski sürümler için çalışan bir yöntemdir. Bunun anlamı, internetteki insanların çoğunun aradığınız sonuca değil, yalnızca eski bilgisayarlara sahip insanlara sahip olmasıdır. Bu, mevcut işletim sistemleri için çalışmaz. Şu anda çoğu insanın sürümü 12 ve üstü (6.0 ve altı değil, sadece Windows XP döneminde
Jeff Clayton

8

Safari 7.0 ve önceki sürümleri için bir saldırı uygulamak ancak 7.1 ve üstü olmayanlar için - kullanın:

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

Bu Safari 7 denemek ve çalışmak için alamadım. Şans eseri çalışan bir örnek verebilir misiniz?
Sulu

@Juicy: Bunların browserhacks.com'da canlı testleri var - Safari 7 ve daha düşük sürümlerde ve ayrıca Chrome 28 ve daha düşük sürümlerde çalışıyorlar. (Başka bir gönderide belirtildiği gibi iOS 7 ve 8 belki de diğerleri Chrome için Safari motorunu kullanıyor, bu yüzden iPad'lerde Chrome ve Safari gerçekten Safari'dir)
Jeff Clayton

Safari 7.0'da değil, Safari 7.1'de deniyor olabilirsiniz. 7.1 ve daha yeni sürümler için değil, 7.0 ve önceki sürümler için geçerlidir. Bu yanıt gönderildiğinde, 7.0 Safari'nin en son sürümüydü, bu yüzden o zaman doğruydu.
Jeff Clayton

Windows için Safari için çalışır (sürüm 5.1.7 (7534.57.2))
jave.web

Mac için Safari için çalışır (Sürüm 6.0.2 (7536.26.17))
Merlin

6

(.MyClass) içindeki sınıfınızı değiştirin

/ * Yalnızca Safari * / .myClass: değil (: root: root) { enter code here }


Bu Safari için iyi bir şey - hedeflediği tek diğer tarayıcı Chrome 1 (artık Chome 1'i artık kullanmıyor)
Jeff Clayton

En yeni Mac'leri kullanmayanlar için Kesin Özellikler: Chrome 1, Safari 3.X, Safari 9.0+ (Safari 4-8 değil)
Jeff Clayton

Bu Safari 7+ en son sürümü ile çalışır ve söyleyebildiğim kadarıyla kabul edilen cevap olmalıdır.
Jason Engage

Vay be bu nihayet Safari için çok sayıda tarayıcı kesmek denedikten sonra benim için çalıştı teşekkürler !!!
FairyQueen

4

Bu arada, cep telefonlarında Safari'yi hedeflemesi gereken herhangi biriniz için, bu saldırıya bir medya sorgusu ekleyin:

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

Hedeflemek istediğiniz öğeye .safari_only sınıfını eklemeyi unutmayın , örnek:

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

4

Aşağıdaki yöntemi kullanmak istiyorum:

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

Bu JavaScript hack yöntemi, JQuery paketinin yüklenmesini gerektirir.
Jeff Clayton

Bu son derece kötü bir uygulama olarak kabul edilir, tarayıcı koklaması çok hataya açıktır ve yanlış pozitif yığınlara yol açar. Bunu yapmayın, medya sorgusu koklaması bile çok kirli ancak çok küçük değişiklikler için kabul edilebilir.
Wannes

3

Bu yalnızca safari filtresini kullanırken Safari'yi (iOS ve Mac) hedefleyebilir, ancak Chrome'u (ve diğer tarayıcıları) hariç tutabilirim:

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

2

1.Adım: https://modernizr.com/ adresini kullanın

2.Adım: Yalnızca Safari'yi seçmek için html sınıfı .regions kullanın

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

Modernizr, mevcut tarayıcının desteklediğine göre DOM'ya html sınıfları ekleyecektir. Safari, http://caniuse.com/#feat=css-regions bölgelerini destekler, ancak diğer tarayıcılar desteklemez (yine de). Bu yöntem, IE'nin farklı sürümlerini seçmede de çok etkilidir. Güç seninle olsun.


1
modernizr tarayıcıları, mükemmel bir araç tanımlamak için web sitelerine büyük bir javascript addon olduğunu! - diğer tarayıcılar bölgeler özelliğini desteklemeye karar verinceye kadar bu saldırı (diğerleri gibi) çalışacaktır
Jeff Clayton

1
CSS bölgeleri artık desteklenmiyor.
1sthomas

2
Bölgeler, iOS'ta Safari 6.1 ila 11 ve 7.1 ila 11.2'yi hedeflememe olanak tanıyor ve bu zaten harika.
lowtechsun

@lowtechsun - istatistiklerinizi bu konuda harika bir şekilde yayınlayan hackler, yalnızca hangi tarayıcıları hedeflediklerinin bilgisi olarak iyidir.
Jeff Clayton

2

merhaba ben bunu yaptım ve benim için çalıştı

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

    }

}

Bu, duyarlı görünümler kullanan web siteleri için birden fazla cihaz ayarıyla kesmek iyi bir settir.
Jeff Clayton

2

Not: Yalnızca iOS yeterliyse (Safari masaüstünü feda etmek istiyorsanız), bu işe yarar:

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

1

Diğer tarayıcılardan Safari 6.1-7.0'ı seçmek için bir medya sorgusu kesmek kullanabilirsiniz.

@media \\0 screen {}

Yasal Uyarı: Bu saldırı ayrıca eski Chrome sürümlerini de hedeflemektedir (Temmuz 2013'ten önce).


Daha yeni Safari'de çalışmıyor, bunun istatistikleri cerrahi. Ancak Safari 6.1-7.0, Chrome 22-28 çok kullanışlı.
Jeff Clayton

0

Bu çalışıyor:

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

0

Sonunda bunu başarmak için biraz JavaScript kullanıyorum:

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

Apple tarayıcı motorunu hedeflemek için CSS'imde seçici şöyle olacaktır:

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

0

https://stackoverflow.com/a/17637937/3174065 burada bu yöntem bazı JS kullansa da yanıtlanmıştır. Kullanılırsa, js'yi altbilgiye koyduğunuzdan emin olun, vücudun düzgün bir şekilde ateş etmesi için tam olarak yüklenmesi gerekir, kafaya yerleştirildiğinde vücut yüklenmeden önce patladığı için hata verir.

daha sonra vücuda bir .safari sınıfı ekler, ancak sadece safari'de, css'i hedeflemeyi çok kolay hale getirir.


-1

Safari'de% 100 çalışıyor ... denedim

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

Bu, Safari'nin eski sürümleri üzerinde çalışır, şu anki sürümlerde değil - 6.1 ve daha yeni.
Jeff Clayton

-1

Test ettim ve benim için çalıştı

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.