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