it-swarm.com.de

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

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

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 eine andere, die sich bitte nur auf Safari bezieht?

141
Bear John
  • AKTUALISIERT FÜR SAFARI 11 (Herbst 2017 Update) *

HINWEIS: Filter und Compiler (wie die SASS-Engine) erwarten standardmäßigen Cross-Browser-Code - KEINE CSS-Hacks wie diese. Bedeutet, dass sie die Hacks seitdem neu schreiben, zerstören oder entfernen ist nicht was Hacks tun. Dies ist ein nicht standardmäßiger Code, der sorgfältig nur für einzelne Browserversionen erstellt wurde und nicht funktionieren kann, wenn er geändert wird. Wenn Sie es mit diesen verwenden möchten, Sie müssen den ausgewählten CSS-Hack NACH einem Filter oder Compiler laden. Dies mag als gegeben erscheinen, aber es gab eine Menge Verwirrung unter Leuten, die nicht erkennen, dass sie einen Hacker ungeschehen machen, indem sie eine solche Software ausführen, die nicht für diesen Zweck entwickelt wurde.

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

Bitte beachten Sie: Wenn Sie Chrome [und jetzt auch Firefox] unter iOS verwenden (zumindest in iOS-Versionen 6.1 und neuer) und Sie sich fragen, warum keiner der Hacks Chrome und Safari zu trennen scheint, liegt dies daran Die iOS-Version von Chrome verwendet die Safari-Engine, Safari-Hacks nicht die Chrome-Versionen, mehr dazu hier: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like -a-verchromt-Apple/

ALSO: Wenn Sie einen oder mehrere Hacks ausprobiert haben und Schwierigkeiten haben, sie zum Laufen zu bringen, geben Sie bitte Beispielcode (besser noch eine Testseite) an - den Hack, den Sie versuchen, und welche Browser (s)). genaue Version!) sowie das von Ihnen verwendete Gerät. Ohne diese zusätzlichen Informationen ist es für mich oder andere Personen nicht möglich, Ihnen zu helfen.

Oft handelt es sich um einen einfachen Fix 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. Testen Sie die Hacks hier Wenn es dort funktioniert, bedeutet das, 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 zeigen Ihnen zumindest die richtige Richtung.

Die Teststelle: 

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

UND SPIEGEL

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

Firefox für iOS wurde im Herbst 2015 veröffentlicht und reagiert auch auf die Safari-Hacks, aber keine der Firefox-Versionen, genauso wie iOS Chrome.

Aus dem Weg sind hier einige Hacks, die Sie für neuere Versionen von Safari verwenden können. 

Sie sollten es zuerst ausprobieren, da es die aktuellen Safari-Versionen abdeckt und nur für reines Safari gilt:

Dieses funktioniert immer noch einwandfrei mit Safari 10.1:

/* 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 das nächste Paar CSS-Hacks verwenden. Die Version für 6.1-10.0 ist mit einer Version für 10.1 und höher kompatibel.

Also dann - hier habe ich einen für Safari 10.1+ entwickelt:

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 es mit dieser Option, wenn SCSS oder ein anderes Tool-Set Probleme mit der verschachtelten Medienabfrage hat:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

Dieses nächste funktioniert für 6.1-10.0, aber nicht für 10.1 (spätes März 2017-Update).

Diesen Hack habe ich über viele Monate des Testens und Experimentierens erstellt, indem ich mehrere andere Hacks kombinierte. 

HINWEIS: Wie oben ist die doppelte Medienabfrage kein Zufall - sie schließt viele ältere Browser aus, die keine Medienabfragen verschachteln können. - Das fehlende Leerzeichen nach einem der 'und' ist ebenfalls wichtig. Dies ist immerhin ein Hack ... und der einzige, der zu dieser Zeit für 6.1 und alle neueren Safari-Versionen funktioniert. Beachten Sie auch, wie in den Kommentaren unten angegeben, dass der Hack nicht standardgemäß ist und nach einem Filter angewendet werden muss. Filter wie SASS-Engines schreiben oder rückgängig machen oder vollständig entfernen.

Wie oben erwähnt, überprüfen Sie bitte meine Testseite, um zu sehen, dass sie so ist, wie sie ist (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; 

    }
}}

Für "versionsspezifisches" Safari CSS lesen Sie bitte 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; 

    }
}}

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; 

    }
}}

Eine für Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:Host:not(:root:root), .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:

Eins für Safari 9.0 und höher:

/* Safari 9+ */

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

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

}

und eine Support-Feature-Abfrage auch:

/* 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 bietet jetzt eine Feature-Erkennung, 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 bereits erwähnt, trifft Chrome auf iOS, da Chrome in iOS verwurzelt ist, natürlich auch das./* 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; } } .

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

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

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

}

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

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

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

}

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

    );}
}

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

    }
}}

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

Normalerweise [wie in dieser Frage] fragen die Leute nach Safari-Hacks nach Meistens in Bezug auf die Trennung von Google Chrome (wieder NICHT iOS!) Es kann wichtig sein, die Alternative zu posten: Wie man Chrome separat anvisiert von Safari auch, also stelle ich das hier für Sie bereit, falls es benötigt wird.

Hier sind die Grundlagen. Weitere Informationen zu Chrome finden Sie auf meiner Testseite. Diese beziehen sich jedoch auf Chrome im Allgemeinen. Chrome ist Version 45, Dev und Canary-Versionen sind derzeit bis zur Version 47.

Meine alte Medienabfragekombination, die ich auf browserhacks stecke, 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; } }

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

    }
}

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

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

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

    }
}
.

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

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

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

[Oder der Spiegel]

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

Die Testseite enthält auch viele andere, speziell auf Versions-basierende Versionen hilft Ihnen, zwischen Chrome und Safari zu unterscheiden, und auch viele Hacks für Firefox-, Microsoft Edge- und Internet Explorer-Webbrowser.

HINWEIS: Wenn etwas für Sie nicht funktioniert, überprüfen Sie zuerst die Testseite, geben Sie jedoch Beispielcode an und mit welchem ​​Hack Sie versuchen, Ihnen zu helfen.

NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.

291
Jeff Clayton

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

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

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}
83
user2550776

Nur Sarari

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

Dieser Hack ist zu 100% nur für Safari geeignet. Ich habe es gerade mit Erfolg getestet.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}
12
Veka0881

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

.myclass { (;property: value;); }
.myclass { [;property: value;]; }
8
Stifboy

Ich benutze gerne 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">') 
};
4
Brandon Webster

Ersetzen Sie Ihre Klasse in (.myClass)

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

4
Trinesh G D

Übrigens, für jeden von euch, der nur Safari auf Handys anvisieren muss, füge 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 .safari_only -Klasse zu dem Element hinzuzufügen, auf das Sie abzielen möchten.

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

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 , wohingegen andere Browser dies (noch) nicht tun. Diese Methode ist auch sehr effektiv bei der Auswahl verschiedener IE-Versionen. Möge die Macht mit dir sein.

2
hawkeye126

Sie können einen Media-Query-Hack verwenden, um Safari 7+ aus anderen Browsern auszuwählen.

@media \\0 screen {}

Disclaimer: Dieser Hack richtet sich auch an alte Chrome-Versionen (vor Juli 2013).

1
tzi

hi, ich habe das gemacht und es hat für mich 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;
        }

    }

}
1
ChiiiN

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 wird dann eine Auswahl für Apple Browser Engine getroffen:

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

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}
}
0
S.karthik

Ich habe getestet und es hat für mich funktioniert

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

Das funktioniert:

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

https://stackoverflow.com/a/17637937/3174065 es wird hier beantwortet, obwohl diese Methode einige JS verwendet. Stellen Sie bei Verwendung sicher, dass Sie das js in die Fußzeile einfügen. Der Körper muss vollständig geladen sein, damit er ordnungsgemäß ausgelöst wird. Wenn er im Kopf platziert 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 in Safari-Situationen, wodurch das Zielen auf das CSS sehr einfach wird.

0
Preston Reyes