28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis presque prêt à mettre en ligne, une fois que j'aurai terminé mes tests sur plusieurs systèmes.

Je suis vraiment surpris, tout se passe bien sur FF2 , IE, Netscape et Opera PC, pareil sur Linux, résultat nickel pour Firefox et pour la plupart de ses navigateurs (je me rappelle plus de leurs noms là comme ça...)

Sur mac, le résultat et bon sur Safari, IE et pas trop mal sur Opera hormis un problème de padding-top sur mes H2 qui est un peu trop écourté à mon goût.

Bref, pas très grave tout ça mais ce qui me surprend énormement c'est Firefox Mac (FF2) qui fait n'importe quoi avec mes titres et tous les textes en uppercase, peu importe leur taille. Le text-uppercase est dégeulasse.

Est-ce que vous savez d'où ça peut venir ? Smiley decu

Voilà quelques déclarations dans le désordre... Smiley langue


h2, h2.title {
color : white;
font-size : 0.8em;
text-transform : uppercase;
letter-spacing : 1px;
margin-bottom : 0.7em;
background : black;
padding : 2px 5px;
}


body {
margin : 0 0 0 160px;
padding : 0;
color : #333;
background-color : white;
font : 70% Arial, Helvetica, sans-serif;
text-align : left;
float : left;
}


Et un petit exemple en images... hop.

FF2 MAC

upload/11575-snapff2mac.gif


SAFARI MAC

upload/11575-snapsafari.gif


Tout aide sera vraiment appréciée Smiley cligne

Merci beaucoup.

Matt
Modifié par Barlina (26 Mar 2007 - 15:11)
Je ne comprends rien, j'ai fait d'autres test avec cette fois des police en taille absolue (juste pour le test). J'ai fait un autre test avec une font :100% pour le body en modifiant toutes les valeurs, bref j'ai essayé tout ce à quoi j'ai pu penser mais rien n'y fait. Firefox Mac rend les polices de petites tailles (6px) complètement crades alors que tout ses collègues assurent sans problème que ce soit sur Linux, Mac ou PC Smiley fache C'est comme s'il n'y avait aucun lissage...

Bref, je ne compte pas me prendre la tête avec ça pendant très longtemps sauf si vous avez une solution ou une inforamtion miracle. J'aimerai savoir quelle est la méthode pour spécifier une feuille de style propre à un navigateur ? Je vais faire une feuille pour Firefox mozilla mac...

Merci Smiley cligne
Matt
J'ai pensé à une autre solution...

Après quelques recherches, j'ai pensé pouvoir palier ce problème en utilisant la librairie GD pour régénérer les titres et mes autres text-uppercase du site. Cette solution ne ma plait guère pour les raisons de référencements, accessibilité etc. mais si c'est la seule Smiley decu

Peut-être avez-vous des pistes concernant cette solution ?

Merci à vous

Smiley smile
Barlina a écrit :
C'est comme s'il n'y avait aucun lissage...

Ça semble être le cas. Ce qui n'est guère étonnant pour des petites tailles de texte. Il me semble qu'un Windows XP configuré par défaut ne fera pas de lissage pour les tailles de texte en dessous de 9pt, quelque chose comme ça.

De toute façon, afficher des polices en tout petits caractères c'est prendre un risque, concernant l'impact sur le rendu (en cas de mauvais lissage ou d'absence de lissage) ou sur la lisibilité.

Pour information, j'ai configuré mon navigateur (Firefox, en l'occurrence) pour qu'il ne m'affiche pas de texte en dessous de 12px. Tout texte en 8px ou 9px ou 11px sera affiché... en 12px.

Oui je sais, les utilisateurs sont des chieurs. Smiley cligne

Barlina a écrit :
Bref, je ne compte pas me prendre la tête avec ça pendant très longtemps

Sage résolution. Smiley smile

Barlina a écrit :
Je vais faire une feuille pour Firefox mozilla mac...

Ça n'est pas vraiment possible. Pas de manière fiable.

Barlina a écrit :
Cette solution ne ma plait guère pour les raisons de référencements, accessibilité etc.

À partir du moment où le texte de l'image est indiqué comme alternative textuelle via l'attribut alt de l'image, ça ne pose pas de problème de référencement ou d'accessibilité.
Bonjour Florent,

a écrit :
Oui je sais, les utilisateurs sont des chieurs.


Non, mais je pense que la grande majorité des utilisateurs ne reconfigurent pas leurs navigateurs. Après c'est sûr que c'est un "risque" mais je veux bien le prendre, tant pis.

Par ailleurs quand je dis
a écrit :
je ne compte pas me prendre la tête avec ça pendant très longtemps


Il faut quand même que je trouve une solution efficace car je ne vais pas refaire le design du site juste parce qu'il bug sur un navigateur et sur une plateforme précise. Ce serait dommage alors qu'il passe bien sur tous les autres. Le problème c'est qu'il s'agit de Firefox et pas d'un petit navigateur inconnu Smiley decu

Pour finir, tu dis

a écrit :
Il me semble qu'un Windows XP configuré par défaut ne fera pas de lissage pour les tailles de texte en dessous de 9pt, quelque chose comme ça.


Je précise juste que le problème que je rencontre concerne les Mac. Je suis d'autant plus surpris que je connaissais les Macs pour leur beau rendu des polices. Je fais les tests windows en mode défaut. Smiley confused

Que peut-il bien se passer avec Firefox mac ? (bon idem avec Camino quand même) j'ai cherché s'il y avait des bugs connus mais je ne trouve rien et je ne trouve pas de hacks css qui filtre uniquement pour Mozilla mac...

Grosse galère Smiley eek

Merci en tous cas pour cette réponse.
Encore une chose Smiley biggrin

9px en capitales avec une approche de 1px ça reste selon moi, tout à fait lisible, non ? Je vais pousser un peu plus loin, mais un 8px toujours en capitales avec une approche de 1px, pour des infos secondaires, je crois que ça le fait aussi...

Bien-sûr, c'est juste mon avis Smiley cligne

Enfin, ce n'est pas grave, je vais me débarasser de mes text-uppercase dans la mesure du possible et me contententer de capitalize.

Seulement, pour certains texte, je ne pourrai pas et il va falloir que je trouve la solution pour transformer le texte en image. Donc si vous connaissez un tutoriel, ce serait super ! Smiley biggrin

merci beaucoup.
Modifié par Barlina (26 Mar 2007 - 12:37)
Barlina a écrit :
9px en capitales avec une approche de 1px ça reste selon moi, tout à fait lisible, non ?

Question : combien de quinquagénaires sur le Web ? De séniors ? Voire de malvoyants ?
Je connais par ailleurs des personnes ayant une très bonne vision... mais un très grand écran (au hasard des utilisateurs de macs), avec une taille de pixel assez ridicule.

Dans tous les cas, ne pas se baser sur des tailles de texte en pixels. Il y a un article sur la question dans les tutoriels d'Alsacréations :
http://css.alsacreations.com/Accessibilite-du-Web/Agrandissement-de-la-taille-des-polices
Voir aussi :
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em


Quoi qu'il en soit, on peut rappeler que :
- il n'y a pas de hack permettant d'isoler une Firefox pour une plateforme donnée (c'est le même logiciel avec le même moteur de rendu quelle que soit la plateforme... seule l'intégration au système est différente, ce qui inclue en partie le rendu des polices) ;
- on pourrait envisager de tester la valeur de User-Agent pour repérer Firefox Mac, mais 1) c'est complexe si on ne maitrise pas cet aspect et 2) c'est peu fiable ;

Firefox représente 20% environ des parts d'utilisation sur Mac. Mac représente 3 ou 4% des internautes. 20%*4% = moins d'un pour cent des internautes.

Ce problème ne relevant pas d'un problème de conception (mis à part le choix d'un texte en taille réduite), et la part des utilisateurs touchés étant faible, il serait dommage d'y passer trop de temps (ou de mettre en place une solution avec des images si on juge que cette solution n'est pas nécessaire dans la très grande majorité des cas).
a écrit :
Dans tous les cas, ne pas se baser sur des tailles de texte en pixels.


Tous tes mes polices sont spécifiées en taille relative, les pixels, c'était juste pour l'exemple. Si j'avais dis, 0.8em, ça n'aurait pas eu de sens. Smiley cligne


a écrit :
Ce problème ne relevant pas d'un problème de conception, et la part des utilisateurs touchés étant faible, il serait dommage d'y passer trop de temps


Oui, tu as entièrement raison, je me suis d'ailleurs résigné à utiliser ces uppercases, et j'ai trouvé un bon compromis qui procure le même affichage (enfin ...) sur les deux plateformes.

Néanmoins, les chiffres que tu donnes dans ton message, sont intéressants, j'imaginais qu'il y avait plus d'utilisateurs de Mac que ça, bon à savoir mais je ne vais pas les léser pour autant Smiley ravi .

Je vais classer ce topic en [résolu] en restant sur le fait que Firefox et Camino MAC ne lissent plus les polices en dessous de 8px.

Merci
Modifié par Barlina (26 Mar 2007 - 14:23)