czy jest hack css tylko dla safari NIE chrome?

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?

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

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

Tylko Sarari

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

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

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

Zamień swoją klasę na (.myClass)

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

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>

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

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

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

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

    }

}

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

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

To działa:

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

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

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.

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

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