web-dev-qa-db-fra.com

Comment ajouter une ligne css UNIQUEMENT pour Safari

Je crée un site Web, mais un élément a besoin de marge dans Chrome et d'autres navigateurs, mais pas dans Safari. Je souhaite donc ajouter une ligne CSS pour y remédier, mais je ne trouve aucune méthode permettant d’ajouter CSS pour Safari 3+ uniquement.

htmlcsssafaristylesheet
10
Johan

Ce n'est pas possible car vous appliqueriez également la même propriété à Chrome. En tant que Chrome et Safari utilisent tous deux le préfixe -webkit-.

Mais vous pouvez le faire en PHP. 

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

Remplacez safari.css par votre propre feuille de style. Crédit à @theorise

8
Abu

Je crois que cela devrait fonctionner 

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

voici le lien pour détecter la version du navigateur https://stackoverflow.com/a/5918791

11
user2580076

Solution intégrée jQuery: 

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

Solution intégrée Pure JS: 

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

Dans Safari 9.0+, vous pouvez le faire maintenant en CSS avec ce hack sympa. Vous n'avez besoin d'aucun code JS. Je l'ai fait et ça fonctionne bien pour moi. Utilisez ce hack: 

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

/* type your custom css code here */

}

La raison pour laquelle cela fonctionne est la suivante: Safari 9.0 et les versions ultérieures disposent d'une détection de fonctionnalités. Donc, en détectant une fonctionnalité exclusivement destinée à Safari, vous pouvez détecter Safari. débordement: -webkit-Marquee et justifier-contenu: hériter sont exclusivement réservés au safari. C’est pourquoi nous pouvons détecter un safari avec ce simple hack CSS.

4
Iman Sedighi

Au lieu d’ajouter du code pour résoudre votre problème, les marges par défaut étant différentes, vous pouvez essayer de réinitialiser d’abord les marges et les bourrages des éléments environnants avant de le modifier. Cela pourrait résoudre votre problème.

C'est une préférence personnelle, mais je commence toutes mes pages Web avec:

*{
    margin:0;
    padding:0;
}

Je n'ai jamais eu de problème de navigation entre les navigateurs en ce qui concerne les marges ou le remplissage.

1
user2477011

Il existe une question similaire à celle-ci sur le forum CSS-Tricks . Mais la réponse est fondamentalement nope . Vous pouvez essayer de renifler l'agent côté utilisateur côté serveur ou JavaScript, puis ajouter une classe au code HTML (comme pour les anciennes versions IE dans HTML5 BoilerPlate).

J'espère que cela t'aides.

- battu par les gars ci-dessus et ci-dessous!

0
Watters