Le secret de la conception de mises en page de site Web sans flotteurs CSS

Si vous avez conçu pour le Web au cours de la dernière décennie, vous êtes sans aucun doute familier avec la propriété CSS float . Étant donné que l'industrie (heureusement) a adopté le principe des mises en page sans tablettes, les flotteurs ont été l'arme de choix que la plupart d'entre nous utilisent pour présenter nos pages Web, mais est-ce le meilleur choix?

Malgré la popularité de cette méthode, elle est régulièrement la cause de la frustration et de la confusion pour les nouveaux concepteurs et devient un problème lorsque les éléments flottants sont laissés "non clarifiés". Ces flotteurs non dégagés peuvent causer de multiples problèmes allant de l’esthétique négligée à l’inaccessibilité totale. Avec un petit projet, il est assez simple de résoudre un problème de flottement, mais lorsque vous travaillez sur une grande application Web avec un contenu dynamique, il peut être un peu plus compliqué, consommer un temps précieux et vous coûter de l'argent.

Une meilleure alternative

Même utilisés correctement, les flotteurs changent la écoulement normal d'un document qui peut provoquer un comportement inattendu et limiter les options de style. Étant donné qu'un flottant ne se trouve pas dans le «flux normal», les blocs de bloc non positionnés créés avant et après le flotteur circulent verticalement comme si le flottant n'existait pas. Avec un design réactif, où les tailles sont dynamiques et circulent pour remplir l'espace disponible, c'est loin d'être idéal. Et s'il y avait une meilleure façon?

Flexbox C’est l’avenir passionnant des mises en page Web, mais pour ceux d’entre nous qui doivent prendre en charge les anciens navigateurs, c’est encore un rêve lointain. La propriété d' affichage , par contre, a un support complet et peut fournir presque toutes les fonctionnalités de mise en page d'un flottant sans les inconvénients.

inline-block à la rescousse

La propriété d' affichage , en combinaison avec float et position , détermine le type de boîte ou de boîte générée pour un élément. En un mot très simple, les éléments de niveau bloc couvrent toute la largeur de leur conteneur, forçant tous les éléments suivants à la ligne suivante, tandis que les éléments de niveau en ligne ne couvrent que la largeur de leur contenu. ligne.

Application display: inline-block à un élément génère un conteneur de bloc au niveau inline. Pensez au texte à l'intérieur d'une balise. Ils sont tous en ligne les uns avec les autres alors que le tag lui-même est un conteneur de niveau bloc. En comprenant ce comportement, nous pouvons utiliser la propriété display pour intégrer nos contenus les uns à côté des autres. Comme tous nos éléments restent dans le flux normal, nous n'avons aucun problème avec un élément parent réduit. À mon avis, cette solution est beaucoup plus propre et permet d’obtenir le résultat souhaité.

Voir le stylo Inline-block over floats par davidicus sur CodePen.

La technique

Cette méthode fonctionne à peu près partout où vous appliquez normalement le flottant. Jetons un coup d'oeil à la disposition classique de la barre principale / latérale. Pour le HTML, nous avons un élément wrapper avec deux éléments enfants à l'intérieur comme ceci:

Notre CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Juste comme ça, nous avons le contenu principal et la barre latérale disposés.

La direction du "float" est déterminée par l'alignement du texte du div wrapper. Puisque l'alignement par défaut est laissé, nous n'avons rien eu à faire. Cependant, vous pouvez facilement le régler au centre ou à droite pour obtenir des mises en page qui ne sont même pas possibles avec les flottants (plus tard). Notez le commentaire "sans espaces" placé entre les deux div enfants du conteneur .wrapper . Ceci est important à noter, et la raison de le faire est celle "con" à propos de cette méthode.

Espace blanc

Revenons à l'exemple de tag. Lorsque vous écrivez du texte au format HTML, tous les espaces blancs sont regroupés dans un seul espace blanc, quelle que soit la quantité d’espaces dans votre document HTML. Ainsi, tout écart entre vos éléments "flottants" dans le balisage sera effectivement enregistré comme un espace entre eux dans le navigateur, tout comme notre texte de paragraphe. Cela aura pour effet de désactiver les calculs de taille en faisant tomber le dernier élément au niveau suivant de la page. Pas de bueno! Heureusement pour nous, il existe plusieurs solutions pour résoudre ce petit problème. Tel que:

• Définir la taille de la police: 0; . L'espace avec lequel nous traitons est un espace de caractères. Définir la taille de la police à zéro fait également la taille de l'espace zéro. Le problème avec ceci est que vous devez remonter la taille des polices des éléments enfants et que tout dimensionnement des fichiers sort complètement de la fenêtre. Cela peut être un peu lourd à gérer, donc ce n'est pas idéal.

• Supprimez l'espace entre vos éléments dans votre code HTML, supprimant ainsi l'espace de l'équation. Je l'ai fait pendant un certain temps, mais il a juste semblé négligé et a rendu plus difficile à lire.

• L'ajout d'un commentaire HTML entre vos éléments supprime également le caractère d'espace comme dans notre exemple. Ceci est ma solution préférée . La mise en évidence du texte dans la plupart des éditeurs de texte est telle que le contraste entre la note et les éléments suffit à améliorer de manière significative la lisibilité de votre balisage. Cela vous permettra également de conserver la bonne indentation de l'élément lui-même.

Les flotteurs fonctionnent pour moi, pourquoi changer?

Vous pensez peut-être: "C'est bon et tout, mais pourquoi changerais-je une méthode qui fonctionne bien pour moi?" Et bien, même si vous êtes un maître flottant, il y a certaines choses qu'ils ne peuvent tout simplement pas faire. Par exemple:

• Le "float centré" insaisissable, qui est souvent souhaitable, nécessite un balisage supplémentaire et plusieurs propriétés CSS à réaliser. Avec la méthode d'affichage, cela se fait simplement en appliquant text-align: center au wrapper.

• Le plus grand avantage de choisir la méthode d'affichage est la possibilité d'aligner verticalement votre contenu. À quelle fréquence avez-vous voulu centrer un élément sur son frère ou sa sœur? Vous pouvez utiliser le positionnement avec la méthode marge négative / traduction mais, encore une fois, avec un environnement dynamique et réactif, ce n’est pas préférable. Au lieu de cela, appliquez l'alignement vertical: milieu; va parfaitement centrer vos éléments à chaque fois sans travail supplémentaire de votre part. (Voir le stylo Inline-block over floats par davidicus sur CodePen.)

Pour envelopper

En réalité, il n'y a pas de solution unique pour la conception de sites Web et cela se résume à des préférences personnelles. J'utilise toujours des flotteurs dans certaines situations et parfois c'est vraiment le meilleur outil pour le travail. Je pense, cependant, qu'il y a un avantage certain à utiliser la méthode d'affichage. D'après mon expérience, j'ai trouvé que c'était la meilleure méthode pour traiter les mises en page. Pour ceux d'entre vous qui aimeraient explorer davantage cette méthode, j'ai créé une grille "Just Say No To Floats": Grille de blocage en ligne avec SASS sur CodePen.

Image / vignette en vedette, mur effondré via Chris Cotterman