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?
Antworten:
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):
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.
Versuchen Sie dies, wenn SCSS oder ein anderes Toolset Probleme mit der Abfrage verschachtelter Medien hat:
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:
Weitere Informationen zu "versionenspezifischem" Safari-CSS finden Sie weiter unten.
Eine für Safari 11.0:
Eine für Safari 10.0:
Leicht modifizierte Werke für 10.1 (nur):
Safari 10.0 (Nicht-iOS-Geräte):
Safari 9 CSS Hacks:
Ein einfacher Support-Feature-Query-Hack für Safari 9.0 und höher:
Ein einfacher Unterstrich-Hack für Safari 9.0 und höher:
Ein weiteres für Safari 9.0 und höher:
und eine weitere Abfrage zu Support-Funktionen:
Eine für Safari 9.0-10.0:
Safari 9 enthält jetzt die Funktionserkennung, sodass wir diese jetzt verwenden können ...
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.
eine für Safari 9.0+, aber nicht für iOS-Geräte:
Und eine für Safari 9.0-10.0, aber nicht für iOS-Geräte:
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:
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:
So verwenden Sie sie:
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+:
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:
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.
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:
Wie die oben genannten Safari CSS-Formatierungs-Hacks können diese wie folgt verwendet werden:
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.
quelle
Es gibt eine Möglichkeit, Safari 5+ aus Chrome zu filtern:
quelle
Nur Sarari
quelle
: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.Dieser Hack funktioniert zu 100% nur für Safari 5.1-6.0. Ich habe es gerade mit Erfolg getestet.
quelle
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:
quelle
Ersetzen Sie Ihre Klasse in (.myClass)
/ * Nur Safari * / .myClass: not (: root: root) {
enter code here
}quelle
Übrigens, für jeden von euch, der Safari nur auf Handys ausrichten muss, fügt diesem Hack einfach eine Medienabfrage hinzu:
Vergessen Sie nicht, die Klasse .safari_only zu dem Element hinzuzufügen, auf das Sie abzielen möchten. Beispiel:
quelle
Ich verwende gerne die folgende Methode:
quelle
Wenn ich diesen Nur-Safari-Filter verwende, kann ich auf Safari (iOS und Mac) abzielen, aber Chrome (und andere Browser) ausschließen:
quelle
Schritt 1: Verwenden Sie https://modernizr.com/
Schritt 2: Verwenden Sie die HTML-Klasse .regions, um nur Safari auszuwählen
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.
quelle
Hallo, ich habe das gemacht und es hat bei mir funktioniert
quelle
Hinweis: Wenn nur iOS ausreicht (wenn Sie bereit sind, den Safari-Desktop zu opfern), funktioniert dies:
quelle
Sie können einen Medienabfrage-Hack verwenden, um Safari 6.1-7.0 in anderen Browsern auszuwählen.
Haftungsausschluss: Dieser Hack zielt auch auf alte Chrome-Versionen ab (vor Juli 2013).
quelle
Das funktioniert:
quelle
Am Ende benutze ich ein wenig JavaScript, um es zu erreichen:
In meinem CSS für die Apple-Browser-Engine lautet die Auswahl dann:
quelle
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.
quelle
Es funktioniert 100% in Safari. Ich habe es versucht
quelle
Ich habe getestet und es hat bei mir funktioniert
quelle