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