Compatibilité CSS : problème avec les commentaires conditionnels

Bonjour,

edit:
Tout d'abord je m'excuse, mais le fait que les commentaires conditionnels ne pouvait être dans un CSS m'avais échappé, puisque sur les sujets que j'ai consulté il était principalement question de les utiliser pour le css..... Mais du coup je laisse le message et ferais un edit à la fin.

J'ai parcouru un peu le forum et si j'ai bien vu certain sujet qui aborde le problème que j'ai, j'en ai désormais un autre en rapport avec les solutions données.

Le but : Faire des petites adaptations à mon code CSS pour qu'il passe sous IE mais n'handicape pas les autres navigateurs.

Au début je voulais utiliser les données de HTTP_USER_AGENT pour insérer du code PHP faisant apparaitre certaine ligne (surtout une pour l'instant) si le navigateur était IE.

J'ai vu que certaine personne jugeait cette méthode "inefficace" et orientaient vers les commentaires conditionnels.

Bien que comme certain je n'apprécie pas trop de mettre des fonctions propriétaire dans mon code, j'ai tout de même testé la chose.

EDIT : du coup, la ça tombe à l'eau.

Voici pour l'instant l'Id sur lequel j'ai commencé.

#scrollcont {
	position: absolute;
	background-color: #0c2232;
	border-bottom-color: #153d59;
	border-bottom-style: dotted;
	border-top-color: #153d59;
	border-top-style: dotted;
	border-width: medium;
/* height: 60%;*/
	top: 180px;
	left: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: auto;
	bottom: 60px;
	width: 100%;
	
}

Scrollcont contient les infos principales de la page (un bandeau gauche et la partie centrale). Il est encadré par l'entête et le pied de page.

Comme vous pouvez le voir la ligne height est commentée, mais sans elle IE6 n'affiche pas la page correctement (il semble qu'il ne prenne pas la bonne référence pour placer le :

bottom: 60px;

Du coup du texte est bouffé par le pied de page.
Par contre si je décommente, les autres navigateurs affichent, dans les grandes résolutions, un pied de page surdimensionné (cela pour que dans les faibles résolutions scrollcont ne déborde pas sous le pied de page qui a une taille fixe.)

EDIT : ce qui m'embête serait de devoir faire deux CSS avec les commentaires conditionnels (et du coup deux fichiers à modifiés à chaque intervention.


Le CSS est il en cause ?

Auriez vous des idées ?

Est il si génant que ça d'utiliser un script php de reconnaissance, sachant qu'il ne servira qu'à faire des ajustements léger et à n'avoir qu'un fichier à travailler (j'ai les deux versions sous les yeux d'un seul coup)?

Et si cela est envisageable, à quoi faut il faire attention ?

Merci pour vos réponses.
Modifié par photonoxx (03 Mar 2007 - 22:17)

Quelques remarques :

1. Toute réticence « de principe » pour l'utilisation des commentaires conditionnels sous prétexte que c'est un « code propriétaire » serait malvenue et surtout absolument infondée. Un commentaire conditionnel est un commentaire HTML, et sera interprété comme tel. Sauf par un navigateur précis, auquel le code inséré dans le commentaire conditionnel est adressé. Il s'agit donc d'un code valide (commentaire HTML), et il ne s'agit pas d'un hack (c'est une fonctionnalité documentée d'un navigateur précis).

2. L'utilisation de commentaires conditionnels ne signifie absolument pas qu'il faille adresser à Internet Explorer (ou les versions visées d'Internet Explorer) une feuille de style complète en plus de la feuille de style commune pour tous les navigateurs !
La feuille de style appelée dans le commentaire conditionnel (placé après l'appel de la feuille de style normale) contiendra des correctifs pour Internet Explorer. Mais on se base bien sur la feuille de style normale pour la mise en forme de la page dans Internet Explorer !

3. Remarque en passant : vu que les commentaires conditionnels sont des commentaires HTML, il est effectivement -- techniquement -- impossible de les utiliser dans une feuille de style CSS. Pas plus qu'il n'est possible d'utiliser un simple commentaire HTML dans une feuille de style.
Modifié par Florent V. (04 Mar 2007 - 00:33)

Salut,

a écrit :
Est il si génant que ça d'utiliser un script php de reconnaissance, sachant qu'il ne servira qu'à faire des ajustements léger et à n'avoir qu'un fichier à travailler (j'ai les deux versions sous les yeux d'un seul coup)?

Le problème du script de reconnaissance est son manque de fiabiliité. Tu ne peux pas être sûr que la valeur renseignée pour HTTP_USER_AGENT est exacte, pour peu qu'elle existe.

Les commentaires conditionnels sont un moyen efficace & sûr de réserver quelques corrections à IE, et en plus ça fonctionne sans Javascript ni PHP

Pour ce qui est du travail à fournir, vu que les feuilles de style pour IE ne reprennent que quelques corrections, il ne faudra pas forcément y toucher pour la moindre modification, et si cela s'avère nécessaire, ça ne devrait pas être trop pénible ...

Donc la technique serait de définir en plus du fichier CSS des styles sur la page Xhtml dans l'entête entouré de balise style ?

Une question également :

Si un style est défini avec la position absolute et que je défini ensuite position static (pour revenir à la normale) avec un commentaire conditionnel, cela fonctionne t'il IE la verra t'il bien comme static ?

Le problème étant que non seulement IE6 a besoin de chose en plus, mais que certain paramètre pour les autres navigateurs le font planter lamentablement.... (du coup c'est de là que venait l'idée d'utiliser PHP dans le CSS).

Ensuite, IE est les pourcentages.... c'est n'importe quoi.

J'aimerai donc être sûr que ce sera le dernier paramètre défini (dans un commentaire conditionnel) qui sera pris en compte par IE.

Parce que rendre un CSS le plus "universel" possible c'est pas du gâteau (et c'est pas sur un forum qui s'appelle Alsa que je vous l'apprendrai ), le pire c'est que, malgré certains progrés, IE7 c'est encore un peu du foutage de gueule. Et pour être moins partial, Opera et Firefox ont aussi leur lot de petits trucs agacant, mais on est loin de IE6

Voilà, en tout cas merci pour vos réponses passées et futures...

A+

photonoxx a écrit :
Donc la technique serait de définir en plus du fichier CSS des styles sur la page Xhtml dans l'entête entouré de balise style ?

Il s'agit d'utiliser un commentaire conditionnel dans le head des pages, pour adresser des correctifs CSS pour IE. À toi de voir si tu veux utiliser l'élément style, ou bien l'élément link (feuille de style externe). Tu es libre de mettre ce que tu veux dans le commentaire conditionnel.

photonoxx a écrit :
Si un style est défini avec la position absolute et que je défini ensuite position static (pour revenir à la normale) avec un commentaire conditionnel, cela fonctionne t'il IE la verra t'il bien comme static ?

Si le commentaire conditionnel arrive après l'appel à la feuille de style générale, et que tu utilises le même sélecteur CSS ou bien un sélecteur CSS ayant une priorité plus élevée, oui, ça fonctionnera ainsi. Voir l'article d'Openweb sur la cascade CSS si ça n'est pas clair.

photonoxx a écrit :
mais que certain paramètre pour les autres navigateurs le font planter lamentablement

Pas à ma connaissance. Tu penses à quoi ?

photonoxx a écrit :
IE est les pourcentages.... c'est n'importe quoi.

Faire une utilisation raisonnable (et raisonnée) des pourcentages limite très largement les risques.

Déjà merci pour ta réponse.

Florent V. a écrit :

Si le commentaire conditionnel arrive après l'appel à la feuille de style générale, et que tu utilises le même sélecteur CSS ou bien un sélecteur CSS ayant une priorité plus élevée, oui, ça fonctionnera ainsi. Voir l'article d'Openweb sur la cascade CSS si ça n'est pas clair.

Si si c'est clair !

Florent V. a écrit :

Pas à ma connaissance. Tu penses à quoi ?

A vrai dire j'ai la tête un peu grosse de CSS quand je m'y mets.

Globalement ça va, mais à chaque fois tu découvres des petits trucs qui vont pas trop comme il faut. Du coup les cas qui m'ont semblés bizarres me sont sortis de la tête à force de tatonner et du coup de trouver un bon milieu.

Alors c'est plus un impression que j'ai eu de tant en temps, mais sur le coup je n'ai pas d'exemple précis.

Florent V. a écrit :

Faire une utilisation raisonnable (et raisonnée) des pourcentages limite très largement les risques.

C'est un peu mon cas, mais pour faire un CSS "redimensionnable" à certain endroit ça sert un peu, de plus pour ne pas avoir des paramètre overflow qui s'activent pour rien, sur certain bloc je mets des largeurs de 98% par exemple.

Seulement, IE 6 (pour revenir à lui, quand on ne renseigne pas de dimension (à priori en position absolute mais je ne suis plus sur), considère la dimension comme 100%, le problème c'est qu'on a l'impression que c'est 100% de la taille du bureau et non 100% dela dimension du bloc parent (ni même de body).

photonoxx a écrit :
Seulement, IE 6 (pour revenir à lui, quand on ne renseigne pas de dimension (à priori en position absolute mais je ne suis plus sur), considère la dimension comme 100%, le problème c'est qu'on a l'impression que c'est 100% de la taille du bureau et non 100% dela dimension du bloc parent (ni même de body).

Tous les éléments de type bloc prennent par défaut toute la largeur disponible dans leur bloc parent. S'ils sont positionnés en absolu, par contre, ils prendront la largeur de leur contenu (il me semble), à moins de leur donner une largeur en pixels, pourcentages, etc.

En général, on n'a que très rarement besoin de spécifier des width: 100% (en gros, on le fait uniquement pour des éléments positionnés en absolu... et si on a deux sous de bon sens et qu'on n'est pas trop maso, on évite de positionner plein d'éléments en absolu).

La gestion de ce genre de choses par IE n'est pas particulièrement problématique. Attention peut-être à bien être en mode de rendu standard (utilisation d'un doctype syntaxiquement correct, pas de prologue XML), et à bien gérer le modèle de boite CSS.