Nous utilisons les floats pour la mise en page depuis que nous avons laissé des tables. C'est une solution originale qui peut souvent causer des problèmes, mais si vous savez ce que vous faites, cela fonctionne.
Une alternative intéressante aux flotteurs que les gens se tournent de plus en plus dernièrement consiste à définir la afficher valeur d'un élément à bloc en ligne. Qu'est-ce que cela fait exactement? Comment est-ce que c'est comme un char? En quoi est-ce différent? Nous allons plonger et voir ce que nous pouvons découvrir.
La propriété d'affichage
Les navigateurs Web rendent différents éléments de différentes manières. Certains éléments sont au niveau du bloc, ce qui signifie que leur valeur par défaut afficher la valeur est définie sur bloc. Les éléments de niveau bloc ont une largeur et une hauteur pouvant être définies et créent automatiquement une nouvelle ligne dans la présentation à mesure de leur création.
Un exemple d'élément de niveau bloc est un paragraphe. Si je jette deux paragraphes dans un document HTML, ils se superposent au lieu d'apparaître côte à côte. J'ai beaucoup de liberté quant à leurs dimensions et je peux vraiment les traiter comme des blocs de construction individuels à façonner à ma guise.
D'autres éléments ont leur afficher valeur définie sur en ligne par défaut. Cela signifie qu'ils n'ont pas de hauteur ni de largeur définissables et qu'ils ne créeront pas de nouvelles lignes dans une présentation (ils apparaissent donc? Inline?). Les éléments en ligne sont généralement le type de chose que vous instaurez dans un paragraphe ou un autre élément de niveau bloc: strong, em, anchor, etc.
Voici ce qui se passe si je jette un tas de balises d'ancrage dans un document HTML. Contrairement aux paragraphes ci-dessus, qui s'empilent automatiquement, ces éléments sont créés côte à côte. Leur largeur et leur hauteur sont déterminées par le contenu qu'elles contiennent et ne peuvent pas être remplacées manuellement comme pour les éléments de niveau bloc.
Il y a quelques autres bases afficher valeurs par défaut que vous connaissez probablement aussi. Par exemple, les éléments de la tête partie ont une propriété d'affichage de aucun.
Définition de votre propre valeur d'affichage
Une caractéristique vraiment intéressante de CSS est la possibilité de changer le comportement d'affichage par défaut des éléments. Bien qu'un comportement standard soit déjà défini pour un élément donné, nous pouvons le remplacer pour nos propres besoins.
Par exemple, nous pouvons facilement prendre ces balises d'ancrage en ligne du deuxième exemple ci-dessus et les faire ressembler davantage aux paragraphes de niveau bloc du premier exemple. Nous faisons cela en définissant la propriété display sur bloc dans notre CSS.
Maintenant, nos balises d'ancrage se comportent comme des éléments de niveau bloc, de sorte que chacune crée une nouvelle ligne et peut appliquer une valeur hauteur / largeur personnalisée.
Comme vous pouvez l’imaginer, il est plus difficile de travailler avec l’inverse de cet exemple en prenant un élément de niveau bloc et en définissant afficher valeur à en ligne. Instinctivement, vous pourriez utiliser affichage: en ligne Si vous essayez de faire en sorte que les deux paragraphes ci-dessus apparaissent côte à côte, votre résultat est que les deux se joignent en un seul paragraphe.
Nous avons maintenant perdu toute possibilité de régler notre largeur et notre hauteur, de sorte que les deux paragraphes sont inexorablement intégrés, ce qui n'est pas du tout ce que nous recherchions.
Éléments flottants
Et si nous voulions que les deux paragraphes ci-dessus restent distincts mais apparaissent côte à côte sous forme de colonnes individuelles au lieu d'être empilés en lignes? La réponse typique à laquelle bon nombre d’entre nous se sont tournés depuis des années est le flottement. En appliquant? Float: left? Pour les paragraphes, nous pouvons maintenir une fonctionnalité au niveau des blocs tout en créant plusieurs colonnes de contenu.
Les chars ont un comportement intéressant. Par exemple, les éléments flottants ont tendance à réduire leur conteneur parent, ce qui entraîne toutes sortes de problèmes si vous appliquez des couleurs d'arrière-plan ou des bordures. Pour résoudre ce problème, nous avons quelques astuces. Nous pouvons soit effacer les flottants sur un nouvel élément (de nos jours c'est souvent un pseudo-élément) à la fin du conteneur, soit utiliser débordement: auto sur le parent. Les deux correctifs ont leurs mises en garde, mais si vous savez les exploiter correctement, vous pouvez généralement réaliser n'importe quel exploit en matière de mise en page sans trop de difficulté.
affichage: bloc en ligne
Il existe des tonnes de valeurs pour la propriété display qui vont au-delà de ce que nous avons déjà mentionné, certaines utiles, d'autres que je doute que vous utilisiez un jour. Le sujet de la discussion d'aujourd'hui est de loin l'un des plus intéressants et des plus utiles du groupe: bloc en ligne.
Regardez ce qui se passe lorsque nous prenons nos deux paragraphes de l’exemple original ci-dessus et appliquons un afficher valeur de bloc en ligne.
Ça ressemble beaucoup à un char, non? Alors que se passe-t-il si nous ajoutons un conteneur parent? At-il le problème de l'effondrement que nous avons vu avec des flotteurs? Nan! Tout fonctionne exactement comme nous le souhaitons.
Ce qui se passe ici, c'est que nous demandons au navigateur d'afficher les paragraphes en ligne, tout en leur permettant de conserver leurs caractéristiques au niveau des blocs. Cela signifie que nous pouvons définir manuellement la largeur et la hauteur et faire en sorte que les deux éléments restent distincts, mais également qu'ils apparaissent côte à côte dans le flux de documents. Assez lisse!
La question de l'alignement
À la surface, bloc en ligne peut sembler être le sauveur de la mise en page que vous attendiez. Qui veut déconner avec des bidouilles de clearfix désordonnées quand vous pouvez les ignorer complètement avec cette méthode? Il s'avère cependant que les flottants ne sont pas la seule méthode de mise en page avec des défauts bloc en ligne a également quelques fonctionnalités étranges que vous devez garder la tête autour.
L'une des premières choses que vous ferez flotter et un bloc en ligne aura une apparence très différente lorsque vous aurez plusieurs éléments de hauteurs différentes. Par exemple, voici ce qui se passe lorsque vous faites glisser un groupe de paragraphes à gauche:
Maintenant, voici ce qui se passe lorsque vous utilisez inline-block pour obtenir la même chose. Notez que les bords inférieurs des paragraphes sont alignés au lieu de ceux du haut, comme dans l'image précédente.
Heureusement, ce n'est pas un gros problème. Pour résoudre le problème, assurez-vous de définir le alignement vertical propriété à Haut.
La question des espaces
Il y a un autre endroit important où le comportement de inline-block diffère de celui des floats. Je trouve étrange que tout ce qui est en HTML et en CSS puisse prendre en compte la mise en page, mais c'est exactement ce que nous trouvons ici. Considérez les exemples suivants.
Nous pouvons voir ici que lorsqu'un groupe d'éléments de liste est flotté, ils se heurtent les uns contre les autres comme on peut s'y attendre, nous permettant ainsi de définir manuellement l'écart sans espace supplémentaire inattendu. Cependant, lorsque nous faisons la même chose avec inline-block, il reste un peu d’espace par défaut qui ne disparaîtra même pas si nous définissons nos marges à 0.
Comme vous pouvez le constater, une solution consiste à supprimer les espaces blancs de notre code HTML et à rapprocher les éléments les uns des autres. Encore une fois, je trouve cela assez déroutant mais cela fonctionne. Une solution alternative qui produit le même résultat sans visser la hiérarchie visuelle dans votre code HTML consiste à appliquer une marge de -4 pixels sur les éléments de la liste.
Prise en charge du navigateur
Maintenant que nous savons ce qu'est Inline-Block et comment il fonctionne différemment des flottants, il est temps de discuter du sujet favori de chacun: le support du navigateur. Sur quelles atrocités devons-nous nous engager pour nous assurer que cette technique fonctionne réellement dans tous les domaines?
Lorsque nous nous arrêtons sur CanIUse.com pour voir la réponse, les résultats sont probablement bien meilleurs que ce à quoi vous vous attendiez.
Ici, nous pouvons voir que nous bénéficions d’un soutien au moins partiel dans tous les domaines et d’un soutien total pour tout sauf IE7 et les versions antérieures (simulacre de choc et de crainte). La note en bas nous informe que inline-block n'est "pris en charge que dans IE6 et IE7 sur des éléments avec l'affichage de" inline "par défaut. Cela signifie que les exemples de paragraphes que nous avons utilisés tout au long de cet article ont été supprimés.
Heureusement, le blog Mozilla avait déjà corrigé ce problème en 2009. Pour que IE fonctionne correctement, il suffit de déclencher hasLayout avec la propriété zoom, puis d'utiliser le piratage en étoile pour cibler IE6 / 7 et régler l'affichage en ligne. . Cela vous permet de traiter fonctionnellement les éléments en ligne comme s'il s'agissait d'éléments de bloc en ligne. Ce n'est certainement pas joli, mais ça fait le travail.
Lectures complémentaires
Si vous souhaitez en savoir plus sur inline-block, voici quelques articles qui m'ont été particulièrement utiles dans le cadre de mes recherches.
- Float vs. Inline-Block
- Qu'est-ce que Inline-Block?
- inline-block: beaucoup d'exemples
- Bloc en ligne sur plusieurs navigateurs
Une meilleure solution?
Pour être honnête, je n’avais jamais trop joué avec inline-block avant aujourd’hui, mais dans les commentaires, je vois de plus en plus de suggestions d’explorer cette méthode comme alternative aux flottants, alors j’ai pensé le Conseil. J'espérais pouvoir comprendre que c'était en fait une manière magique et sans tracas de chars, mais ce n'est vraiment pas le cas. Il y a encore plusieurs comportements inattendus que vous devez connaître et auxquels vous devez réagir, ce qui entraîne un code hacky très semblable à celui que nous voyons souvent avec les correctifs de compensation de flottement.
Pour être juste, c'est en fait un moyen assez simple de réaliser des dispositions similaires à des flottants. Plus important encore, le CSS que vous devez implémenter pour vous assurer qu'il est compatible avec tous les navigateurs est plus bref que le micro-hack de clear clear clair de Nicolas Gallagher. Cela peut en faire une meilleure solution pour de nombreux projets.
En fin de compte, je pense que je vais commencer à ajouter cette méthode à mon sac à malices. Je soupçonne que certains moments surviendront quand les flotteurs ne sont pas idéaux (exemple: les flotteurs corrects rendent tout en sens inverse) et ce sera une excellente alternative à avoir dans ces situations.
Qu'est-ce que tu penses? Inline-block est-il une bonne alternative aux flottants? Quelles situations pouvez-vous imaginer où l'un a clairement un avantage sur l'autre?