Gibt es einen CSS-Hack für Safari nur NICHT Chrom?

182

Ich versuche einen CSS-Hack für nur Safari NICHT Chrome zu finden. Ich weiß, dass dies beide Webkit-Browser sind, aber ich habe Probleme mit Div-Alignments in Chrome und Safari. Jeder wird anders angezeigt.

Ich habe versucht, dies zu verwenden, aber es wirkt sich auch auf Chrom aus.

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

Kennt jemand einen anderen, der nur für Safari gilt, bitte?

Bär John
quelle
Wenn Sie kein CSS verwenden, müssen Sie Javascript verwenden. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian
Das eigentliche Problem würde mich mehr interessieren als eine fragile und hackige Lösung. Ist es (noch) irgendwo verfügbar?
Matijs
Für Leute, die "funktioniert nicht" posten - bitte beachten Sie, dass Sie die Version von Safari kennen müssen, die Sie testen. Es gibt keine Safari-Lösung für jede Version. Sie müssen diese Informationen bei Ihrer Veröffentlichung angeben, sonst kann Ihnen niemand bei der Suche nach einer Lösung behilflich sein.
Jeff Clayton
Verschiedene Versionen von Safari haben unterschiedliche Anforderungen - hier finden Sie Live-Beispiele: browserstrangeness.bitbucket.io/css_hacks.html#safari [oder der Spiegel] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Antworten:

355
  • AKTUALISIERT FÜR CATALINA & SAFARI 13 (Update Anfang 2020) *

HINWEIS: Filter und Compiler (wie die SASS-Engine) erwarten standardmäßigen "browserübergreifenden" Code - KEINE CSS-Hacks wie diese, was bedeutet, dass sie die Hacks neu schreiben, zerstören oder entfernen, da dies nicht der Fall ist. Ein Großteil davon ist nicht standardmäßiger Code, der sorgfältig für einzelne Browserversionen entwickelt wurde und nicht funktionieren kann, wenn sie geändert werden. Wenn Sie es mit diesen verwenden möchten, müssen Sie den von Ihnen gewählten CSS-Hack NACH einem Filter oder Compiler laden . Dies mag selbstverständlich erscheinen, aber es gab eine Menge Verwirrung unter Menschen, die nicht erkennen, dass sie einen Hack rückgängig machen, indem sie ihn durch eine solche Software ausführen, die nicht für diesen Zweck entwickelt wurde.

Wie viele bemerkt haben, hat sich Safari seit Version 6.1 geändert.

Bitte beachten Sie: Wenn Sie Chrome [und jetzt auch Firefox] unter iOS verwenden (zumindest in iOS-Versionen 6.1 und neuer) und sich fragen, warum keiner der Hacks Chrome von Safari zu trennen scheint, liegt dies an der iOS-Version von Chrome verwendet die Safari-Engine. Es werden Safari-Hacks verwendet, nicht die Chrome-Hacks. Mehr dazu hier: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox für iOS wurde im Herbst 2015 veröffentlicht. Es reagiert auch auf die Safari-Hacks, aber keine der Firefox-Hacks, wie iOS Chrome.

AUCH: Wenn Sie einen oder mehrere der Hacks ausprobiert haben und Probleme haben, sie zum Laufen zu bringen, posten Sie bitte Beispielcode (besser noch eine Testseite) - den Hack, den Sie versuchen, und welche Browser (genaue Version!) Sie verwenden sowie das Gerät, das Sie verwenden. Ohne diese zusätzlichen Informationen ist es mir oder anderen hier nicht möglich, Ihnen zu helfen.

Oft ist es eine einfache Lösung oder ein fehlendes Semikolon. Bei CSS ist es normalerweise das oder ein Problem, in welcher Reihenfolge der Code in den Stylesheets aufgeführt ist, wenn nicht nur CSS-Fehler. Bitte testen Sie die Hacks hier auf der Testseite. Wenn es dort funktioniert, bedeutet dies, dass der Hack wirklich für Ihr Setup funktioniert, aber es ist etwas anderes, das gelöst werden muss. Die Leute hier helfen wirklich gerne oder weisen Sie zumindest in die richtige Richtung.

Die Teststelle:

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

UND SPIEGEL!

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

Hier finden Sie Hacks, die Sie für neuere Versionen von Safari verwenden können.

Sie sollten dies zuerst versuchen, da es aktuelle Safari-Versionen abdeckt und nur für Safari gedacht ist:

Dieser funktioniert immer noch ordnungsgemäß mit Safari 13 (Anfang 2020):

/* Safari 7.1+ */

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

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

}

Um weitere Versionen ab Version 6.1 abzudecken, müssen Sie zu diesem Zeitpunkt das nächste Paar CSS-Hacks verwenden. Die für 6.1-10.0 für eine Version mit 10.1 und höher.

Also dann - hier ist eine, die ich für Safari 10.1+ ausgearbeitet habe:

Die doppelte Medienabfrage ist hier wichtig, entfernen Sie sie nicht.

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

Versuchen Sie dies, wenn SCSS oder ein anderes Toolset Probleme mit der Abfrage verschachtelter Medien hat:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

Das nächste funktioniert für 6.1-10.0, aber nicht für 10.1 (Update Ende März 2017)

Diesen Hack habe ich über viele Monate hinweg getestet und experimentiert, indem ich mehrere andere Hacks kombiniert habe.

HINWEISE: Wie oben ist die doppelte Medienabfrage KEIN Unfall - sie schließt viele ältere Browser aus, die das Verschachteln von Medienabfragen nicht verarbeiten können. - Das fehlende Leerzeichen nach einem der 'und' ist ebenfalls wichtig. Dies ist immerhin ein Hack ... und der einzige, der derzeit für 6.1 und alle neueren Safari-Versionen funktioniert. Beachten Sie auch, wie in den Kommentaren unten aufgeführt, dass der Hack kein Standard-CSS ist und nach einem Filter angewendet werden muss. Filter wie SASS-Engines schreiben sie neu / machen sie rückgängig oder entfernen sie vollständig.

Wie oben erwähnt, überprüfen Sie bitte meine Testseite, um zu sehen, ob sie unverändert funktioniert (ohne Änderung!).

Und hier ist der Code:

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

    }
}}

Weitere Informationen zu "versionenspezifischem" Safari-CSS finden Sie weiter unten.

/* Safari 11+ */

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

    .safari_only { 

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

    }
}}

Eine für Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

Eine für Safari 10.0:

/* Safari 10.0 (not 10.1) */

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

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

}

Leicht modifizierte Werke für 10.1 (nur):

/* 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 (Nicht-iOS-Geräte):

/* 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 Hacks:

Ein einfacher Support-Feature-Query-Hack für Safari 9.0 und höher:

@supports (-webkit-hyphens:none)
{

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

}

Ein einfacher Unterstrich-Hack für Safari 9.0 und höher:

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

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

}

Ein weiteres für Safari 9.0 und höher:

/* Safari 9+ */

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

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

}

und eine weitere Abfrage zu Support-Funktionen:

/* Safari 9+ */

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

    .safari_only { 

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

    }
}

Eine für 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 enthält jetzt die Funktionserkennung, sodass wir diese jetzt verwenden können ...

/* Safari 9 */

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

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

}

Jetzt nur für iOS-Geräte. Wie oben erwähnt, trifft Chrome auf iOS, da es in Safari verwurzelt ist, natürlich auch dieses.

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

}

eine für Safari 9.0+, aber nicht für iOS-Geräte:

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

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

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

}

Und eine für Safari 9.0-10.0, aber nicht für iOS-Geräte:

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

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

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

}

Im Folgenden finden Sie Hacks, die 6.1-7.0 und 7.1+ voneinander trennen. Außerdem war eine Kombination mehrerer Hacks erforderlich, um das richtige Ergebnis zu erzielen:

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

    );}
}

Da ich darauf hingewiesen habe, wie iOS-Geräte blockiert werden können, ist hier die modifizierte Version des Safari 6.1+ -Hacks, die auf Nicht-iOS-Geräte abzielt:

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

    }
}}

So verwenden Sie sie:

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

Normalerweise [wie in dieser Frage] bezieht sich der Grund, warum Leute nach Safari-Hacks fragen, hauptsächlich auf die Trennung von Google Chrome (wieder NICHT iOS!). Es kann wichtig sein, die Alternative zu posten: Wie kann Chrome auch getrennt von Safari als Ziel ausgewählt werden? Ich stelle das hier für Sie bereit, falls es benötigt wird.

Hier sind die Grundlagen. Überprüfen Sie meine Testseite erneut auf viele spezifische Versionen von Chrome, aber diese decken Chrome im Allgemeinen ab. Chrome ist Version 45, Dev- und Canary-Versionen sind derzeit bis Version 47 verfügbar.

Meine alte Kombination aus Medienabfragen, die ich für Browserhacks verwendet habe, funktioniert immer noch nur für Chrome 29+:

/* Chrome 29+ */

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

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

    }
}

Eine @ support-Funktionsabfrage funktioniert auch gut für Chrome 29+ ... eine modifizierte Version der Version, die wir unten für Chrome 28+ verwendet haben. Safari 9, die kommenden Firefox-Browser und der Microsoft Edge-Browser werden mit diesem nicht aufgenommen:

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

    }
}

Zuvor war Chrome 28 und höher leicht zu zielen. Dies ist eine, die ich an Browserhacks gesendet habe, nachdem ich gesehen habe, dass sie in einem Block anderen CSS-Codes enthalten ist (ursprünglich nicht als CSS-Hack gedacht), und festgestellt habe, was sie bewirkt. Deshalb habe ich den relevanten Teil für unsere Zwecke extrahiert:

[HINWEIS:] Diese ältere Methode unten zeigt jetzt Safari 9 und den Microsoft Edge-Browser ohne das obige Update. Die kommenden Versionen von Firefox und Microsoft Edge bieten Unterstützung für mehrere Webkit-CSS-Codes in ihrer Programmierung, und sowohl Edge als auch Safari 9 bieten Unterstützung für die Erkennung von @ support-Funktionen. Chrome und Firefox enthielten zuvor @supports.

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

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

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

    }
}

Der Block der Chrome-Versionen 22-28 (falls erforderlich, um ältere Versionen zu unterstützen) kann auch mit einer Wendung auf meine oben veröffentlichten Safari-Combo-Hacks ausgerichtet werden:

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

Wie die oben genannten Safari CSS-Formatierungs-Hacks können diese wie folgt verwendet werden:

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

Damit Sie in diesem Beitrag nicht danach suchen müssen, ist hier wieder meine Live-Testseite:

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

[Oder der Spiegel]

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

Die Testseite enthält auch viele andere, speziell versionbasierte, um Sie bei der Unterscheidung zwischen Chrome und Safari zu unterstützen, sowie viele Hacks für Webbrowser von Firefox, Microsoft Edge und Internet Explorer.

HINWEIS: Wenn etwas für Sie nicht funktioniert, überprüfen Sie zuerst die Testseite, geben Sie jedoch Beispielcode und den Hack an, den Sie versuchen, damit jemand Ihnen hilft.

Jeff Clayton
quelle
9
Ich möchte nur sagen, dass die Testseite fantastisch ist. Ich kann jetzt mit jedem Gerät zu dieser Site navigieren und sehen, welche CSS-Regeln anwendbar sind!
duyn9uyen
1
Gilt dies für Safari auf iPhone oder iPad?
Greg Rozmarynowycz
1
Eigentlich habe ich gerade meine eigene Frage mit einer Kombination aus dem obigen Beispiel UND der (; Eigenschaft: Wert;) gelöst. unten und es hat super funktioniert!
Mydoglixu
1
Der Hack für Safari 6.1+ oben in dieser Antwort löst einen Fehler im Sass-Compiler aus. Gibt es einen Weg, es zu lösen?
Amsel
2
@ Blackbird Sorry, aber du kannst die Hacks nicht kompilieren oder filtern, es ruiniert sie. Sie müssen unverändert verwendet werden. (Fügen Sie sie nach der Kompilierung zur fertigen CSS-Datei hinzu.) Die Tatsache, dass sie nicht dem Standard entsprechen, ist der Grund, warum sie funktionieren.
Jeff Clayton
88

Es gibt eine Möglichkeit, Safari 5+ aus Chrome zu filtern:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}
user2550776
quelle
3
jeffclayton.wordpress.com/2014/07/22/... - Ich arbeite an vielen (I Test und CSS - Hacks für browserhacks.com erstellen) und Testseite hier: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton
Hinweis: In iOS [getestet in iOS 7] wird in der Chrome-Version tatsächlich die Safari-Engine ausgeführt. Auf iPads oder iPhones verwenden Sie also die Safari-Hacks. Bei anderen Geräten sind sie unterschiedlich.
Jeff Clayton
Der Code in der Antwort funktioniert also grundsätzlich für Safari 5.0 und 6.0 und nicht für 6.1+?
Nic Cottrell
Um absolut genau zu sein, erlaubt das Konstrukt :: i-block-chrome, .myClass {} nur Safari 5.1-6.0, aber auch Chrome 10-24 (alte Version von Chrome wird nicht mehr wirklich verwendet, ist also nicht ganz erwähnenswert), aber nichts Neueres - Safari-Hacks funktionieren in der Regel so: Ein Stapel verarbeitet 5.1-6.0, ein anderer 6.1-7.0 und die neueren 7.1-8.0. Sie scheinen die Dinge viel zu aktualisieren, bis sie sich entscheiden, zur nächsten numerischen Version zu wechseln, die der vorherigen '.1'-Version sehr nahe kommt.
Jeff Clayton
Zum Zeitpunkt dieser Antwort im Jahr 2013 war Safari 6.1 gerade veröffentlicht worden, sodass nicht genügend Leute gesehen hatten, dass sich der Browser geändert hatte, sodass dies der genaueste zu diesem Zeitpunkt war. Wenn Sie neuere benötigen, überprüfen Sie meine Antwort unten. Dies war eine großartige Antwort zu dem Zeitpunkt, als sie bereitgestellt wurde. Die Zeit ändert sich jedoch, so dass ich meine Arbeit als Update für diese veröffentlicht habe. Es hat Monate gedauert, bis ich die Versionen 6.1-7.0 und 7.1-8.0 erstellt habe. Ich hoffe dir gefallen die Ergebnisse. Wenn eine Version 8.1 veröffentlicht wird, die dem Muster folgt, ist höchstwahrscheinlich auch ein anderer Hack erforderlich. Wieder wird nur die Zeit zeigen.
Jeff Clayton
21

Nur Sarari

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}
xicooc
quelle
8
Möchten Sie eine Erklärung hinzufügen? Tippe ich buchstäblich root: root?
Nubtacular
1
Dieser ist genau richtig für Safari 3.x (und Chrome Version 1.0 nur, obwohl niemand Chrome 1.0 verwendet, da es jetzt
Jeff Clayton
Dieser zielt jetzt auch auf Safari 9.0 ab, daher wurden die vollständigen Statistiken aktualisiert: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton
4
Der :not(:root:root)Selektor ist gemäß der Spezifikation CSS Selectors 3 ungültig (in der :not()nur ein einfacher Selektor enthalten sein kann, dh ein Typselektor oder eine ID oder eine Klasse oder eine Pseudoklasse), aber gemäß CSS Selectors 4 vollständig gültig (wobei :not()die Liste von akzeptiert wird Selektoren). Zwar versteht derzeit nur Safari die Syntax von CSS Selectors 4, diese Lösung ist jedoch nicht zukunftssicher.
Ilya Streltsyn
2
Sehr wenige Hacks sind nicht (und viele aktuelle Standardcodes sind nicht auf Versionsänderungen zurückzuführen) zukunftssicher. Der beste Plan ist, wenn Sie einen CSS-Hack verwenden, ihn nur als vorübergehende Korrektur zu verwenden, um Zeit für ein offizielleres Cross-Browser-Update zu gewinnen.
Jeff Clayton
14

Dieser Hack funktioniert zu 100% nur für Safari 5.1-6.0. Ich habe es gerade mit Erfolg getestet.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}
Veka0881
quelle
3
Dieser Hack ist eigentlich für Chrome und Safari in verschiedenen Versionen. Es erlaubt nur Chrome 10-24 (das niemand mehr verwendet, weshalb die Leute angegeben haben, dass es Chrome blockiert) und Safari 5.1-6.0. Es funktioniert jedoch nicht für Safari 6.1 und höher. Zu der Zeit gab es keinen besseren Hack dieser Art.
Jeff Clayton
1
@ Veronica-Lotti, das hat auch bei mir funktioniert. Du wirst meine Kopfschmerzen los. Vielen Dank
Andhi Irawan
Leute - bitte sei vorsichtig. In diesen Kommentaren wird eine Methode beschrieben, die in den letzten Jahren für Safari-Versionen nicht und nur für alte Versionen funktioniert. Das bedeutet wirklich, dass die meisten Leute im Internet nicht das gewünschte Ergebnis erzielen, sondern nur Leute mit älteren Computern. Dies funktioniert nicht für aktuelle Betriebssysteme. Zu diesem Zeitpunkt haben die meisten Leute Version 12 und höher (nicht 6.0 und niedriger, die nur während der Windows XP-Ära aktuell waren.)
Jeff Clayton
8

Für diejenigen, die einen Hack für Safari 7.0 und niedriger implementieren möchten, jedoch nicht für 7.1 und höher - verwenden Sie:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }
Stifboy
quelle
Ich habe Safari 7 ausprobiert und konnte es nicht zum Laufen bringen. Können Sie zufällig ein funktionierendes Beispiel liefern?
Juicy
@Juicy: Es gibt Live-Tests dieser auf browserhacks.com - Sie funktionieren auf Safari 7 und niedriger sowie auf Chrome 28 und niedriger. (Wie in einem anderen Beitrag erwähnt, verwenden iOS 7 und 8 möglicherweise auch andere die Safari-Engine für Chrome, sodass Chrome und Safari auf iPads beide wirklich Safari sind.)
Jeff Clayton
Möglicherweise haben Sie es in Safari 7.1 versucht, nicht in Safari 7.0. Es ist gültig für 7.0 und früher, nicht für 7.1 und neuer. Als diese Antwort veröffentlicht wurde, war 7.0 die neueste Version von Safari, also war es zu diesem Zeitpunkt wahr.
Jeff Clayton
funktioniert für Safari für Windows (Version 5.1.7 (7534.57.2))
jave.web
funktioniert für Safari für Mac (Version 6.0.2 (7536.26.17))
Merlin
6

Ersetzen Sie Ihre Klasse in (.myClass)

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

Trinesh GD
quelle
Dies ist eine gute für Safari - der einzige andere Browser, auf den es abzielt, ist Chrome 1 (niemand benutzt mehr Chome 1)
Jeff Clayton
Genaue Spezifikationen für Personen, die nicht die neuesten Macs verwenden: Chrome 1, Safari 3.X, Safari 9.0+ (nicht Safari 4-8)
Jeff Clayton
Dies funktioniert mit der neuesten Version von Safari 7+ und sollte, soweit ich das beurteilen kann, die akzeptierte Antwort sein.
Jason Engage
Wow, danke, das hat endlich für mich funktioniert, nachdem ich so viele Browser-Hacks für Safari ausprobiert habe !!!
FairyQueen
4

Übrigens, für jeden von euch, der Safari nur auf Handys ausrichten muss, fügt diesem Hack einfach eine Medienabfrage hinzu:

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

Vergessen Sie nicht, die Klasse .safari_only zu dem Element hinzuzufügen, auf das Sie abzielen möchten. Beispiel:

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

Ich verwende gerne die folgende Methode:

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">') 
};
Brandon Webster
quelle
Für diese JavaScript-Hackmethode muss das JQuery-Paket installiert sein.
Jeff Clayton
Dies wird als äußerst schlechte Praxis angesehen. Browser-Sniffing ist sehr fehleranfällig und führt zu einer Menge falsch positiver Ergebnisse. Tun Sie dies nicht, selbst das Abhören von Medienabfragen ist sehr schmutzig, kann aber für sehr kleine Änderungen akzeptabel sein.
Wannes
3

Wenn ich diesen Nur-Safari-Filter verwende, kann ich auf Safari (iOS und Mac) abzielen, aber Chrome (und andere Browser) ausschließen:

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

Schritt 1: Verwenden Sie https://modernizr.com/

Schritt 2: Verwenden Sie die HTML-Klasse .regions, um nur Safari auszuwählen

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

Modernizr fügt dem DOM HTML-Klassen hinzu, je nachdem, was der aktuelle Browser unterstützt. Safari unterstützt Regionen http://caniuse.com/#feat=css-regions, während andere Browser dies (noch) nicht tun. Diese Methode ist auch sehr effektiv bei der Auswahl verschiedener Versionen von IE. Möge die Macht mit dir sein.

hawkeye126
quelle
1
modernizr ist ein großartiges Javascript-Addon für Websites zur Identifizierung von Browsern, ein hervorragendes Tool! - Dieser Hack wird (wie andere auch) funktionieren, bis andere Browser die Region-Funktion unterstützen
Jeff Clayton
1
CSS-Regionen werden nicht mehr unterstützt.
Thomas
2
Mit Regionen kann ich Safari 6.1 bis 11 und 7.1 bis 11.2 unter iOS als Ziel festlegen, und das allein ist bereits großartig.
Lowtechsun
@lowtechsun - großartig, wenn Sie Ihre Statistiken dazu veröffentlichen. Hacks sind nur gut, wenn Sie wissen, auf welche Browser sie abzielen.
Jeff Clayton
2

Hallo, ich habe das gemacht und es hat bei mir funktioniert

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

    }

}
ChiiiN
quelle
Dies ist ein schönes Set, eine gute Verwendung des Hacks mit mehreren Geräteeinstellungen für Websites mit reaktionsschnellen Ansichten.
Jeff Clayton
2

Hinweis: Wenn nur iOS ausreicht (wenn Sie bereit sind, den Safari-Desktop zu opfern), funktioniert dies:

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

Sie können einen Medienabfrage-Hack verwenden, um Safari 6.1-7.0 in anderen Browsern auszuwählen.

@media \\0 screen {}

Haftungsausschluss: Dieser Hack zielt auch auf alte Chrome-Versionen ab (vor Juli 2013).

tzi
quelle
Es funktioniert nicht mit neueren Safari, die Statistiken für diese sind jedoch chirurgisch: Safari 6.1-7.0, Chrome 22-28, also immer noch praktisch.
Jeff Clayton
0

Das funktioniert:

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

Am Ende benutze ich ein wenig JavaScript, um es zu erreichen:

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

In meinem CSS für die Apple-Browser-Engine lautet die Auswahl dann:

.on-apple .my-class{
    ...
}
Daniel De León
quelle
0

https://stackoverflow.com/a/17637937/3174065 wird hier beantwortet, obwohl diese Methode einige JS verwendet. Wenn verwendet, stellen Sie sicher, dass Sie die js in die Fußzeile setzen. Der Körper muss vollständig geladen sein, damit er richtig feuert. Wenn er in den Kopf gelegt wird, tritt ein Fehler auf, da er ausgelöst wird, bevor der Körper geladen wird.

Anschließend wird dem Körper eine .safari-Klasse hinzugefügt, jedoch nur auf Safari, wodurch das Zielen auf das CSS sehr einfach wird.

Preston Reyes
quelle
-1

Es funktioniert 100% in Safari. Ich habe es versucht

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}
S. karthik
quelle
Dies funktioniert mit älteren Versionen von Safari, nicht mit aktuellen Versionen 6.1 und neuer.
Jeff Clayton
-1

Ich habe getestet und es hat bei mir funktioniert

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Atif Tariq
quelle