Float : le grand bluff ?
Article par Raphael (Stilofoliophile, Strasbourg)
Les feuilles de style CSS version 1 sont nées en 1996. Adaptées à des documents principalement de type textuel, où les éléments sont disposés de façon linéaire, empilés les uns sur les autres (titres, paragraphes, listes), les feuilles de style ne furent pas plébiscitées par les graphistes en quête du design le plus vendeur ou le plus innovant.
Le positionnement des éléments sur la page est un sujet de préoccupation pour les concepteurs web : blocs contigus, positionnements originaux, empilements, grilles et architectures complexes. Au fur et à mesure, ils se sont rabattus sur des mécanismes qui apportaient des réponses concrètes à leurs fantaisies graphiques, que ces éléments soient prévus pour cela ou non : les tableaux de mise en page (balise HTML <table>), les cadres (balise HTML <frame>), le positionnement absolu (introduit dans CSS2) et le flottement (CSS1).
Float, un positionnement ?
La version CSS1 ne prévoit pas de propriétés dédiées au "positionnement" tel que nous l'entendons aujourd'hui (par exemple : deux blocs dimensionnés l'un à côté de l'autre) : la propriété position n'existe pas encore, et la propriété en flux display n'accepte alors que les valeurs block, inline, list-item ou none.
La propriété float apparaît dès CSS1, classée dans les "modèles de mise en forme", tels que inline, block et list-item (un peu comme si l'idée avait été de créer une règle de type display: float).
Définition dans CSS1 (source de la traduction) :
Avec une propriété 'float', un élément sort du flux normal des autres éléments et acquiert un format de type bloc. Par exemple, en donnant la valeur 'left' à la propriété 'float' d'une image, celle-ci est repoussée vers la gauche jusqu'à buter sur les marges, espacements ou bordures d'un autre élément de type bloc. Le flux normal se déroule sur le côté droit de l'image. Ses marges, bordures et espacements sont respectés, cependant les marges ne fusionnent jamais avec celles des éléments adjacents.
Les spécifications initiales ne semblent pas avoir prévu l'usage de cette propriété pour positionner les éléments tel que nous le faisons actuellement (même si rien n'indique que cela soit interdit non plus) : tous les exemples illustrant le flottement désignent des images ou des portions de texte à pousser à droite ou gauche dans un élément.
D'ailleurs, dans la partie dédiée à la propriété float, l'explication suivante illustre son emploi : On utilise le plus souvent 'float' avec des images en ligne, mais on l'applique aussi aux éléments avec du texte.
En voici un exemple proposé par le W3C :
<style type="text/css">
img { float: left }
body, p, img { margin: 2em }
</style>
<body>
<p>
<img src="img.gif">
Some sample text that has no other...
</body>
De plus, la liste de contraintes imposées par le W3C ne facilite pas la chose aux navigateurs.
Détournement de l'usage initial
Le flottement est très vite adopté pour positionner des blocs conteneurs au même titre que le font à cette époque les tableaux de mise en page. D'ailleurs Håkon Wium Lie (co-inventeur de CSS) ne s'en prive pas dans ses pages HTML de tests : By using floating DIV elements, many of the HTML pages now using tables can be simplified and accessibility improved.
A cette même époque, le W3C propose une page illustrant une large batterie de tests autour du "positionnement" flottant : rien qu'en observant ce genre de pages de tests, on est en droit de se dire que "c'est pas gagné" !
La grande illusion ?
Employant float comme un schéma de positionnement hors-flux hybride, les webdesigners détournent finalement cette propriété de son usage premier en vue de disposer des éléments les uns par rapport aux autres, voire de les imbriquer.
Cet usage étendu de float a rendu son implémentation complexe dans les navigateurs : ce type de positionnement est celui qui rencontre le plus de bugs d'affichage connus et recensés (dont les célèbres Float model, Double margin, Escaping floats, Peek-a-boo, Guillotine, Three pixel jog, Multiple opposing floats (bug opera) et quelques bugs sur IE5 Mac) et nécessite de jouer avec des contextes de formatage obscurs pour des débutants (clear - lui-même buggué sur certains navigateurs - , overflow, hasLayout...).
Le modèle global de float est interprété différemment selon chaque navigateur, c'est le moins qu'on puisse dire. Bref, un joli mélange indigeste pour les webdesigners néophytes à qui l'on a rabâché que la mise en page via tableaux était à proscrire.
Où float devient schéma de positionnement
Avec CSS2, les notions sont quelque peu remaniées : la propriété float acquiert un statut de "schema de positionnement", classé au même titre que le positionnement dans le flux et le positionnement absolu.
La propriété display prend elle aussi de l'ampleur et se voit attribuer 17 valeurs possibles, dont inline-block et table-cell, permettant de "positionner" plus finement chaque élément tout en demeurant dans un schéma de flux.
CSS2 propose donc officiellement 3 schémas de positionnement :
-
le flux (propriété
display) -
le flottement (propriété
float) -
le positionnement absolu (
position:absolute)
Tout cela, géré selon des règles assez complexes si l'on cumule les différents schémas.
En résumé
La définition initiale de la propriété float a engendré une période de flottement (hé hé) : de modeste mécanisme d'affichage d'éléments simples, elle passe à schéma de positionnement au même titre que le flux ou le positionnement absolu. float a pris du galon tout en conservant les mesures et contraintes de gestion de flux initialement prévues.
L'idée de cet article n'est pas de proclamer qu'il n'est plus souhaitable (ou qu'il n'a jamais été souhaitable) d'utiliser le positionnement flottant mais de comprendre que ses nombreuses lacunes et sa relative complexité est simplement due à un mécanisme initial qui n'est pas forcément adapté à l'usage qui en est fait actuellement.
Mais je ne peux pas m'empêcher de lancer un petit clin d'œil aux ayatollah anti-tableau de mise en page "parce que c'est pas fait pour ça au départ", même si la comparaison demeure bien trop hâtive avec float.
D'autres solutions ?
Il serait bien malvenu de ma part de discréditer le sympathique positionnement flottant et de conclure en déclarant qu'il n'existe pas d'autres alternatives. En théorie, la réponse est donc "oui". En tout cas, les standards prévoient des solutions propres et adaptées depuis CSS2. Le positionnement dans le flux doit toujours être privilégié puisqu'il demeure le schéma le plus fluide et le plus robuste dans toutes les configurations (agrandissement du texte, modification du contenu, etc.).
Les nouvelles valeurs CSS2 de la propriété display permettent d'afficher et de placer chaque élément exactement tel qu'on le voudrait en modifiant simplement son rendu : inline, block, mais aussi inline-block et table / table-cell (entre autre). Forcément, cela se corse à partir du moment où un navigateur important, Internet Explorer, ne reconnaît pas (ou mal) ces différentes valeurs dans ses versions inférieures à IE8. Si le positionnement flottant, malgré toutes ces contraintes et lacunes, a gagné peu à peu le cœur des intégrateurs web, il y a donc bien une raison empirique.
Tout ce bel article pour être finalement frustré et devoir employer float quand-même ? J'avoue tout : oui, le positionnement flottant a encore de beaux jours devant lui... et les consultants et formateurs en CSS également : grâce aux retards des navigateurs, ils auront longtemps de quoi étayer leurs supports de cours !
À l'heure où CSS3 gagne du terrain, force est de constater que le mode de positionnement le plus employé actuellement date de CSS1 (1996). Pire, il n'a pas été conçu pour cela au départ.
Mais alors, je fais quoi maintenant ?
Cet article ne va pas révolutionner vos habitudes, désolé, mais selon votre niveau de pratique, il est susceptible de vous ouvrir des horizons dans un avenir proche :
- Si vous débutez dans le monde du positionnement CSS, retenez simplement qu'il n'existe pas de solution meilleure qu'une autre. Le positionnement flottant répond à des besoins concrets et il est de mieux en mieux supporté par les navigateurs récents. Il demeure toutefois un schéma plus complexe qu'il n'y paraît au premier abord.
- Si vous êtes plus aguerri voire expert, n'hésitez pas à vous tourner vers d'autres types de positionnements avancés avec la propriété Display (excellent article de Benjamin De Cock), qui méritent le détour à condition de prévoir des alternatives pour les anciens navigateurs.
-
Si vous pensez encore que
les tableaux HTML c'est mal, et les float c'est bien
, c'est votre choix et je le respecte.
jpvincent a dit le
Hé oui, les webdevs se retrouvent encore entre l'enclume (les browsers) et le marteau (les specs), et à devoir faire avec des outils qui marchent aujourd'hui et marcheront encore demain, même si ça n'était pas l'idée initiale des specs.
cela dit, en attendant d'avoir un support uniforme et majoritaire de CSS3 box-model pour positionner ses blocs (mini 5 ans donc ?)
http://webtint.net/tutorials/future-of-css-th...
l'usage du float est tout de même moins evil que les TABLESs :
- pas de sémantique utilisée à mauvais escient, juste une petite souplette de DIVs (qui sémantiquement ne signifie rien)
- poids global + léger, rendu + rapide
- en se débrouillant un peu, même l'ordre dans la source ne dépend pas de la présentation
- séparation + nette (mais pas totale) entre le modèle (HTML) et la vue (CSS)
bref c'est un standard pour le positionnement "de facto" qu'on peut avoir beaucoup moins de remords à utiliser :)