Wie füge ich eine css-Zeile NUR für Safari

Ich mache eine website, sondern um ein element muss-Marge in Chrome und anderen Browsern, aber nicht in safari. So möchte ich noch hinzufügen einer css-Zeile, um es zu beheben, aber ich finde keine Methode zum hinzufügen von css für safari 3+ nur.

  • Ich glaube, das ist nicht möglich, weil safari und chrome sind beide -webkit- Browser und das CSS ändern kann, den Stil auf beiden von Ihnen statt einer, aber mal sehen was andere sagen. Die +1 von hier...
  • Wissen, wie zu suchen: Google Safari-CSS-hack (in der Tat, das, was Sie suchen, ist ein browser-spezifischen hack).
  • Getestet habe ich mit css-feature-Erkennung für safari 9.0 und es ist in Ordnung für mich. Überprüfen Sie meine CSS-hack weiter um herauszufinden, wie es funktioniert.
InformationsquelleAutor Johan | 2013-07-14
  1. 8

    Ist dies nicht möglich, denn Sie würden die Anwendung der gleichen Eigenschaft zu Chrome sowie. Als Chrome und Safari nutzen beide das -webkit - Präfix.

    Aber man könnte dies in PHP. 

    <?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css"  type="text/css" />';
    } 
?>

    Ersetzen safari.css mit einem eigenen stylesheet. Kredit @gedanklichen Höhenflügen

    InformationsquelleAutor Abu
  2. 12

    Ich glaube, das sollte funktionieren

    Fiddle : http://jsfiddle.net/kHFjM/1/

        var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
       }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
         //browser is opera 
       }else{
        //browser is safari, add css
       }
    }

    hier ist der link zur Erkennung der browser-version
    https://stackoverflow.com/a/5918791

    InformationsquelleAutor user2580076
  3. 8

    jQuery integrierte Lösung:

    <script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
});
</script>

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>

    Reine JS-Lösung integriert:

    <style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>
<body>
<script type="text/javascript"> 
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        document.body.className += " safari";
    }
</script>
</body>
    InformationsquelleAutor Krab
  4. 4

    In safari 9.0 (nur, nicht > 9.0) Sie können es jetzt tun in CSS mit diesen netten hack. Sie brauchen keine JS-code. Ich habe ihn und seine arbeiten gut für mich. Verwenden Sie diese hack: 

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

/* type your custom css code here */

}

    Der Grund, warum es funktioniert: Safari 9.0 und höher haben feature-Erkennung. So durch das erkennen einer Funktion, die ausschließlich für Safari können Sie erkennen, Safari. überlauf:-webkit-marquee-und justify-content:Erben sind ausschließlich für den Browser safari. Das ist, warum wir können erkennen, safari mit dieser einfachen CSS-hack.

    • Große Schreien! Ich hatte gehofft, für eine CSS-Lösung benötigen, so wenden Sie einen Stil für mobile Safari, aber nicht für Chrome, und dies hat für mich gearbeitet.
    • justify-content:inherit klingt wie etwas, was andere Browser implementieren auch. Ist das zukunftssicher?
    • Verdammt 🙁 ist nicht für mich arbeiten.
    • Dies ist tatsächlich eine von mir, es ist zukunftssicher, da die zusätzlichen Festzelt Teil der Befehl ist veraltet und wird benötigt. Das man Ziele nur safari 9, keine neuere. Siehe meine Testseite browserstrangeness.bitbucket.io/css_hacks.html
    InformationsquelleAutor Iman Sedighi
  5. 1

    Anstelle der Zugabe mehr code, um Ihr problem zu beheben, da die Standard-Margen unterschiedlich sind, könnten Sie versuchen, das zurücksetzen aus den Margen und Polster der umgebenden Elemente auf 0 Erstens, bevor Sie es ändern. Das könnte lösen Ihr Problem.

    Es ist ganz eine persönliche Präferenz, aber ich beginne, alle meine Webseiten mit:

    *{
    margin:0;
    padding:0;
}

    Ich hatte noch nie irgendwelche cross-browser-Probleme bezüglich margins oder padding, während dies zu tun.

    • Ich starte immer meine stylesheets mit dieser aswell.
    InformationsquelleAutor
  6. 0

    Es ist eine Frage, die ähnlich wie diese auf die CSS-Tricks-forum. Aber die Antwort ist grundsätzlich Nein.
    Sie könnte Versuch, die user-agent-sniffing server-Seite oder mit JavaScript und fügen Sie eine Klasse auf dem html-Format (wie für alte IE-Versionen in HTML5 BoilerPlate).

    Hoffe, das hilft.

    --geprügelt, um es von den Jungs oben und unten!

    InformationsquelleAutor Watters
  7. 0

    Ich habe versucht, fast alle die oben vorgeschlagenen Lösungen, aber nichts funktioniert um, bis ich sah ein Stück code in meine sagt:

    @-webkit-keyframes fadein {
    //code here
    }

    Und es hat den job und angewendet werden die benötigten CSS-Code für:
    Safari, Chrome and Opera > 12.1

    Hoffe, dies kann jemand helfen.

    InformationsquelleAutor Jodyshop
Schreibe einen Kommentar