CSS qui s'adapte au navigateur (et à ses bugs...)

(reprise du message précédent)

cktoon a écrit :
@Laurent
Ma question concernait plus la façon de rédiger mes feuilles de styles pour tenir compte de tous ces problèmes... tu as tranché toi ?

Je vais botter en touche ;) Je me défausse du problème du box model en veillant à réaliser des mises en page ayant suffisamment de "jeu" pour passer aussi bien dans le box model standard que dans le box model microsoft... Je pense que cette solution mérite qu'on y réfléchisse, car elle est plus souvent praticable qu'on le croit.

Le bon vieux hack de tantek Celik nécessite quelques précautions quand on a des propriétés pour le media speech, car il faut rétablir la propriété voice-family voulue, qui n'est pas forcément celle héritée par l'élément. Certes, les css speech sont encore expérimentales et anecdotiques... mais mieux vaut prévoir et être conscient du problème.

Finalement, le moyen le plus propre, quand on ne peut pas introduire assez de jeu dans son positonnement, c'est encore le doctype switching en faisant basculer tout le monde en mode Quirks, ou en utilisant box-sizing et son équivalent Mozilla.

En fait, j'aimerai bien avoir le temps de mettre à ajour l'article d'OpenWeb sur le box model que tu cites plus haut...

Laurent Denis a écrit :

Le bon vieux hack de tantek Celik nécessite quelques précautions quand on a des propriétés pour le media speech, car il faut rétablir la propriété voice-family voulue, qui n'est pas forcément celle héritée par l'élément. Certes, les css speech sont encore expérimentales et anecdotiques... mais mieux vaut prévoir et être conscient du problème.

Effectivement, une des raisons pour lesquelles je demandais des avis est que je ne sais pas à quoi renvoit exactement cette propriété...
Est-elle destinée aux synthèses vocales ?

Laurent Denis a écrit :

Finalement, le moyen le plus propre, quand on ne peut pas introduire assez de jeu dans son positonnement, c'est encore le doctype switching en faisant basculer tout le monde en mode Quirks, ou en utilisant box-sizing et son équivalent Mozilla.

Oui, j'ai enfin compris l'utilité de la balise doctype Sauf que... IE 5 (encore lui ) se distingue encore en interprêtant tout seul comme un grand ce qu'il veut (avec ses marges inutiles, ses ascenseurs....)

Laurent Denis a écrit :

En fait, j'aimerai bien avoir le temps de mettre à ajour l'article d'OpenWeb sur le box model que tu cites plus haut...

Je ne manquerai pas d'aller y jeter un oeil

cktoon a écrit :

Effectivement, une des raisons pour lesquelles je demandais des avis est que je ne sais pas à quoi renvoit exactement cette propriété...
Est-elle destinée aux synthèses vocales ?

Oui. Voice-family spécifie simplement le type de voix utilisé, exactement comme font-family spécifie une police de caractères.
Voir http://blog-and-blues.org/weblog/2004/08/25/286-les-proprietes-css-orales-pour-opera-760-preview-1
Et pour le problème posé par le voice:family: inherit, ce petit test (à faire avec opera 7.60): http://blog-and-blues.org/test/tanteck_celik_hack/ (le 2e paragraphe étant hacké, il hérite de la famille de voix de son conteneur... qui n'est pas la bonne).

Je ne sais toujours pas quelle méthode utiliser pour mes feuilles.

Récapitulons les données de mon problème :

- je souhaite avoir une mise en page nickel sur un certain nombre de navigateurs (en l'occurence actuellement IE 5 et 6 sous windows, IE 5 sous Mac OS X et Mac OS 9, Mozilla... la liste peut s'allonger mais par nécessiter première, je resterais sur cette "toute petite" liste )

- j'ai constaté un certain nombre de différences d'interpêtations et / ou des bugs de certains, pour lesquels j'ai réussi à trouver quelques solutions de "correction", la plupart d'entre elles faisant appel à des méthodes de css hacks.

- au fil des posts, des liens de référence que j'ai pu consulter grâce à vous tous, je m'apperçois que ces méthodes hacks ne sont pas l'idéal puisque certaines d'entre elles sont ou pas interprêtées par tel ou tel navigateur

Je me demande donc toujours aujourd'hui : comment faire ?

Mon hypothèse à cette heure est qu'il me faut créer différentes feuilles de styles : une feuille IE 5 windows, une feuille IE5 Mac, une feuille standard.... et que la bonne feuille de style soit appelée suivant le navigateur de l'internaute. Je règle ainsi les problèmes de hacks... chacun aura sa feuille de style qui tient compte de sa manière d'interprêter les choses.

Est-ce que ça vous semble correct ?

On n'a pas toujours le choix de la mise en page... On va encore en remettre une couche mais je suis dans le même cas que l'auteur du thread : la plupart de nos clients sont sous mac, la plupart de nos client sous mac utilisent IE. Pour nous la majorité, c'est IE/Mac.

Et j'ai du me voir répondre à un client hier après deux bonnes heures de tentatives : "désolé, je peux centrer le contenu horizontalement, mais pas verticalement, ça nécessitera une refonte un peu plus lourde du site". Franchement j'avais les boules, aucun des "hacks" trouvés n'avait résolu mon problème, il gère son cache comme un âne bâté j'ai du changer de mac à chaque test -_-', et au final il va falloir que je me tape du JavaScript c'est certain...

Le height à 100% a priori c'est justement pour le centrage vertical.

Et le jour où un client m'appellera pour me dire "mon client Machin n'arrive pas à lire mon site, c'est inadmissible", tout ça parce que j'ai oublié de vérifier pour IE 2.0, je fais quoi moi hein ?
Cela dérive presque en HS mais le sujet est finalement toujours le même : que faire des navigateurs obsolètes ?

A priori je vais faire le choix de feuilles de styles alternatives, en me passant de Javascript mais en faisant la détection en PHP, ça me paraitra un peu plus "propre" à défaut de l'être complètement...
Modifié par naholyr (04 Nov 2005 - 10:06)