Les flottants sont l’un des outils les plus fondamentaux pour structurer une page Web à l’aide de CSS. Ce sont l'une des toutes premières choses que nous apprenons et une des dernières choses que nous maîtrisons vraiment.
L'article d'aujourd'hui examine certaines des raisons pour lesquelles les flottants sont assez boiteux et examine un certain nombre de systèmes de présentation alternatifs, dont certains sont encore en développement, mais pourraient un jour représenter la norme pour une présentation basée sur CSS.
Un conte de tables
Il était une fois, les concepteurs Web utilisaient des tableaux HTML pour réaliser des mises en page complexes. Même s’il s’agissait d’un processus complexe et non sémantique, il s’est efforcé de tirer le meilleur parti de la technologie disponible pour créer de meilleurs modèles.
Pour les débutants, quand je dis "non sémantique"? Je veux dire que la mise en page basée sur la table est une bâtarde de l'élément table. Il est destiné à contenir des tableaux d'informations dans une page, et non à servir de structure à la page elle-même.
Flotteurs: les nouvelles tables?
Aujourd'hui, nous nous moquons de cette pratique. Quelle façon idiote de créer un site Web! CSS est venu à notre secours et nous a fourni plusieurs outils pour créer des mises en page beaucoup plus sémantiques qui permettent de réaliser facilement tout ce qui a été créé avec une table.
Aujourd'hui, l'un des principaux moyens par lesquels nous avons remplacé nos méthodes dépendantes des tableaux est l'utilisation de flottants pour la présentation. Par défaut, les éléments HTML séquentiels apparaîtront empilés verticalement. Les flotteurs nous permettent d’aligner des éléments horizontalement. Flottez une liste d’éléments à gauche et vous aurez un joli petit menu de navigation horizontal.
Bien que beaucoup d’entre nous se soient simplement habitués à les utiliser, les flotteurs sont loin d’être parfaits. Ils sont maladroits, buggy et difficile à apprendre. Si vous repensez à vos débuts dans la mise en page basée sur CSS, vous avez sans doute eu le courage de vous casser la tête et de faire du dépannage pendant des heures.
Le pansement Clearfix
Le fléau des agencements à base de flotteurs (mis à part les cauchemars de la marge d'IE6) est bien sûr le fait qu'ils ne jouent tout simplement pas bien avec leurs éléments de conteneur. Pour que l'élément parent apparaisse comme s'il contenait des éléments flottants, nous insérons généralement un dernier élément effacé dans le conteneur en utilisant "clear: both".
Créer un conteneur vide pour pirater une mise en page brisée est-il une bonne pratique? Probablement pas. Est-ce que ça marche? Tu paries.
Un meilleur Clearfix
Les penseurs de l'avenir ont décidé que cette entreprise d'ajouter du balisage HTML n'est pas bonne. Le moyen actuellement préféré pour effacer un float consiste à insérer le nouvel élément à l'aide du CSS?: After? pseudo classe.
Encore une fois, cela est acceptable en raison de notre habitude de jouer avec les flotteurs pour les plier à notre volonté. Cependant, essayez de prendre du recul et de regarder vraiment ce qui se passe ici. Ceci est un gâchis! Nous utilisons CSS pour insérer un élément invisible dans le code HTML afin que nos problèmes de présentation disparaissent comme par magie lorsque nous tremblons à l'idée d'utiliser des présentations basées sur des tables car elles ne sont pas sémantiques.
Je ne défends pas une mise en page basée sur une table, elle est morte et doit rester ainsi, mais je ne peux pas m'empêcher de me demander si les futurs concepteurs Web vont se moquer de notre utilisation des flotteurs comme nous le faisons maintenant à la pensée d'un Web. page construite sur une table.
L'avenir
Vous devez admettre que, si vous y réfléchissez vraiment, les flottants sont un moyen assez compliqué de gérer la mise en page. Je ne vois pas les flotteurs disparaître complètement de si tôt, ils seront probablement utiles même si nous acceptons tous un nouveau processus de mise en page.
Cependant, il existe plusieurs outils de mise en page intéressants à l’horizon qui pourraient très bien remplacer les flottants comme moyen principal de structurer les pages Web. Jetons un coup d'œil à certaines de ces idées et constructions et voyons si nous pouvons avoir un aperçu de l'avenir de la mise en page CSS.
Bloc en ligne
Avant de plonger dans les techniques de mise en page expérimentales futuristes, il est utile de discuter bloc en ligne comme une alternative intéressante aux mises en page à base flottante. Considérez l'extrait ci-dessous:
Cela fera apparaître nos éléments de liste en ligne tout en conservant leurs attributs de bloc, ce qui est vraiment incroyable! Nous obtenons le meilleur des deux mondes.
Chutes de Inline-Block
Andrew Tetlaw de Sitepoint a récemment publié un article fantastique qui fait l'éloge de l'utilisation de bloc en ligne sur des flotteurs. Il souligne à juste titre que cette méthode fonctionne efficacement sur tous les navigateurs modernes, y compris IE8 et les versions ultérieures, ce qui correspond à peu près à ce que vous pouvez attendre du clearfix dirigé par la pseudo-classe.
Malheureusement, comme le souligne Robert Nyman dans un article similaire, cette méthode n’est pas sans problèmes.
En plus des problèmes liés à IE (il a un bidouillage astucieux à obtenir du support dans IE7), Nyman montre en utilisant bloc en ligne rend votre mise en page dépendant quelque peu des espaces quand il s'agit de votre code HTML. L'exemple qu'il utilise est la liste non ordonnée suivante:
Croyez-le ou non, les retours à la ligne provoquent automatiquement l'ajout d'une légère marge à la liste! La seule façon de résoudre ce problème est de les placer sur la même ligne:
Certes, c'est une solution assez simple, mais si vous êtes un fan de code bien organisé, cela peut vous faire grincer des dents. Dans l’ensemble, comparé aux problèmes auxquels nous sommes confrontés lors de l’utilisation de floats, Tetlaw estime qu’il s’agit peut-être d’une meilleure solution que vous pouvez réellement utiliser maintenant avec une prise en charge acceptable du navigateur.
Flexbox
L'une des nouvelles façons dont CSS3 modifie les pratiques de mise en page consiste à utiliser le module Flexible Box, ou Flexbox. Voici une citation de l'abrégé Flexbox w3.
[Flexbox] fournit un système de présentation supplémentaire aux côtés de ceux déjà en CSS. [CSS21] Dans ce nouveau modèle de boîte, les enfants d'une boîte sont disposés horizontalement ou verticalement, et les espaces inutilisés peuvent être attribués à un enfant particulier ou répartis entre les enfants par cession de? Flex?? aux enfants qui devraient se développer. L'imbrication de ces boîtes (horizontale à l'intérieur verticale ou verticale à l'intérieur horizontal) peut être utilisée pour créer des mises en page en deux dimensions.
Flexbox représente une manière complètement nouvelle de mettre en page des sites Web. Vous en avez peut-être entendu parler récemment, mais la syntaxe est en train de changer un peu alors assurez-vous de garder un œil sur les spécifications de travail pour rester à jour (dans la plupart des cas, je pense que la case changera en «flex» ou «flexbox» . La syntaxe CSS de travail actuelle pour l’application de flexbox est la suivante:
Pour voir comment cela fonctionne, passons directement à un exemple. Fondamentalement, une fois que vous appliquez affichage: boîte En ce qui concerne l'élément parent, les enfants peuvent être automatiquement redistribués en fonction d'un simple dimensionnement relatif.
Imaginez que nous ayons trois balises de paragraphe (elles serviront de colonnes) dans un conteneur parent avec affichage: boîte appliquée et nous voulons que la colonne du milieu soit deux fois plus large que les deux autres. Voici ce que nous faisons:
Avec ce peu de code (plus un style visuel superflu), nous pouvons obtenir le résultat suivant.
Notez que la valeur par défaut est? 0? pour box-flex. Changer la deuxième case en? 2? déclenché la commande pour remplir la largeur tout en rendant la deuxième boîte plus large que les deux autres. Considérons quelques exemples supplémentaires afin que vous puissiez vraiment avoir une idée de la façon dont cela fonctionne.
Comme vous pouvez le constater, Flexbox a des conséquences dramatiques sur la manière dont nous structurons les sites Web avec CSS. Non seulement cela a le potentiel de résoudre les problèmes associés aux flottants, mais cela rend la mise en page multi-colonnes basée sur une grille infiniment plus facile!
Creuser plus profondément
Cet article se veut simplement une introduction aux nouvelles méthodes de mise en page et n’est en aucun cas exhaustif. J'ai à peine effleuré la surface de ce que Flexbox peut faire. Par exemple, vous pouvez réaliser la même chose que ci-dessus avec des éléments empilés verticalement et réorganiser complètement les blocs en utilisant uniquement du CSS.
Pour en savoir plus sur ce qui peut être fait avec Flexbox, je très vous recommandons de jouer avec Flexie, le Flexbox Playground. Cela vous donnera une expérience pratique du nouveau système de présentation et vous permettra d'essayer chaque paramètre pour avoir une idée du résultat.
Le module de disposition de modèle
Une autre idée proposée pour la disposition CSS est le module de disposition de modèle. Voici une citation de la spécification officielle.
Les propriétés de cette spécification fonctionnent en associant une politique de présentation à un élément. Plutôt que de laisser un élément disposer ses descendants dans leur ordre normal sous forme de texte incorporé ou de blocs de texte (règles disponibles dans le niveau CSS 1), la règle définie dans ce module, appelée positionnement par modèle, donne à un élément une grille invisible. pour aligner les éléments descendants.
Le module de présentation de modèle utilise une syntaxe originale mais simple qui facilite grandement la présentation. La première chose à faire est de créer un conteneur avec des éléments enfants. Pour chaque élément enfant, vous affectez une lettre arbitraire (peu importe la lettre, assurez-vous qu'elle est unique).
Ensuite, vous appliquez une valeur d'affichage à l'élément parent en utilisant ces lettres pour définir vos proportions. Par exemple, pour créer trois colonnes égales, tapez-les simplement dans une ligne:
Cela vous donnera le résultat suivant:
Si vous souhaitez réorganiser les boîtes, réorganisez simplement les lettres dans votre code CSS. Au lieu de taper? Abc ?, essayez de taper? Bca ?.
Pour créer une nouvelle ligne, créez un nouveau jeu de guillemets. Vous pouvez répéter des lettres pour définir un sens des proportions. Par exemple, ici nous définissons la première ligne à? Ab? et le second à? cc ?, ce qui signifie? c? sera deux fois la largeur de? a? ou? b ?.
Chaque section (a, b, c) est appelée "emplacement". Pour créer un emplacement vide, utilisez simplement un point:? A.b.c? créera deux emplacements vides dans notre rangée. Pour cibler un logement pour un style supplémentaire, vous utilisez le pseudo-élément de logement:
Creuser plus profondément
Comme dans l'exemple précédent, vous pouvez faire beaucoup plus, par exemple définir des hauteurs et des largeurs à l'aide de dimensions ou de pourcentages précis. Pour l'instant, aucun navigateur n'est prêt à l'emploi, mais vous pouvez installer un plugin jQuery pour le tester! Consultez les pages de démonstration du plugin pour trouver des exemples codés impressionnants sur la création de la mise en page de votre choix à l'aide du module de mise en page de modèles.
Retour aux tableaux?
L'article d'Andrew Tetlaw Sitepoint que j'ai mentionné précédemment présente une option plus intéressante pour la mise en page.
Chose intéressante, régler l'affichage? propriété à? table? nous permet de structurer notre mise en page comme s'il s'agissait de tables. Tout de suite, je sais que cela va faire peur à beaucoup de gens. Revenir à la mise en page basée sur la table!? Es tu fou? La partie folle est que c’est en fait une pratique complètement différente de celle qui utilise littéralement un élément de table. Ici, vous dites simplement au CSS de positionner des éléments De même comment les cellules et les lignes du tableau sont positionnées.
Personnellement, j'aime toujours les nouvelles méthodes CSS3 sophistiquées que nous venons de décrire beaucoup mieux et que nous avons du mal à imaginer cette acceptation généralisée, mais cela vaut la peine de vérifier et de discuter. Si cela vous intéresse, assurez-vous de consulter l'explication de Tetlaw.
Conclusion
Le but de cet article était de vous faire réfléchir sur le fait que les flottants ne constituent pas nécessairement le meilleur moyen de structurer des sites Web. Bien qu’elles constituent l’une des meilleures solutions que nous puissions actuellement utiliser dans des projets clients réels, elles représentent un système assez bâclé et défaillant, loin d’être idéal.
Il existe un certain nombre de moyens de remédier aux inconvénients des flottants. Pour l'instant, vous pouvez vérifier? Display: inline-block? comme une option ou même regarder dans? display: table? si vous êtes particulièrement courageux.
Les assistants qui font fonctionner toute cette technologie reconnaissent que le système est en panne et travaillent d'arrache-pied pour résoudre les problèmes posés par les modules de présentation susceptibles de s'avérer extrêmement utiles à l'avenir. Attendez-vous à en savoir plus sur les modules Flexbox et Template Layout à l'avenir. Qui sait, l’un ou les deux pourraient constituer le moyen standard utilisé par les futurs développeurs pour créer des mises en page Web!
Laissez un commentaire et faites-nous savoir ce que vous en pensez. Pensez-vous que les flottants représentent un système de mise en page défectueux? Les modules de présentation proposés vous semblent-ils une solution solide à ces problèmes?