28172 sujets

CSS et mise en forme, CSS3

Bonjour

j'aurais besoin d'une autre feuille de style pour safari 3.x
j'ai essaye dans le head

 <!--[if SAFARI]>
       <link rel="stylesheet" href="./styles/safari.css" type="text/css" />
    <![endif]-->


mais ça ne marche pas
savez vous comment envoyer une feuille de style pour Safari ?

en fait je veux un background-color du body différent pour safari

merci
Modérateur
Salut rufus_, bienvenue sur Alsacréations Smiley smile

En effet, ça ne marche pas car les commentaires conditionnels sont réservés à Internet Explorer; ce sont des codes propriétaires.

En fait, il n'existe pas de technique sûre à l'heure actuelle pour réserver un style à Safari; seuls quelques hacks (généralement déconseillés parce que non pérennes) peuvent te venir en aide.

L'un d'entre eux est le suivant :
body {background: red;}
body:last-child:not(:root:root) {background: green;} /* Hack Safari */
merci pour ta reponse

Safari ne rend pas les jpg de manière conforme de #101010 il me fait passer un jpg a #171717 et le dégradé du jpg ne correspond plus au fond du body

on s'est fait chier 10 ans avec IE et maintenant c'est Safari !

et les polices de caractères sous safari sont horribles ! on dirait que tout est pas net


en tout cas ta solution marche , merci beaucoup
Modifié par rufus_ (27 Oct 2008 - 08:50)
je tombe sur cette solution aussi en anglais .... si ca peut servir



In your stylesheet, if you place the pound sign (#) after a semi-colon (;), all styles within those brackets and thereafter will be ignored in Safari. If you are using Safari the background of the box below will be green, otherwise it will be red.



The background color of this box will appear green in Safari and red in other browsers.



Here is what the CSS code looks like:



#testBox{background:#063;color:#fff;padding:5px;margin-bottom:10px}

#testBox{background:#c00;#}



Notice the pound sign. Most browsers will ignore this and continue reading the CSS, but in Safari it will cancel all styles within its containing brackets and all styles after that. Of course, this will not validate in CSS validators, so use at your own risk.
la solution marche pour Safari mais Google Chrome affiche de travers a cause du hack

body {
	font-family: Arial, Helvetica, Verdana, "Lucida Grande", sans-serif;
	color: #efefef;
	background-color: #101010;
	font-size: 64%; 
	margin: 0px;
	padding:0px;
}

body:last-child:not(:root:root) {background: #171717;} /* Hack Safari */


google chrome affiche un fond #171717 au lieu de #101010
Modifié par rufus_ (02 Nov 2008 - 14:32)
rufus_ a écrit :
Safari ne rend pas les jpg de manière conforme de #101010 il me fait passer un jpg a #171717 et le dégradé du jpg ne correspond plus au fond du body

Le rendu des images est parfaitement conforme. Safari se contente juste d'appliquer une correction colorimétrique en fonction des informations présentes dans les images, par exemple les informations de profil ICC qui peuvent être incluses dans les JPEG. Si tu as des images avec de telles informations alors que tu ne souhaites pas de correction par le navigateur (Safari, ou même Firefox 3 si l'utilisateur a activé la correction des couleurs), ce sont tes images qu'il faut corriger, pas tes CSS qu'il faut hacker. (Surtout que si ton idée était de passer ton background CSS en #171717, eh bien ça n'aurait tout simplement pas marché sur une autre plateforme, où ton image JPEG aurait pu être rendue différemment suivant le profil colorimétrique utilisé par le système.)

Un peu de lecture pour y voir plus clair:
D'où viennent les différences de couleurs entre mes images et mes background CSS?
(Une fois n'est pas coutume, la FAQ a la réponse. Smiley cligne )

rufus_ a écrit :
et les polices de caractères sous safari sont horribles ! on dirait que tout est pas net

It's not a bug, it's a feature. Safari sous Windows utilise un lissage des caractères fort, comme l'ensemble des applications sous OS X. C'est un peu idiot de leur part de ne pas s'être aligné sur les préférences du système, mais bon c'est un parti pris. Quoi qu'il en soit, ce rendu est parfaitement normal, tu obtiens quelque chose de proche si tu actives le lissage ClearType dans Windows XP, par exemple.
rufus_ a écrit :
la solution marche pour Safari mais Google Chrome affiche de travers a cause du hack

Google Chrome utilise le moteur de rendu Webkit et lira donc le code normalement réservé à Safari. Smiley ravi
(Par contre il n'applique de correction des couleurs, semble-t-il.)
Vous pouvez utiliser Javascript pour faire cela proprement sans Hack:

<script language="javascript" type="text/javascript">
<!-- if (navigator.userAgent.indexOf('Safari') != '-1') {
document.write("Welcome Safari user!")
} //-->
</script>