Debutant : Utiliser 2 .css qui se complètent sans s'écraser [Resolu]

Bonjour,

C'est mon premier post de complet débutant, je vous remercie de votre patience.

J'utilise deux fichiers css (styleIE.css et styleStd.css, respectivement pour IE et pour les autres navigateurs).

J'utilise, (parce que j'ai bien lu ce que j'ai trouvé ici et dont je remercie les auteurs), dans le head de mes pages

<link type="text/css" rel="stylesheet" href="styleStd.css" />
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="styleIE.css" />
<![endif]-->

Mes deux fichiers .css sont similaires à 4 lignes près.

Je déplore de devoir les maintenir ainsi, et je (me) vous demande s'il n'y aurait pas moyen d'avoir un fichier de l'ensemble des directives, systématiquement traité, et un fichier spécifique à IE qui, reprenant les entrées différentes, écraserait sélectivement les directives identiques mais avec des valeurs différentes.

Pour être plus clair :
- au lieu d'avoir deux fichiers .css de cent de lignes dont 4 différentes,
- avoir un fichier systématiquement traité, contenant les des 96 lignes communes et les 4 différentes
- avoir un fichier des 4 lignes différentes, traité conditionnellement dans le cas de IE.

Pour l'anecdote, ce qui a motivé ces deux fichiers .css était un problème de comportement de l'alignement d'une image (un logo de faible hauteur) dans le fil du texte.

Si cela peut servir à quelqu'un le problème se résoud en jouant sur la margin-bottom, en complément des directives d'alignement

img
{
vertical-align: middle;
margin-bottom: .33em;
}


Je vous remercie

Serge
Modifié par sergeAles (14 Dec 2009 - 19:08)

Salut,

Un truc comme ca : Les commentaires conditionnels.

C'est le cas : IE va utiliser tes deux fichiers. Donc sans rien changer à ta déclaration, il te suffit de supprimer de la feuille de style styleIE.css tout ce qui se trouve déjà dans l'autre.

L'important étant de déclarer la feuille "standard" avant la feuille IE, comme tu l'as fait.

Bonjour,

je te remercie de ce lien.
C'est précisément l'un de ceux que j'ai lu dans mes recherches et qui m'a appris à utiliser les commentaires conditionnels.

Sauf si je l'applique mal, quand je passe dans le [if IE], les directives écrasent celles qui sont spécifiées en amont.

Ce que je souhaite, c'est compléter, pas écraser.

Mon précédent post n'était peut-être pas merveilleusement limpide....

Merci Mikatchu, c'est à toi que je répondais ; la réponse de mistike n'étant as encore visible

Merci à mistike : tu as mis le doigt sur mon erreur qui consistait à dupliquer les lignes communes.
Je le saurai.

Merci donc à vous deux.

Comment clore ce post, si tant est qu'il faille le faire ?

Si si

Tu mets dans ton "standard" tout ce que tu veux. Et dans le IE juste les corrections pour IE. Elles écraseront la directive identique du "standard", ce qui est justement ce que tu souhaites. Toutes celles qui sont présentes dans le standard *mais pas dans le IE* seront gardées par IE.

Par exemple :

Fichier styleStd.css :

p
{
color: red;
}

img
{
border: 2px solid black;
margin: 1em;
}

Fichier styleIE.css :

img
{
vertical-align: middle;
margin-bottom: .33em; 
}

Te donnera dans FF :
* des paragraphes rouges
* des images à bordure noire et marge de 1em de tous les côtés

Et dans IE :
* des paragraphes rouges
* des images à bordure noire, alignées au milieu et avec une marge de 1em partout sauf en bas de .33em

sergeAles a écrit :
Merci Mikatchu, c'est à toi que je répondais ; la réponse de mistike n'étant as encore visible

Merci à mistike : tu as mis le doigt sur mon erreur qui consistait à dupliquer les lignes communes.
Je le saurai.

De rien du coup j'ai reprécisé, mais c'est pas plus mal.

sergeAles a écrit :

Comment clore ce post, si tant est qu'il faille le faire ?

Edite ton premier post et rajoute [résolu] dans le titre

Hello Serge et bienvenue,

pour résumer :
* tu mets en place une CSS globale.
* plus loin dans le code (car à priorité égale de sélecteurs c'est le dernier qui sera utilisé) tu cibles une (ou plusieurs) version(s) d'IE en lui destinant une feuille CSS qui ne contiendra que les correctifs.

A noter que cibler toutes les versions d'IE n'a aucun sens puisque IE8 est respectueux des standards.

merci mistike, pour ton sens pédagogique et pour cet exemple parlant.

J'ai compris. (tout arrive !)


Comment clore ce post, si tant est qu'il faille le faire ?

Merci Heyoan,

mon problème est résolu, ce qui n'enlève rien à la qualité et à la sympathie de ton intervention.

J'ai pris bonne note de ta dernière remarque (A noter que cibler toutes les versions d'IE n'a aucun sens puisque IE8 est respectueux des standards.) : j'en retirerais toutes les finesses quand j'aurais un petit peu progressé.

sergeAles a écrit :
Comment clore ce post, si tant est qu'il faille le faire ?

Tout simplement en indiquant qu'il est [Résolu]
Modifié par Mikachu (14 Dec 2009 - 19:06)