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