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

Pour corriger les bugs bizarres de MSIE 5 pour Mac et l'interprêtation des dimensions des blocs en général sur MSIE, j'ai trouvé plusieurs méthodes de contournement utilisées.
J'aimerais vos avis éclairés :
Certains utilisent cette méthode

.classe {
  (...)                          
  voice-family: "\"}\"";    ici on bloque la lecture par IE de la suite
  voice-family:inherit;     qui donne les bonnes infos pour les standards
  width: 250px;
}

( exemple sur http://www.openweb.eu.org/articles/dimensions_boites_css/ )
D'autres utilisent cette méthode :

.classe {
ici on indique les styles pour IE
]
/* On bloque la lecture de la suite pour IE \*/
.classe {
ici on indique les styles pour tous les autres navig standards
}
/* On indique à IE la fin du commentaire */

( explications ici - en anglais... http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html

Attention ce ne sont pas des bugs, mais des interprétations différentes selon les navigateurs.

Pour ce qui est des hacks CSS (puisqu'il s'agit de ça), le mieux est de trouver des méthodes pour les éviter plutot que de trouver des méthodes de hacks à mon avis.

On peut toujours indiquer celles ci :
* html element { ... } vu uniquement par IE

html > body element { ... } vu uniquement par les NON IE

element {
...
propriété: valeur !important ;
}
vu uniquement pas les NON IE.

Je le répète, mieux vaut trouver de quoi éviter ce genre de pratique.

Euh, en fait si, pour certaines choses, il s'agit bien de bugs : par exemple, si on fait une page à 100% de hauteur et 100% de largeur, sur IE 5 version Mac, on se retrouve avec un ascenseur vertical et un ascenseur horizontal... Il semblerait que sur cette version IE rajoute une marge de 15 pixels aux blocs ... d'où apparition de scroll non nécessaires.
Attention, je ne parle pas de blocs avec une marge spécifiée qui serait interprêtée différemment... Je parle bien d'un bloc tout bête de dimension 100% / 100%.
Mes feuilles de styles commencent à me sembler bien complexes du fait de ce genre de choses. Je cherche à trouver la meilleure méthode pour traiter ce genre de chose, histoire que mes css soient correctement interprêtées par les navigateurs, mais qu'elles restent aussi lisibles à mes yeux.
D'autres avis sur la question ?

Au sujet d'IE 5 MAC, ce navigateur est une abération de ce que j'ai compris, et mieux vaut ne pas en tenir compte du tout.

ElMoustiko a écrit :
Au sujet d'IE 5 MAC, ce navigateur est une abération de ce que j'ai compris, et mieux vaut ne pas en tenir compte du tout.

En son temps, il fut pourtant salué comme le meilleur support des standards (CSS en particulier) par les navigateurs graphiques.
De profundis.

Ca n'est pas vraiment faire avancer les choses que de conclure "laisse tomber IE 5 mac" il fait rien comme tout le monde.
Le fait est...
Cependant : mon client est sous IE 5 mac et lui il veut voir des pages qui s'affichent correctement sur son ordi à lui, sur son vieux navigateur qu'il n'échangerait pour rien au monde, même s'il fait partie du 0,00000001 % d'internautes comme lui....
Et en ce qui me concerne, ce client là n'est pas si rare... Je suis obligée de trouver une solution et d'en tenir compte

J'ai IE5 pour mac et j'essaye de l'utiliser le moins possible!!!
C'est une cata ce truc

Moi je parle par rapport à ce que j'en ai entendu.
Les chiffres que j'ai entendus au contraire sont que IE5 MAC est très très peu utilisé.

Pour ce qui est de ton client, tu as aussi un rôle en tant que webmestre de lui indiquer qu'il utilise un navigateur de chiotte et que Camino par exemple serait bien mieux.

@Laurent, et tu sais que Internet Explorer 1.0 à sa sortie était tip top aussi... (je ne poursuis pas ma phrase ;) )

Ou Safari ou meme Mozilla

Un clic malheureux a sucré ma réponse originale, nettement plus "directe". Voici donc une version "soft":

Un navigateur vous dérange ? Vous le virez !
Un client râle ? vous le virez aussi ?

Ah ? Bon...

Cette manière de répondre illustre, AMHA, ce que le "petit monde des standards" a de pire: l'utopisme facile, tellement commode.

Je n'ai, hélas, pas une expérience suffisante d'IE5 Mac pour apporter une réponse à cktoon sur ces techniques de hacks. Je le regrette avec un certain agacement, là.

Oui enfin il ne faut pas détourner mes propos à tous les cas non plus, c'est un peu trop facile, mais je suis désolé à un moment il va bien falloir expliquer clairement les choses aux interessés et arreter de tenir compte à coup de bidouilles des mauvais élèves navigateurs.
C'est pas en entretenant ces navigateurs qu'on fera avancer les choses.
Et c'est justement en expliquant aux clients les premiers (j'ai jamais parlé de leur gueuler dessus, de les virer, de leur dire ci ou ça) pourquoi il faut qu'ils acceptent de changer de navigateur et d'accepter que le navigateur qu'ils utilisaient jusque là est limité pour certaines choses et qu'il faut accepté cette "dégradation acceptable" pour employer tes termes.
Modifié le 30 Oct 2004 - 23:42

On change de discours, là : on n'est plus dans le "navigateur de chiotte" ou dans l'aberration qu'il vaut mieux ne pas utiliser. C'est déjà ça ;)

Je n'ai pas changé de discours, c'est exactement ce que j'ai dis plus, haut, tu as peut être mal interprété ce que j'ai écris, ça c'est autre chose.

cktoon a écrit :
Pour corriger les bugs bizarres de MSIE 5 pour Mac et l'interprêtation des dimensions des blocs en général sur MSIE, j'ai trouvé plusieurs méthodes de contournement utilisées.
J'aimerais vos avis éclairés :

Moi je n'utilise pas le "box model hack".
Si j'ai assigné width à une boîte, j'évite d'assigner padding et margin à gauche et à droite.
Je donne plutôt la valeur au contenu.

Le code HTML

<div id="container">
<p>le paragraphe</p>
</div>

Le code CSS

#container { 
   width: 400px; 
   padding-top: 9px; 
   padding-bottom: 9px; 
}

p { 
   padding-right: 9px; 
   padding-left: 9px; 
   margin: 0 0 0.5em 0; 
}

Tiens c marrant je me prend la tete en ce moment avec ie5.2 mac,
le truc c'est que le client (tous les clients?) n'a rien a foutre des standards et des navigateurs conformes.
Tout ce qu'il exige, c'est que son site soit nikel sous son navigateur favoris qu'il ne changera jamais parcequ'il a d'autre chats a fouetter (et dans le fond il a bien raison) .

Donc c'est a nous de nous adapter en fonctions du client. C'est triste a dire mais c'est comme ça.

Enfin ceci ne m'empeche pas de faire mon dev sous moz, et de bidouiller mes css pour que ça passe aussi nikel sous ie mac.
C'est une grosse prise de tete je vous l'accorde.

edit

a voui, une solution est celle proposée par euh..., l'auteur du message precedent
Modifié le 31 Oct 2004 - 01:41

@ElMoustiko

ElMoustiko a écrit :
et tu sais que Internet Explorer 1.0 à sa sortie était tip top aussi... (je ne poursuis pas ma phrase ;) )

Et il y en a encore qui naviguent la dessus... sous windows 3.1... et qui te disent "votre site là, il marche pas bien"....


@Laurent
J'ai bien cru que les esprits allaient s'échauffer... Merci de tes posts

@Stephan
Effectivement, ta solution me semble interessante.
Cependant, je ne vois pas comment corriger l'apparition des ascenseurs verticaux et horizontaux sur un body à 100 % sans passer par le box hack ?

@nzr
Contente d'apprendre que je ne suis pas la seule à m'arracher les cheveux avec cette version d'IE ... et avec les clients qui y tiennent

cktoon a écrit :

Cependant, je ne vois pas comment corriger l'apparition des ascenseurs verticaux et horizontaux sur un body à 100 % sans passer par le box hack?

Pourquoi donner une valeur de 100% à un body? Ça me semble inutile.
As-tu un exemple concret ?

Ressource pour les filtres css : centricle : css filters (css hacks)
Modifié le 31 Oct 2004 - 06:30

A propos de marge de 15px inattendue, je relève ceci chez Paul Peter Koch:

PPK a écrit :

Every absolutely positioned element has a secret margin of 15 pixels. This can cause unwanted scrollbars if the elements are close to the right or bottom border of the window. Solve it by adding

margin-right: -15px;
margin-bottom: -15px;

http://www.quirksmode.org/browsers/explorer5mac.html

(Excellente adresse au demeurant, avec de nombreux bugs IE5 expliqués, et résolus pour certains). PPK renvoie également à:
- http://www.macedition.com/cb/ie5macbugs/
- http://www.l-c-n.com/IE5tests/
- http://www.oreillynet.com/pub/a/javascript/synd/2002/11/15/css_pitfalls.html (à nouveau sur ces marges imprévues)

@Laurent
C'est exactement à ces adresses que j'ai commencé à trouver des explications sur des comportements bizarres d'IE mac et des débuts de solutions...
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 ?

@Stephan,
pas d'intérêt, c'était juste pour illustrer cette apparition réellement buggée d'ascenseurs...

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...