CCS différents pour différents OS

.Steff

Membre d’élite
Club MacG
6 Septembre 2005
1 294
104
Bloc de code:
<script language="javascript">
var navactu = navigator.platform;

if(navactu=="windows") 
document.write('<link rel="stylesheet" media="screen" type="text/css" href="ie.css" />');
}
else 
{
document.write('<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />');
}

</script>
Un truc dans ce gout devrait pouvoir fonctionner avec le navigator.platform
 
A

Anonyme

Invité
.Steff a dit:
on de vrait oui...Mais là, j'utilise une police qui n'est en natif que sur OSX, linux etc...et sur windows, je ne peux pas obliger les internautes à télécharger la police que je veux...
Alors j'utilise une police de windows mais pour qu'elle s'affiche au mieux il me la faut en bold...Mais celle pour mac, je ne la veut pas en bold...
Peut être une solution ?
Sans utiliser de javascript, une solution pas très orthodoxe si tu veux utiliser ta fonte mac-only :

Bloc de code:
h1 {
    font-family: zapfino, "Arial bold", sans-serif;
}
Sur un navigateur mac, le zapfino s'affichera, tandis que dans windows le navigateur ne trouvant pas le zapfino passera à l'Arial gras et que dans linux le navigateur ne prendra que sans-serif. ;) :p

P.S. : j'ai essayé dans IE6 et Firefox Win et ça marche.
 

OlivierL

Membre confirmé
8 Novembre 2005
207
12
gloup gloup a dit:
...une solution pas très orthodoxe.
Au contraire, je trouve ta soluce assez classe !
CSS only, pas de cet infâme Javascript :zen:
 

BeNBiBiFoKe

Membre confirmé
8 Décembre 2004
143
6
35
Liège
Si tu travaills en PHP, tu peux également utiliser une classe qui selon moi est très pratique...

Je l'avais utiliser car je n'arrivais pas à une compatibilité parfaite sur MSIE, Safari et Autres. Je ne conseil évidemment pas d'utiliser plusieurs CSS, perso j'avais juste defini une autre balise dans mon CSS.

Elle s'utilise comme ceci :

Bloc de code:
//BROWSER
$br = new Browser;

if ($br->Name == "MSIE") $specificClass = "maintableIE";
elseif ($br->Name == "Safari") $specificClass = "maintableSA";
else $specificClass = "maintable";

.
.
.
Si interessé, je peux retrouver la classe dont je parle (elle vient du site les repertoriant).
 

nicogala

modérateur
Modérateur
Club MacG
22 Septembre 2003
4 007
357
40
sylver a dit:
Déterminer le système d'exploitation d'un visiteur n'est pas plus compliqué que déterminer son navigateur. Le script sera semblable à celui qu'a donné heroe, mais au lieu de tester navigator.appName (qui renvoie le nom du navigateur), il faudra tester navigator.platform (si j'en crois ce qui est dit sur Comment ça marche).
... et comment ça se passe si mon user agent est MSie/Wdz2000 ? Le site va vouloir m'envoyer la police windows que mon Mac ne pourra pas afficher... non ?
 

Captain_X

Membre d’élite
Club MacG
11 Septembre 2003
3 498
1 067
who cares ???
pix4day.ovh.org
moi ca me parait tordu comme truc... j'ai pas la solution, et à dire vrai que mon client soit sur mac ou sur PC j'ai vraiment d'autre chat à claquer....

y'a pas assez à se mordre les *******s avec IE et les autres navigateurs ?
 
A

Anonyme

Invité
OlivierL a dit:
Au contraire, je trouve ta soluce assez classe !
CSS only, pas de cet infâme Javascript :zen:
En fait par «pas othodoxe», je voulais dire que normalement on n'écrit pas "Arial bold" comme ça, on choisit la fonte "Arial" puis on met un font-weight: bold. ;) A noter que sans-serif et serif devraient être mis à chaque fois pour les OS pauvres en polices (linux, pda, smartphones).

Attention aussi : 10% des gens désactivent le javascript dans leurs navigateurs, faut prévoir l'alternative. ;)
 
A

Anonyme

Invité
nicogala a dit:
... et comment ça se passe si mon user agent est MSie/Wdz2000 ? Le site va vouloir m'envoyer la police windows que mon Mac ne pourra pas afficher... non ?
Quand le navigateur ne trouve pas la ou les police(s) indiquée(s) dans la feuille de style, il prend celle indiquée dans les préférences.
 
A

Anonyme

Invité
Captain_X a dit:
moi ca me parait tordu comme truc... j'ai pas la solution, et à dire vrai que mon client soit sur mac ou sur PC j'ai vraiment d'autre chat à claquer....

y'a pas assez à se mordre les *******s avec IE et les autres navigateurs ?
C'est vrai qu'avec tous les nouveaux navigateurs qui sortent actuellement (pda, smartphone, console), il va vite devenir impossible d'utiliser telle ou telle css suivant tel OS ou tel navigateur. Mieux vaut suivre les standards et veiller à ce que la mise en page se dégrade correctement sur les navigateurs plus «exotiques». ;)
 

.Steff

Membre d’élite
Club MacG
6 Septembre 2005
1 294
104
gloup gloup a dit:
Sans utiliser de javascript, une solution pas très orthodoxe si tu veux utiliser ta fonte mac-only :

Bloc de code:
h1 {
    font-family: zapfino, "Arial bold", sans-serif;
}
Sur un navigateur mac, le zapfino s'affichera, tandis que dans windows le navigateur ne trouvant pas le zapfino passera à l'Arial gras et que dans linux le navigateur ne prendra que sans-serif. ;) :p

P.S. : j'ai essayé dans IE6 et Firefox Win et ça marche.
Ho punaise ca c'est génial!!!!! Je vais de suite tester si ca fonctionne.
Je pense que c'est ce qui me plait le plus... J'aime pas trop trop le javascript (surtout parce que je sais pas faire !!!)
:up: :up:
 

sylver

Membre confirmé
23 Septembre 2003
343
39
.Steff a dit:
Ho punaise ca c'est génial!!!!! Je vais de suite tester si ca fonctionne.
Je pense que c'est ce qui me plait le plus... J'aime pas trop trop le javascript (surtout parce que je sais pas faire !!!)
:up: :up:
Je rêve ou c'est exactement la technique que j'ai proposé quelques posts plus haut ;) ?
 
A

Anonyme

Invité
sylver a dit:
Je rêve ou c'est exactement la technique que j'ai proposé quelques posts plus haut ;) ?
Salut sylver, désolé je crois que j'ai zapper ton post. :rose: En fait, tout ce que je voulais, c'est voir si on pouvait de mettre du gras directement avec la police pour le cas particulier de notre ami. ;)
 

.Steff

Membre d’élite
Club MacG
6 Septembre 2005
1 294
104
sylver a dit:
Je rêve ou c'est exactement la technique que j'ai proposé quelques posts plus haut ;) ?
Non tu n'avais pas proposé cela :) Lui met directement du gras dans le font-family.
sylver a dit:
Pas besoin de sortir l'artillerie Javascript pour ça. CSS a prévu un mécanisme pour proposer plusieurs police, que le navigateur choisira en fonction de la disponibilité.

Par exemple, tu peux mettre ça dans ta CSS :
Bloc de code:
p { font-family: Futura-CondensedMedium, "Trebuchet MS", sans-serif; }
Tu m'avais simplement porposé de mettre différentes polices,ce que j'avais d'ailleurs déja fait.
Mais de toute facon, ca ne marche pas vraiment. Enfin qu'est ce que je dois mettre dans le font-weight apres? none, bold... Ou bien simplement le virer pour que windows prennent en compte le Arial Bold?
 

sylver

Membre confirmé
23 Septembre 2003
343
39
gloup gloup a dit:
Salut sylver, désolé je crois que j'ai zapper ton post. :rose: En fait, tout ce que je voulais, c'est voir si on pouvait de mettre du gras directement avec la police pour le cas particulier de notre ami. ;)
T'inquiète, c'est pas à toi que je faisais référence :)

.Steff a dit:
Non tu n'avais pas proposé cela :) Lui met directement du gras dans le font-family.

Tu m'avais simplement porposé de mettre différentes polices,ce que j'avais d'ailleurs déja fait.
Mais de toute facon, ca ne marche pas vraiment. Enfin qu'est ce que je dois mettre dans le font-weight apres? none, bold... Ou bien simplement le virer pour que windows prennent en compte le Arial Bold?
Attention à la confusion entre nom de police et valeur de la propriété font-weight.

Quand gloup gloup propose
Bloc de code:
h1 {
    font-family: zapfino, "Arial bold", sans-serif;
}
"Arial bold" représente la police nommée "Arial bold", et pas la police "Arial" avec la valeur de font-weight à "bold".

Ce "bold" de "Arial bold" ne doit pas être confondu avec le "bold" qui est une des valeurs de la propriété font-weight. Les autres valeurs sont normal, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 et inherit (voir la spécification). Ces valeurs s'utilisent avec font-weight, comme ceci :
Bloc de code:
h1 {
    font-weight: bold;
}
ou
Bloc de code:
h1 {
    font-weight: bolder;
}
mais on ne les utilise pas avec font-family. L'exemple suivant est donc faux :
Bloc de code:
h1 {
    font-family: "Arial bolder";
}
tout comme celui-ci
Bloc de code:
h1 {
    font-weight: "Arial 100";
}
 
  • J’aime
Réactions: .Steff

heroe

Membre confirmé
6 Mai 2000
368
18
Paris
.Steff a dit:
Un truc dans ce gout devrait pouvoir fonctionner avec le navigator.platform
de
navigator.appName
à
navigator.platform

bein j'y étais presque... :D
 

.Steff

Membre d’élite
Club MacG
6 Septembre 2005
1 294
104
sylver a dit:
Attention à la confusion entre nom de police et valeur de la propriété font-weight.
Oui d'accord j'avais pas compris ca moi. Enfin je croyais a ma surprise qu'on pouvais modifier la police ( la mettre bold) direct dans le font-family. Apparement pas alors. Merci du tuyaux.
Donc ou je pourrais trouver les polices dispo sur windows? A part sur un PC windows bien sur ;)
 

.Steff

Membre d’élite
Club MacG
6 Septembre 2005
1 294
104
Captain_X a dit:
moi ca me parait tordu comme truc... j'ai pas la solution, et à dire vrai que mon client soit sur mac ou sur PC j'ai vraiment d'autre chat à claquer....

y'a pas assez à se mordre les *******s avec IE et les autres navigateurs ?
Merci du post qui fait avancer les choses :mouais: