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.
Commentaires
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 :)
On dirait qu'au début du web, les écrans étaient tellement étroits que personne n'a jamais vu l'utilité d'une mise en page en colonnes.
@jpvincent : tu as raison, j'aurais d'ailleurs pu conclure en précisant concrètement pourquoi float était quand-même mieux que table, mais je trouvais que c'était déjà un bien long article.
@cedb3 : ouaip, et comme l'histoire est cyclique, on y revient avec les smartphones et les netbooks ;)
@cedb3 : Tu m'étonnes ! ^^ Tu t'imagines surfer ou concevoir un site sur un écran cathodique 14 ou 15 pouces d'une résolution de 640x480 ? :p
J'ai un peu connu cette époque, choc garanti ! ;)
Sinon, bah… Il est vrai qu'on a "un peu" détourné float de son usage initial et qu'on continue encore à l'utiliser aujourd'hui, et ce malgré les possibilités de CSS2 en positionnement, mais avait-on vraiment le choix ?
C'est la seule méthode qui permettait (et permet encore, moyennant quelques correctifs pour les dinosaures) de faire les designs qu'on voit partout, du moins pour l'instant ;)
Vivement qu'on puisse utiliser les 17 valeurs de display comme il faut partout et aussi les possibilités du module CSS3 "Template Layout" ! (oui, je sais, on a le droit de rêver…)
Merci pour cet excellent article, j'étais dans l'élaboration d'un design web, et je me suis retrouvé à utiliser tellement de flottant qu'à un moment je me demandais qui il n y avais pas une autres alternative aux flottant j'ai cherché dans plusieurs balises html et je me suis aperçu que le float été irremplaçable, et c'est ce que je viens de confirmer avec ton article. je tiens quant même à signaler que sous IE7 quand on appliquer une valeur fixe à width, ça règle souvent des bugs d'affichage.
@amintheone : "je tiens quant même à signaler que sous IE7 quand on appliquer une valeur fixe à width, ça règle souvent des bugs d'affichage."
--> oui puisque width confère le Layout à l'élément et corrige par ce biais de nombreux problèmes de rendus (flottants ou non)
J'ai fait un rêve: Le inline-block compatible avec IE7. J'oublie IE6 car dans mon rêve, il n'apparaît pas.
@alexhochart : inline-block est compatible avec IE7 (et IE6 d'ailleurs).
@alexhochart : voir http://covertprestige.info/css/inline-block/
@Raphael & @Heyoan: C'est assez confus car appliqué à un div le display:inline-block ne se comporte pas de la même manière sous IE7 que sous IE8, FF, Chrome, etc. Sous IE7, mes paragraphes insérés dans mes div sont affichés les uns en-dessous des autres, alors qu'ailleurs, l'affichage se fait sur la même ligne (ce que je souhaite). Voir http://www.uxdesign.fr/inline_block.html
Merci.
@alexhochart : euh... ben forcément puisque tu n'utilises aucunes des astuces mentionnées dans l'article dont j'ai donné le lien ci-dessus :-/
@Heyoan : Super ton astuce! Ça fonctionne impeccable: http://www.uxdesign.fr/inline_block.html
Merci beaucoup.
@alexhochart : oui. Par contre, tu te doutes qu'il vaut mieux éviter les hacks tels que "*display" au profit de méthodes plus robustes telles que des commentaires conditionnels pour IE :)
@Raphael : C'est bien noté. Merci et bravo pour la qualité de tes posts.
@Heyoan : Rooh... J'étais persuadé qu'il était impossible d'utiliser inline-block dans IE6 et 7 !
Merci !
Merci pour tous ces commentaires précieux !
En revanche j'ai tendance à avoir la curiosité de suivre certains liens fournis pour approfondir les sujets et celui sur l'article de Benjamin De Cock ne mène qu'à un site sans possibilité de lire le moindre article... est-ce voulu ?
Merci pour ce billet.
Sans le vouloir vous m'avez beaucoup éclairé sur la mise en page CSS (surtout avec votre demi tonnes de liens ^^).
@Skoua : de rien vu que c'est Florent qui a fait tout le boulot :D
Merci pour cette article enrichissant ! Oui les liens sont très précieux, parfois un peu pointus (même en étant pro) quand on essaye de suivre de prêt les avancées du web qui vont a une vitesse déconcertante. Je trouve, qu'il faudrait lever le pied pour avoir des normes ou standards et prendre le temps d'utiliser et d'arrêter de vouloir sans arrêt évoluer !!
Pour revenir aux inline-block, c'était avec les vieilles versions de Firefox (avant la 3.0) que la propriété n'était pas compatible, mais il existait un hack propre à ces versions pour faire supporter une propriété similaire.
@IshimaruChiaki : oui, moz-inline-stack. C'est d'ailleurs bien expliqué dans le lien donné par Heyoan (article de Florent V.)
La propriété display:inline-block est très utile mais elle cause un petit problème, c'est qu'il ajoute des espaces entre les éléments, par exemple si on applique la propriété à 2 span ( positionné côte à côte ) , on constate qu'il y'a une ptit espace entre ces 2 éléments !
Une idée pourquoi ce comportement ?
@integrateurweb2 : oui, c'est le fameux "whitespace" généré par ton caractère "retour chariot" dans ton code HTML.
http://doctype.com/csss-inlineblock-white-spa...
Merci pour le lien :), la propriété est géniale mais c'est bien dommage qu'il reste incomplet et qu'on doit recour à ajouter des Coms <!-- --... , partout pour régler ce prob :((
@integrateurweb2 : le problème de l'espace n'a rien à voir avec inline-block et tu peux le retrouver dans d'autres situations. Il est dû à un des défauts de SGML/XML/HTML, celui de ne pas faire la différence entre indentation et contenu.
Je n'ai qu'un commentaire : Merci ! Ces dossiers sont tous très intéressants !
Merci pour ce dossier complet. Pour ma part suite à des heures de galère avec des problèmes de positionnement, j'ai opté pour les feuilels de style de Yahoo, YUI Base, YUI Reset et YUI Grids, qui m'évitent de réinventer la roue à chaque fois.
un article sur une des alternatives officielles, en CSS3 : flexible box model
http://hacks.mozilla.org/2010/04/the-css-3-fl...
@allogarage : yala pour YUI grids, très pratique surtout avec le générateur de grille en ligne qu'ils proposent. Cependant il ne prend pas en compte les nouvelles balises HTML5, j'ai du faire un fork du css pour enlever toute référence à DIV