Alors en fait y'a 2 grandes solutions je pense que tu es au courant :
1) détecter le navigateur et importer la bonne feuille de style
2) avoir 1 seule feuille de style avec des hacks CSS qui permettent d'écrire des bouts de la feuille de style seulement lus par certains navigateurs.
Pour l'instant j'ai pu me contenter de la soluce 2. L'avantage c'est que tu n'as pas 2 fichiers dans lesquels reporter toutes tes modifs et à maintenir. L'inconvénient il y en a 2 : la feuille de style est plus lourde et surtout il faut vraiment ruser parfois pour réussir. IE Mac respecte assez bien les standards mais sur certains points il lui faut des hacks que pour lui...
Je commence sous Gecko (je dis Gecko pour simplifier, ça sous-entend les navigateurs qui respectent bien le CSS) :
.monstyle {attributs: paramètres Gecko;}
Cas simple : si le rendu diffère sous IE je mets les bons paramètres pour IE en normal dans la feuille de style à la place :
.monstyle {attributs: paramètres IE;}
Puis j'écrase avec les paramètres normaux CSS pour les navigateurs Gecko :
Il existe d'autres hacks mais l'avantage de ceux-ci est : ils passent au validateur CSS du W3C. Ceci dit il n'y a pas de garantie qu'ils continuent toujours à valider, si le W3C décide d'être moins permissif dans son validateur CSS.
En pratique j'ai surtout du être attentif sur ces points :
Gecko ajoute les bordures des boîtes à l'extérieur des boîtes, donc la dimension totale des boîtes est : leur dimension + l'épaisseur cumulée des bordures. IE compte les bordures à l'intérieur de la boîte
padding/margin
les background-image doivent souvent être repositionnés
Ce n'est pas simple, mais c'est vraiment faisable même avec une charte relativement complexe. Le site dont je m'occupe sera bientôt en ligne, je donnerai l'adresse à ceux que ça intéresse. Mais c'est sûr qu'il faut mettre les mains dans le cambouis, et à part un webmaster je ne vois pas qui peut le faire. Dans le cadre d'un éditeur WYSIWYG CSS les gens recherchent plutot la simplicité je suppose, donc je ne sais pas si ça va t'aider mais j'espère !
Un autre problème des CSS c'est les colonnes, c'est souvent contourné en imbriquant un tas de div les unes dans les autres. Pour ma part pour des raisons de sémantique je ne voulais pas avoir ce système alors j'ai inventé une astuce assez dégueu mais qui marche : mettre en background-image de body une image d'1 pixel de haut et comportant les couleurs des 3 colonnes, puis en lui donnant la propriété repeat-y. Puis comme j'ai des éléments qui doivent aller en bas de page dans une colonne donnée, j'ai même dû utiliser du Javascript qui détecte les tailles des divs et les augmente au besoin...
[^] # Re: Optimisme 2ème édition
Posté par guix77 . En réponse au journal Le blues du webmaster. Évalué à 3.
1) détecter le navigateur et importer la bonne feuille de style
2) avoir 1 seule feuille de style avec des hacks CSS qui permettent d'écrire des bouts de la feuille de style seulement lus par certains navigateurs.
Pour l'instant j'ai pu me contenter de la soluce 2. L'avantage c'est que tu n'as pas 2 fichiers dans lesquels reporter toutes tes modifs et à maintenir. L'inconvénient il y en a 2 : la feuille de style est plus lourde et surtout il faut vraiment ruser parfois pour réussir. IE Mac respecte assez bien les standards mais sur certains points il lui faut des hacks que pour lui...
Je commence sous Gecko (je dis Gecko pour simplifier, ça sous-entend les navigateurs qui respectent bien le CSS) :
.monstyle {attributs: paramètres Gecko;}Cas simple : si le rendu diffère sous IE je mets les bons paramètres pour IE en normal dans la feuille de style à la place :
.monstyle {attributs: paramètres IE;}Puis j'écrase avec les paramètres normaux CSS pour les navigateurs Gecko :
html>body .monstyle {attributs: paramètres Gecko;}Qui est lu par tout sauf IE. Ca c'est dans le cas simple.
Cas compliqué : si le rendu diffère entre IE Mac et IE Windows je mets les paramètres CSS pour IE Mac en normal dans la feuille :
.monstyle {attributs: paramètres IE Mac;}Puis je corrige pour tout sauf IE Mac : (attention à bien mettre \*/)
Enfin pour rétablir les bons paramètres Gecko je remets :
html>body .monstyle {lesCSSàcorriger: paramètres;}Sinon il y a aussi ça qui peut servir :
.monstyle {lesCSSjustepourIE: paramètres !important;}que reconnait uniquement IE.Il existe d'autres hacks mais l'avantage de ceux-ci est : ils passent au validateur CSS du W3C. Ceci dit il n'y a pas de garantie qu'ils continuent toujours à valider, si le W3C décide d'être moins permissif dans son validateur CSS.
En pratique j'ai surtout du être attentif sur ces points :
Ce n'est pas simple, mais c'est vraiment faisable même avec une charte relativement complexe. Le site dont je m'occupe sera bientôt en ligne, je donnerai l'adresse à ceux que ça intéresse. Mais c'est sûr qu'il faut mettre les mains dans le cambouis, et à part un webmaster je ne vois pas qui peut le faire. Dans le cadre d'un éditeur WYSIWYG CSS les gens recherchent plutot la simplicité je suppose, donc je ne sais pas si ça va t'aider mais j'espère !
Un autre problème des CSS c'est les colonnes, c'est souvent contourné en imbriquant un tas de div les unes dans les autres. Pour ma part pour des raisons de sémantique je ne voulais pas avoir ce système alors j'ai inventé une astuce assez dégueu mais qui marche : mettre en background-image de body une image d'1 pixel de haut et comportant les couleurs des 3 colonnes, puis en lui donnant la propriété repeat-y. Puis comme j'ai des éléments qui doivent aller en bas de page dans une colonne donnée, j'ai même dû utiliser du Javascript qui détecte les tailles des divs et les augmente au besoin...