Quels sont les hacks CSS spécifiques à Safari?

Question

Je me demande s'il existe un moyen d'écrire du CSS spécifiquement pour Safari en utilisant uniquement CSS. Je sais qu'il doit y avoir quelque chose, mais je ne l'ai pas encore trouvé.

Answer 1

Je pense que la question est valide. Je suis d'accord avec les autres réponses, mais cela ne veut pas dire que c'est une question terrible. Je n'ai jamais utilisé qu'une seule fois un hack Safari CSS en tant que solution temporaire et je m'en suis débarrassé plus tard. Je suis d'accord que vous ne devriez pas avoir à viser uniquement Safari, mais pas de mal à savoir comment le faire.

Pour votre information, ce hack ne vise que Safari 3 et cible également Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari 3.0 and Opera 9 rules here */ 
} 

Answer 2

Alors attendez, vous voulez écrire CSS pour Safari en utilisant seulement CSS? Je pense que vous avez répondu à votre propre question. Webkit a vraiment un bon support CSS. Si vous recherchez des styles de Webkit uniquement, essayez here.

Answer 3

Vous devrez utiliser JavaScript ou votre serveur pour faire le reniflage de l'agent utilisateur afin d'envoyer le CSS spécifiquement à Safari/WebKit.

Answer 4

Il existe des hacks que vous pouvez utiliser dans le CSS pour cibler uniquement Safari, comme mettre un hash/pound (#) après le point-virgule, ce qui fait que Safari l'ignore. Par exemple

.blah { color: #fff; } 
.blah { color: #000;# } 

Dans Safari, la couleur sera blanche, dans tout le reste, elle sera noire. Cependant, vous ne devriez pas utiliser de hacks, car cela pourrait causer des problèmes avec les navigateurs dans le futur, et cela pourrait avoir des effets indésirables dans les anciens navigateurs. Le moyen le plus sûr consiste à utiliser un langage côté serveur (tel que PHP) qui détecte le navigateur et qui diffuse un fichier CSS différent selon le navigateur utilisé par l'utilisateur, ou vous pouvez utiliser JavaScript pour faire de même et passer à un fichier CSS différent.

La langue côté serveur est la meilleure option ici, car tout le monde n'a pas activé JavaScript dans leur navigateur, ce qui signifie qu'ils ne verront pas le style correct. De plus, JavaScript ajoute un surcoût à la quantité d'informations à charger avant que la page soit correctement affichée.

Safari utilise WebKit, ce qui est très bien avec le rendu CSS. Je n'ai jamais rencontré quelque chose qui ne fonctionne pas dans Safari, mais dans d'autres navigateurs modernes (sans compter IE, qui a ses propres problèmes tous ensemble). Je suggère de vous assurer que votre CSS est standards compliant, que le problème peut se trouver dans le CSS, et non dans Safari.

Answer 5

Cela dépend vraiment de ce que vous essayez de faire. Essayez-vous de faire quelque chose de spécial juste en safari en utilisant certaines des fonctionnalités CSS3 incluses ou essayez-vous de rendre un site compatible avec les navigateurs croisés? Si vous essayez de rendre un site compatible avec les navigateurs, je vous recommande d'écrire le site pour qu'il paraisse bien dans safari/firefox/opera en utilisant CSS correct, puis de faire des modifications pour IE en utilisant IE conditionnel. Cela devrait (espérons-le) vous donner la compatibilité pour l'avenir des navigateurs, qui sont de mieux en mieux à la suite des règles CSS, et fournir une compatibilité croisée avec les navigateurs. En utilisant des feuilles de style conditionnelles, vous pouvez éviter tous les hacks et les navigateurs cibles.

Si vous cherchez à faire quelque chose de spécial en safari, rendez-vous au this.

Answer 6

écran @media et (webkit-min-device-pixel-rapport: 0) {}

Cela semble cibler webkit (y compris Chrome) ... ou est-ce vraiment Safari- seulement?