28172 sujets

CSS et mise en forme, CSS3

Min-width sur IE6

Salut,

Stu Nicholls nous démontre qu'il est possible de faire un min-width avec IE6 à cette adresse :
http://www.cssplay.co.uk/boxes/minwidth.html

Cependant, comme la plupart des solutions proposées sur son site pour palier les manques d'IE6 entre autres, cette solution semble assez complexe à mettre en oeuvre et peut vite trouver ses limites dans le cas d'une maintenance de code par exemple.
Pour ma part, si les exemples de Stu Nicholls sont de parfaites prouesses CSS, ils ne conviennent pas dans le cas d'utilisation en environnement de production.

Donc, à l'instar de l'article de Florent V concernant les boites fluides avec bordures et coins en images qui dit que l'on peut utiliser les tableaux de mise en forme dans certains cas bien précis, il me semble que l'on peut aussi se simplifier la vie pour émuler le min-width sur IE6 en utilisant une technique un peu ancestrale et pas forcément non plus recommandable : le spacer.gif.

Pour vous donner un exemple fonctionnel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Min-width</title>
   <style type="text/css">
   #min-width {
     min-width : 300px;
     background : red;
     float : left;
     height : 500px;
   }
   </style>
</head>
<body>

<div id="min-width">
   <!--[if lte IE 6]>
   <img src="spacer.gif" width="300" height="1" style="display:block" />
   <![endif]-->
   <p>Ici plein de texte</p>
</div>

</body>
</html>


Que pensez-vous de ce genre de méthode ?
Salut,

J'ai plusieurs remarques concernant cette méthode :

- Tu dis toi-même
a écrit :
Notons dès maintenant que l'utilisation des expressions CSS est déconseillée, car elle a un impact sur les performances
, ce qui n'est pas négligeable.
- Utilisation d'un code Javascript.

Ces deux remarques, à mon avis, valent bien le fait d'utiliser une image (aucun script nécessaire et performances accrues (juste un appel en HTTP)).

Une autre remarque par rapport au contenu de ton astuce :

a écrit :
Voici à titre informatif un exemple d'utilisation des expressions CSS. Il s'agit ici d'émuler min-width pour le conteneur principal de la page:

or le code donné juste après concerne l'émulation d'un max-width sur le body et non un min-width.

Pour un min-width sur un div #global par exemple, on pourrait utiliser :

#global {
   width : expression( this.offsetWidth <= 600 ? "600px": "auto" );
}

Sachant en plus que le code proposé pour le max-width n'a pas le comportement par défaut de celui-ci sur les autres navigateurs. En effet, si on en croit le commentaire (qui est tout à fait juste par rapport au comportement annoncé) :

/* Si la largeur de BODY est supérieure à 1000px,
la ramener à 1000px. Sinon, la laisser à "auto". */

Or il ne faut pas affecter les 1000px par rapport à la largeur du body, mais par rapport au contenu de ce div en fonction de la largeur du body. Donc pour obtenir le comportement réel, il faudrait modifier le code comme tel :

#global {
   width : expression( this.offsetWidth >= 1000 && document.body.clientWidth < 1000 ? "auto": this.offsetWidth >= 1000 ? "1000px" : "auto" )
}

Modifié par Agylus (28 Apr 2009 - 12:44)
Administrateur
Agylus a écrit :

Or il ne faut pas affecter les 1000px par rapport à la largeur du body, mais par rapport au contenu de ce div en fonction de la largeur du body.

Hello,

As-tu testé ? En quoi cela te gêne d'affecter la largeur du boy par rapport au viewport ?
Moi ça me semble assez logique ainsi.
Agylus a écrit :
palier les manques d'IE6

Faut-il palier les manques d'IE6 pour les choses non critiques voire discrètes? S'il ne supporte pas la technologie utilisée, il ne la supporte pas, voilà tout, et fonctionner avec un peu d'amélioration progressive (ou dégradation gracieuse) peut être tout à fait pertinent. Notamment, dans beaucoup de cas, ça simplifie la mise en place et la maintenance, et donc réduit les couts initiaux et les problèmes de support.

Agylus a écrit :
Pour ma part, si les exemples de Stu Nicholls sont de parfaites prouesses CSS, ils ne conviennent pas dans le cas d'utilisation en environnement de production.

Parfaitement d'accord. Il y a sans doute certains exemples de Stu Nicholls utilisable en production, mais je dirais que ce n'est pas la majorité.

Agylus a écrit :
émuler le min-width sur IE6 en utilisant une technique un peu ancestrale et pas forcément non plus recommandable : le spacer.gif.

Je propose plutôt:
<span class="ie6-spacer"></span>

#monbloc .ie6-spacer {
display: block;
width: 200px; /* La largeur minimale */
height: 0;
}
Pas testé, mais je pense que ça devrait marcher.

Pourquoi s'encombrer d'une requête HTTP (que ça télécharge un fichier spacer.gif ou renvoie une erreur 404...) si on peut éviter?

Agylus a écrit :
Que pensez-vous de ce genre de méthode ?

Intéressant sur le principe, dommage pour la requête HTTP inutile et le fait que la largeur est définie dans le HTML plutôt que dans le CSS.

Agylus a écrit :
Tu dis toi-même «Notons dès maintenant que l'utilisation des expressions CSS est déconseillée, car elle a un impact sur les performances», ce qui n'est pas négligeable.

En fait dans ce cas précis c'est moi qui le dis. Ma mémoire est mauvaise mais vu le style de la phrase, je pense que ça ne fait aucun doute. Smiley lol
Salut,

Raphael a écrit :
As-tu testé ? En quoi cela te gêne d'affecter la largeur du boy par rapport au viewport ?
Moi ça me semble assez logique ainsi.

J'ai effectivement testé ce code, qui concerne le max-width.
En rajoutant un float:left sur le code donné dans l'article, on se rend compte que pour IE6, l'élément #global en question va toujours avoir une largeur de 1000px si le body dépasse les 1000px de large, alors qu"il est censé avoir une largeur auto quand il ne contient pas beaucoup de texte pouvant dépasser la largeur des 1000px définis. (Je sais pas si j'arrive à me faire comprendre, c'est pas facile à expliquer Smiley biggol )

Florent V. a écrit :
Faut-il palier les manques d'IE6 pour les choses non critiques voire discrètes? S'il ne supporte pas la technologie utilisée, il ne la supporte pas, voilà tout, et fonctionner avec un peu d'amélioration progressive (ou dégradation gracieuse) peut être tout à fait pertinent. Notamment, dans beaucoup de cas, ça simplifie la mise en place et la maintenance, et donc réduit les couts initiaux et les problèmes de support.

Malheureusement, dans certains cas (bizarrement professionnels, quand un patron veut qu'un site fonctionne à l'identique sur tous les navigateurs courants Smiley lol ), il faut trouver des solutions pour émuler certains comportements non gérés par IE6.

Florent V. a écrit :
Je propose plutôt:
<span class="ie6-spacer"></span>

#monbloc .ie6-spacer {
display: block;
width: 200px; /* La largeur minimale */
height: 0;
}
Pas testé, mais je pense que ça devrait marcher.

Au poil, à l'exception près qu'il faut rajouter un overflow:hidden sinon IE6 alloue automatiquement l'espace nécessaire à une ligne de texte dans le span.

Florent V. a écrit :
Pourquoi s'encombrer d'une requête HTTP (que ça télécharge un fichier spacer.gif ou renvoie une erreur 404...) si on peut éviter?

A vrai dire, dans le cas présenté le fichier était présent (je trouvais quand même ridicule de polluer les logs Apache d'erreurs 404 pour ça), mais s'encombrer de la requête HTTP semblait beaucoup moins gourmand en ressources qu'une expression.
Sujet clos
Aller à