Spacer : le retour à la préhistoire

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

Les Spacers sont morts... vive les Spacers !

La propriété clear permet de contrôler le flux autour des éléments flottants. Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente.

La valeur la plus couramment admise est both. La boîte se déplace alors sous chacune des boîtes flottantes. En clair : ne pouvant se placer à côté du ou des blocs flottants, il se place décalé en dessous de ceux-ci.

L'utilisation de clear est devenue fréquente, du fait que le positionnement flottant présente un problème de débordement.

Mark Newhouse [en] a proposé une solution actuellement largement utilisée : celle du spacer. Elle consiste à inclure dans la boîte verte un élément bloc au contenu fictif (l'espace insécable nbsp;), doté de la propriété clear qui lui interdit d'être adjacent à une boîte flottante.

Par la suite, on a reconnu que l'emploi d'un bloc vide, uniquement avec un espace insécable relevait de la bidouille grossière... même si elle est nécéssaire.

On s'est donc penché à diversifier les solutions, tel qu'employer la balise HR plutôt qu'un bloc DIV vide.

Dans tous les cas, cela induit l'utilisation de DIV "spacer" ou de HR "spacer" utilisant la propriété clear : both, à des endroits où ce DIV ou ce HR n'ont par forcément lieu d'exister à part celui de pallier à un bug (?).

Personnellement, ce genre de bidouille me fait penser aux horribles spacer.gif à l'époque, les fameuses images gif transparentes destinées à "caler" les éléments et qu'on collait partout dans le code... si si, je suis sûr que vous vous en souvenez : vos éditeurs WYSIWIG s'en servent encore !

Sans vouloir troller inutilement (quoique ça fait du bien parfois), si on doit utiliser des spacers pour faire des mises en pages CSS, je crois qu'il y a un problème quelque part dans le fond, non ?

Par Raphael GOETTER - jeudi 10 juin 2004 à 20:18

Blabla - #24 - Lu 9223 fois - Intérêt du billet: 1.33(6) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le jeudi 10 juin 2004 à 20:35, par mebon :: #

La propriété clear-after résoudra le problème non ? Y'a plus qu'à attendre les css3 alors...

Le jeudi 10 juin 2004 à 20:44, par Raphael Goetter :: site :: #

"La propriété clear-after résoudra le problème non ? Y'a plus qu'à attendre les css3 alors..."
>> ... oui on dirait : www.cs.hmc.edu/~mbrubeck/...
Mais il faudrait que IE implémente complètement le CSS2 d'abord

Le jeudi 10 juin 2004 à 20:52, par mebon :: #

Bah oui, c'est pour ça va falloir attendre ^^
Pour ceux que ça intéresse, la future recommandation officielle sur le sujet : www.w3.org/TR/2002/WD-css...

Le jeudi 10 juin 2004 à 22:21, par Fabrice Bonny :: site :: #

Il faudrait d'abord que MSIE implémente complètement HTML4. :-p

Le jeudi 10 juin 2004 à 22:27, par Raphael Goetter :: site :: #

Fabrice : rôôô :D

Le vendredi 11 juin 2004 à 04:38, par Laurent Denis :: site :: #

Ajouter des spacer dénués de sens et mettre des <hr /> n'importe où est effectivement idiot.

Mais il y a beaucoup de situations où les <hr /> sont tout à fait pertinents : quand un contenu principal est en float et qu'il est suivi du menu, par exemple, ou même comme séparateur après une série de vignettes flottantes...

En fait, le "bon" spacer n'est qu'une propriété CSS appliquée à un élément (hr ou autre) déjà présent naturellement dans la page.

Le vendredi 11 juin 2004 à 08:54, par Fred C. :: site :: #

Oui, rajouter un Div avec un espace insécable est un peu idiot et sémantiquement pas très correct. Avec les naviguateurs récents, pas la peine, par contre cette bidouille est indispensable avec des naviguateurs en "voie de vieillisement" comme IE 5.0. Donc voici ma conclusion : à naviguateurs préhistoriques, techniques préhistoriques...

Le vendredi 11 juin 2004 à 10:48, par Eric Daspet :: site :: #

Il est clair que ça reste de la bidouille mais en même temps quand on veut casser les boites flottantes c'est qu'on a une séparation claire entre deux contenus, le <hr> n'est pas forcément totalement hors de question (même si effectivement on ne l'aurait pas mis si on n'y était pas obligé).

Le vendredi 11 juin 2004 à 12:19, par Laurent Denis :: site :: #

Avec ou sans spacer, <hr> devrait (peut-être) être plus employé, en fait : on oublie souvent qu'il améliore beaucoup la lisibilité dans les navigateurs textes.

Le vendredi 11 juin 2004 à 12:26, par Felipe :: site :: #

Je débute en CSS et mes bourdes de conception collectées sur le Net ou autre "comment qu'on fait ça"/"Raphaël à l'aide" t'inspirent déjà un second article ^^
Tu pourrais me citer :o

Le lundi 14 juin 2004 à 12:03, par lightdawn :: site :: #

Bonjour à tous.
Je suis d'accord avec Laurent Denis. Les <hr />, dans des navigateurs comme Lynx, améliorent grandement la lisibilité. Cela permet en un coup d'oeil de bien visualiser chaque rubrique. Il serait dommage de s'en priver en attendant mieux.

Le mardi 15 juin 2004 à 10:28, par fastclemmy :: site :: #

Une solution (nécessitant certes des hacks pour IE) existe pourtant :
www.positioniseverything....

Le mercredi 18 août 2004 à 11:03, par kurt :: #

Cet article fait le blame des spacers, chose que je comprend bien, mais on doit quand même les utiliser jusqu'à ce que l'on puisse faire mieux...
Qu'attend Microsoft et les autres pour implémenter les dernières nouveautés ? c'es si dur que ça ? Cela ne devrait-il pas évoluer en temps réél ? Franchement, je ne les comprend pas.

Le mercredi 18 août 2004 à 11:27, par Laurent Denis :: #

"Cet article fait le blame des spacers, chose que je comprend bien, mais on doit quand même les utiliser jusqu'à ce que l'on puisse faire mieux..."

Tout à fait. Disons juste sans abuser à plaisir, tout de même

Le dimanche 22 août 2004 à 20:50, par daitheflu :: #

J'aimerais réagir à ce que dit Raphaël dans l'article :
"si on doit utiliser des spacers pour faire des mises en pages CSS, je crois qu'il y a un problème quelque part dans le fond, non ?"
J'intreprète peut-être mal ta phrase, mais dans certains cas, son utilisation est tout de même indispensable, non ? Ou existe-t-il un moyen de palier à ce "défaut" plus simplement ?

Enfin j'ai pu constater que l'utilisation des spacers ne semble pas être gérée correctement sous IE (difficultés d'affichage des éléments au dessus du spacer par exemple...). Je ne suis pas un fan d'IE, loin de là, mais beaucoup de gens l'utilisent toujours, existe-t-il un moyen de palier à ce défaut dans IE ?

J'ai mis un exemple de page (sur laquelle je travaille actuellement) qui plante sous IE alors que sous Firefox tout va bien. Si quelqu'un a une idée je suis preneur
daitheflu.phpnet.org/gite...

Le lundi 23 août 2004 à 01:25, par daitheflu :: #

Bon en cherchant un peu (beaucoup) j'ai trouvé une solution pour corriger le bug de IE, c'est dispo ici : qsdqsd.free.fr/Articles/M...
je me suis dit que ça pourrait peut-être servir

Sinon ma première question tient toujours et je serai curieux/heureux de voir si quelqu'un peut vérifier que ma page est correctement contruite ou non

Le lundi 23 août 2004 à 19:57, par Laurent Denis :: #

@daitheflu > Pour les curieux, une solution de spacer pur CSS, sans HTML : www.positioniseverything....
Enfin, pur CSS... il faut un doigt de javascript pour IE5 Mac