czy jest hack css tylko dla safari NIE chrome?


182

próbuję znaleźć hack css dla safari po prostu NIE chrome, wiem, że są to obie przeglądarki, ale mam problemy z wyrównaniem div w chrome i safari, każdy wyświetla się inaczej.

Próbowałem tego użyć, ale wpływa to również na chrom,

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

czy ktoś wie o innym, który będzie dotyczył tylko safari?


Nie używając CSS, musisz użyć javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian

Byłbym bardziej zainteresowany faktycznym problemem niż delikatnym i hackującym rozwiązaniem. Czy jest (nadal) gdzieś dostępny?
Matijs,

Dla osób, które publikują „nie działa” - pamiętaj, że musisz znać wersję testowanego Safari. Dla każdej wersji nie ma rozwiązania Safari typu „catch-all”. Musisz podać te informacje w swoim wpisie, aby nikt nie mógł ci pomóc w znalezieniu rozwiązania.
Jeff Clayton

Różne wersje Safari mają różne potrzeby - sprawdź tutaj na żywo przykłady: browserstrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Odpowiedzi:


356
  • ZAKTUALIZOWANO DLA CATALINA I SAFARI 13 (aktualizacja na początku 2020 r.) *

UWAGA: Filtry i kompilatory (takie jak silnik SASS) oczekują standardowego kodu „cross-browser” - NIE hacków CSS takich jak te, co oznacza, że ​​będą przepisywać, niszczyć lub usuwać hacki, ponieważ nie robią tego hacki. Znaczna część tego jest niestandardowym kodem, który został starannie dopracowany, aby był przeznaczony tylko dla pojedynczych wersji przeglądarki i nie może działać, jeśli zostaną zmienione. Jeśli chcesz go używać z tymi, musisz załadować wybrany hack CSS PO dowolnym filtrze lub kompilatorze . To może wydawać się oczywiste, ale było wiele zamieszania wśród ludzi, którzy nie zdają sobie sprawy, że cofają włamanie, uruchamiając je za pomocą takiego oprogramowania, które nie zostało zaprojektowane do tego celu.

Safari zmieniło się od wersji 6.1, jak zauważyło wielu.

Uwaga: jeśli używasz Chrome [a teraz także Firefox] na iOS (przynajmniej w wersji iOS 6.1 i nowszych) i zastanawiasz się, dlaczego żaden z hacków nie oddziela Chrome od Safari, to dlatego, że wersja Chrome na iOS korzysta z silnika Safari. Używa hacków Safari, a nie Chrome. Więcej informacji na ten temat tutaj: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox na iOS został wydany jesienią 2015 roku. Safari Hacks, ale żaden z nich nie jest taki sam jak iOS Chrome.

RÓWNIEŻ: Jeśli wypróbowałeś jeden lub więcej hacków i masz problemy z ich uruchomieniem, opublikuj przykładowy kod (jeszcze lepiej strona testowa) - hack, którego próbujesz, oraz jakie przeglądarki (wersja)! używasz tak samo jak urządzenia, którego używasz. Bez tych dodatkowych informacji nie jestem w stanie pomóc tobie ani nikomu innemu.

Często jest to prosta poprawka lub brakujący średnik. W przypadku CSS zwykle jest to problem lub problem, którego kolejności kod jest wymieniony w arkuszach stylów, jeśli nie tylko błędy CSS. Proszę przetestować hacki tutaj na stronie testowej. Jeśli to działa, oznacza to, że włamanie naprawdę działa dla twojej konfiguracji, ale jest coś innego, co należy rozwiązać. Ludzie tutaj naprawdę uwielbiają pomagać, a przynajmniej wskazywać ci właściwy kierunek.

Strona testowa:

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

I LUSTRO!

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

To na uboczu są hacki, których możesz użyć w nowszych wersjach Safari.

Powinieneś wypróbować ten pierwszy, ponieważ obejmuje on bieżące wersje Safari i jest wyłącznie Safari:

Ten nadal działa poprawnie z Safari 13 (początek 2020 r.):

/* Safari 7.1+ */

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

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

}

Aby objąć więcej wersji, 6.1 i nowsze, w tej chwili musisz użyć następnej pary hacków css. Ten dla wersji 6.1-10.0 jest kompatybilny z tym, który obsługuje 10.1 i więcej.

Tak więc - oto jeden, który opracowałem dla Safari 10.1+:

Ważne jest tutaj zapytanie o podwójne media, nie usuwaj go.

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

Wypróbuj ten, jeśli SCSS lub inny zestaw narzędzi ma problemy z zagnieżdżonym zapytaniem o media:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

Ten następny działa w wersji 6.1-10.0, ale nie 10.1 (aktualizacja z końca marca 2017 r.)

Ten hack stworzyłem przez wiele miesięcy testowania i eksperymentowania, łącząc wiele innych hacków.

UWAGI: podobnie jak powyżej, podwójne zapytanie multimedialne NIE jest przypadkiem - wyklucza wiele starszych przeglądarek, które nie mogą obsłużyć zagnieżdżania zapytań multimedialnych. - Ważna jest także brakująca spacja po jednym z „i”. To przecież hack ... i jedyny, który działa obecnie w wersji 6.1 i wszystkich nowszych wersjach Safari. Należy również pamiętać, jak podano w komentarzach poniżej, hack jest niestandardowym css i musi być zastosowany PO filtrze. Filtry, takie jak silniki SASS, przepisują / cofają lub całkowicie usuwają je całkowicie.

Jak wspomniano powyżej, sprawdź moją stronę testową, aby zobaczyć, jak działa bez zmian (bez modyfikacji!)

A oto 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; 

    }
}}

Aby zapoznać się z bardziej szczegółowymi wersjami Safari CSS, czytaj dalej.

/* Safari 11+ */

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

    .safari_only { 

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

    }
}}

Jeden dla Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

Jeden dla Safari 10.0:

/* Safari 10.0 (not 10.1) */

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

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

}

Nieznacznie zmodyfikowane działa w wersji 10.1 (tylko):

/* 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 (urządzenia inne niż 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; 

}

Hacks Safari 9 CSS:

Prosty hack zapytania funkcji obsługuje Safari 9.0 i nowsze wersje:

@supports (-webkit-hyphens:none)
{

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

}

Prosty hack podkreślający dla Safari 9.0 i nowszych wersji:

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

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

}

Kolejny dla Safari 9.0 i nowszych:

/* Safari 9+ */

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

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

}

oraz inne zapytanie dotyczące funkcji wsparcia:

/* Safari 9+ */

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

    .safari_only { 

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

    }
}

Jeden dla 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 zawiera teraz wykrywanie funkcji, dzięki czemu możemy go teraz używać ...

/* Safari 9 */

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

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

}

Teraz kieruj reklamy tylko na urządzenia z systemem iOS. Jak wspomniano powyżej, ponieważ Chrome na iOS jest zrootowany w Safari, to oczywiście uderza również w tę.

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

}

jeden dla Safari 9.0+, ale nie dla urządzeń iOS:

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

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

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

}

I jedno dla Safari 9.0-10.0, ale nie dla urządzeń iOS:

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

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

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

}

Poniżej znajdują się hacki, które oddzielają 6.1-7.0 i 7.1+. Aby uzyskać właściwy wynik, wymagało także kombinacji wielu hacków:

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

    );}
}

Ponieważ wskazałem sposób blokowania urządzeń z iOS, oto zmodyfikowana wersja hacka Safari 6.1+, która atakuje urządzenia inne niż 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; 

    }
}}

Aby z nich skorzystać:

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

Zwykle [jak w tym pytaniu] powodem, dla którego ludzie pytają o hakery Safari, jest głównie odniesienie do oddzielenia go od Google Chrome (znowu NIE iOS!) Może być ważne, aby opublikować alternatywę: jak kierować Chrome również od Safari, więc Zapewniam to tutaj, na wypadek, gdyby było to potrzebne.

Oto podstawy, ponownie sprawdź moją stronę testową, aby znaleźć wiele konkretnych wersji Chrome, ale ogólnie obejmują one Chrome. Chrome ma wersję 45, obecnie wersje Dev i Canary są w wersji 47.

Moja stara kombinacja zapytań o media, którą umieściłem w przeglądarce, działa nadal tylko w Chrome 29+:

/* Chrome 29+ */

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

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

    }
}

Zapytanie o funkcję @supports działa również dobrze dla Chrome 29+ ... zmodyfikowana wersja tej, której używaliśmy dla Chrome 28+ poniżej. Safari 9, nadchodzące przeglądarki Firefox i przeglądarka Microsoft Edge nie są obsługiwane przez tę:

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

    }
}

Wcześniej celowanie w Chrome 28 i nowsze było łatwe. Jest to jeden, który wysłałem do hakerów przeglądarki po tym, jak zobaczyłem, że jest zawarty w bloku innego kodu CSS (pierwotnie nie zamierzonego jako hack CSS) i zrozumiałem, co robi, więc wyodrębniłem odpowiednią część do naszych celów:

[UWAGA:] Ta starsza metoda poniżej pokazuje teraz Safari 9 i przeglądarkę Microsoft Edge bez powyższej aktualizacji. Nadchodzące wersje Firefoksa i Microsoft Edge dodały obsługę wielu kodów CSW-webkit w swoich programach, a zarówno Edge, jak i Safari 9 dodały obsługę wykrywania funkcji @supports. Chrome i Firefox zawierały wcześniej @supports.

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

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

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

    }
}

Blok wersji Chrome 22-28 (w razie potrzeby do obsługi starszych wersji) jest również możliwy do celowania poprzez zmianę hacków combo Safari, które opublikowałem powyżej:

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

Podobnie jak powyższe modyfikacje formatowania Safari CSS, można ich używać w następujący sposób:

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

Więc nie musisz go szukać w tym poście, oto znowu moja strona testowa na żywo:

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

[Lub lustro]

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

Strona testowa zawiera również wiele innych, w szczególności opartych na wersjach, które dodatkowo pomagają odróżnić Chrome i Safari, a także wiele włamań do przeglądarek Firefox, Microsoft Edge i Internet Explorer.

UWAGA: Jeśli coś nie działa, najpierw sprawdź stronę testową, ale podaj przykładowy kod i KTÓRE włamujesz się, aby ktokolwiek Ci pomógł.


9
Chcę tylko powiedzieć, że strona testowa jest niesamowita. Teraz mogę przeglądać tę stronę za pomocą dowolnego urządzenia i sprawdzać, które zasady css mają zastosowanie!
duyn9uyen

1
Czy dotyczy to Safari na iPhonie lub iPadzie?
Greg Rozmarynowycz

1
właściwie właśnie rozwiązałem własne pytanie, używając kombinacji powyższego przykładu ORAZ (; właściwość: wartość;); poniżej i działało świetnie!
mydoglixu

1
Włamanie do Safari 6.1+ na górze tej odpowiedzi powoduje błąd w kompilatorze Sass. Czy istnieje sposób na rozwiązanie tego problemu?
Blackbird

2
@Blackbird Przepraszamy, ale nie możesz kompilować ani filtrować hacków, to je niszczy. Muszą być używane w obecnej postaci. (Dodaj je do skompilowanego pliku css po kompilacji.) Fakt, że są niestandardowe, jest powodem, dla którego działają.
Jeff Clayton

89

Istnieje sposób na filtrowanie Safari 5+ z 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/… - Pracowałem nad wieloma (testuję i tworzę hacki CSS dla browserhacks.com) i testuję stronę tutaj: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton,

Uwaga: w systemie iOS [testowanym w systemie iOS 7] wersja Chrome faktycznie uruchamia silnik safari, więc na iPadzie lub telefonie iPhone korzystasz z hacków safari. W przypadku innych urządzeń są one różne.
Jeff Clayton

Więc w zasadzie kod w odpowiedzi działa dla Safari 5.0 i 6.0, a nie 6.1+?
Nic Cottrell,

Aby być absolutnie dokładnym, konstrukcja :: i-block-chrome, .myClass {} zezwala tylko na Safari 5.1-6.0, ale także na Chrome 10-24 (stara wersja Chrome nie jest już używana, więc nie do końca warta wzmianki), ale nic nowego - Hacki Safari zwykle działają w ten sposób: jedna partia obsługuje 5.1-6.0, inna obsługuje 6.1-7.0, a nowsze obsługują 7.1-8.0. Wydaje się, że dużo aktualizują, dopóki nie zdecydują się przejść do następnej wersji numerycznej, która jest bardzo zbliżona do poprzedniej wersji „.1”.
Jeff Clayton

W momencie udzielenia odpowiedzi w 2013 r. Właśnie wypuszczono Safari 6.1, więc zbyt mało osób widziało zmianę przeglądarki, więc była to najdokładniejsza w tym czasie. Jeśli potrzebujesz nowszych, sprawdź moją odpowiedź poniżej. To była świetna odpowiedź w momencie jej dostarczenia. Czas się jednak zmienia, więc opublikowałem swoją pracę jako aktualizację tego. Stworzenie wersji 6.1-7.0 i 7.1-8.0 zajęło mi miesiące. Mam nadzieję, że podoba Ci się ten wynik. Najprawdopodobniej, gdy wersja 8.1 zostanie wydana, jeśli będzie zgodna ze wzorem, będzie również wymagać innego hacka. Znowu tylko czas pokaże.
Jeff Clayton

21

Tylko Sarari

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

8
Chcesz dodać jakieś wyjaśnienie? Czy dosłownie wpisuję root: root?
Nubtacular

1
Ten jest dokładnie poprawny dla Safari 3.x (i tylko Chrome w wersji 1.0, ale nikt nie używa Chrome 1.0, ponieważ jest już w latach 30-tych ...)
Jeff Clayton

Ten teraz jest teraz kierowany również na Safari 9.0, więc zaktualizowano pełne statystyki: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton

4
:not(:root:root)Selektor jest nieważny na podstawie CSS selektorów 3 spec (w której :not()może zawierać tylko prosty przełącznik, to znaczy jeden przełącznik typu lub jeden identyfikator lub jednej klasy lub jedno pseudo-klasa), ale zupełnie ważne zgodnie CSS selektorów 4 (gdzie :not()przyjmuje listę selektory). To prawda, że ​​obecnie tylko Safari rozumie składnię CSS Selectors 4, ale to rozwiązanie nie jest przyszłościowe.
Ilya Streltsyn

2
Bardzo niewiele hacków nie jest (a wiele rzeczywistych standardowych kodów nie wynika ze zmian wersji) przyszłością. Najlepszym planem jest, jeśli zamierzasz użyć hacka css, użyj go tylko jako tymczasowej poprawki, aby zyskać czas na bardziej oficjalną aktualizację między przeglądarkami.
Jeff Clayton

14

Ten hack w 100% działa tylko w przypadku safari 5.1-6.0. Właśnie przetestowałem to z sukcesem.

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

3
Ten hack jest w rzeczywistości zarówno dla Chrome, jak i Safari w różnych wersjach. Pozwala na Chrome 10-24 (którego nikt już nie używa, dlatego ludzie wymienili, że zablokował Chrome) i tylko Safari 5.1-6.0. Nie działa jednak w przeglądarce Safari 6.1 i nowszych. W tym czasie nie było lepszego tego rodzaju hacka.
Jeff Clayton

1
@ veronica-lotti, to też zadziałało dla mnie. Pozbądź się mojego bólu głowy. Dziękuję
Andhi Irawan

Ludzie - proszę, bądźcie ostrożni. Te komentarze opisują metodę, która nie działa w przypadku wersji Safari w ciągu ostatnich kilku lat i działa tylko w przypadku starszych wersji. To tak naprawdę oznacza, że ​​większość ludzi w Internecie nie uzyska oczekiwanych rezultatów, a jedynie osoby ze starszymi komputerami. To nie działa w obecnych systemach operacyjnych. W tej chwili większość ludzi ma wersję 12 i wyższą (nie 6.0 i niższą, które były obecne tylko w erze Windows XP).
Jeff Clayton

8

Dla tych, którzy chcą wdrożyć hack dla Safari 7.0 i nowszych wersji, ale nie 7.1 i nowszych - użyj:

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

Wypróbowałem to na Safari 7 i nie mogłem go uruchomić. Czy możesz przypadkiem podać działający przykład?
Juicy

@Juicy: Są testy na żywo w browserhacks.com - działają na Safari 7 i niższych, a także Chrome 28 i niższych. (Jak wspomniano w innym poście dla iOS 7 i 8, być może inni również używają silnika Safari dla Chrome, więc zarówno Chrome, jak i Safari na iPadzie są naprawdę Safari)
Jeff Clayton

Być może próbujesz tego w Safari 7.1, a nie Safari 7.0. Jest ważny dla wersji 7.0 i wcześniejszych, a nie 7.1 i nowszych. Kiedy ta odpowiedź została opublikowana, 7.0 była najnowszą wersją Safari, więc była to prawda w tym czasie.
Jeff Clayton

działa w przeglądarce Safari dla systemu Windows (wersja 5.1.7 (7534.57.2))
jave.web

działa dla Safari na Maca (wersja 6.0.2 (7536.26.17))
Merlin

6

Zamień swoją klasę na (.myClass)

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


To jest dobre dla Safari - jedyną inną przeglądarką, na którą jest skierowana, jest Chrome 1 (nikt już nie używa Chome 1)
Jeff Clayton

Dokładne specyfikacje dla osób, które nie używają najnowszych komputerów Mac: Chrome 1, Safari 3.X, Safari 9.0+ (nie Safari 4-8)
Jeff Clayton

Działa to z najnowszą wersją Safari 7+ i, o ile wiem, powinna być zaakceptowana odpowiedź.
Jason Engage

Wow, dzięki, to w końcu zadziałało dla mnie po wypróbowaniu tylu hacków do przeglądarki Safari !!!
FairyQueen

4

Nawiasem mówiąc, dla każdego z was, którzy muszą celować w Safari na telefony komórkowe, po prostu dodaj zapytanie o media do tego hacka:

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

I nie zapomnij dodać klasy .safari_only do elementu, na który chcesz kierować, na przykład:

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

4

Lubię używać następującej metody:

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

Ta metoda hakowania JavaScript wymaga zainstalowania pakietu JQuery.
Jeff Clayton

Jest to uważane za bardzo złą praktykę, wąchanie przeglądarki jest bardzo podatne na błędy i prowadzi do wielu fałszywych alarmów. Nie rób tego, nawet wąchanie zapytań mediów jest bardzo brudne, ale może być akceptowalne w przypadku bardzo małych zmian.
Wannes,

3

Korzystając z tego filtru przeznaczonego tylko do safari, mogę kierować reklamy na Safari (iOS i Mac), ale wykluczam Chrome (i inne przeglądarki):

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

2

Krok 1: użyj https://modernizr.com/

Krok 2: użyj klasy html .regions, aby wybrać tylko Safari

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

Modernizr doda klasy HTML do DOM na podstawie tego, co obsługuje obecna przeglądarka. Safari obsługuje regiony http://caniuse.com/#feat=css-regions, podczas gdy inne przeglądarki nie (jeszcze i tak). Ta metoda jest również bardzo skuteczna w wyborze różnych wersji IE. Niech moc będzie z Tobą.


1
modernizr to świetny dodatek javascript do stron internetowych do identyfikacji przeglądarek, doskonałe narzędzie! - ten hack będzie działał (tak jak inne), dopóki inne przeglądarki nie zdecydują się na obsługę funkcji regionów
Jeff Clayton

1
Regiony CSS nie są już obsługiwane.
1stthomas

2
Regiony umożliwiają mi wybranie Safari 6.1 do 11 i 7.1 do 11.2 na iOS i to już samo jest świetne.
lowtechsun

@lowtechsun - świetne publikowanie twoich statystyk na ten temat, hacki są dobre tylko jako wiedza o tym, na które przeglądarki są kierowane.
Jeff Clayton

2

cześć, zrobiłem to i zadziałało dla mnie

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

    }

}

To fajny zestaw, dobre wykorzystanie hacka z wieloma ustawieniami urządzeń dla stron internetowych korzystających z responsywnych widoków.
Jeff Clayton

2

Uwaga: jeśli wystarczy tylko system iOS (jeśli chcesz poświęcić pulpit Safari), działa to:

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

1

Możesz użyć hackowania zapytań o media, aby wybrać Safari 6.1-7.0 z innych przeglądarek.

@media \\0 screen {}

Oświadczenie: ten hack działa również na stare wersje Chrome (przed lipcem 2013 r.).


Nie działa na nowszym Safari, statystyki dla tego są jednak chirurgiczne: Safari 6.1-7.0, Chrome 22-28, więc nadal są przydatne.
Jeff Clayton

0

To działa:

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

0

Na koniec używam małego JavaScript, aby to osiągnąć:

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

następnie w moim CSS, aby celować w silnik przeglądarki Apple, selektorem będzie:

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

0

https://stackoverflow.com/a/17637937/3174065 znajduje się tutaj odpowiedź, chociaż ta metoda używa JS. jeśli jest używany, pamiętaj o umieszczeniu js w stopce, ciało musi być w pełni załadowane, aby działało poprawnie, po umieszczeniu w głowie popełni błąd, ponieważ strzela przed załadowaniem ciała.

następnie dodaje do ciała klasę .safari, ale tylko podczas safari, dzięki czemu celowanie w css jest bardzo łatwe.


-1

Działa w 100% na safari. Próbowałem

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

Działa to na starszych wersjach Safari, nie na obecnych - 6.1 i nowszych.
Jeff Clayton

-1

Przetestowałem i działało dla mnie

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.