Podcast CSS – 009: Mise en page
Imaginez que vous travaillez en tant que développeur, et un collègue concepteur vous remet une conception pour un tout nouveau site web. La conception présente toutes sortes de mises en page et de compositions intéressantes: des mises en page bidimensionnelles qui tiennent compte de la largeur et de la hauteur de la fenêtre d'affichage ; ainsi que les mises en page qui doivent être fluides et flexibles. Comment déterminer la meilleure façon d'appliquer un style à ces éléments avec CSS ?
Le CSS offre plusieurs façons de résoudre les problèmes de mise en page, sur un axe horizontal, un axe vertical ou même les deux. Choisir la bonne méthode de mise en page pour un contexte peut être difficile, et souvent, vous aurez peut-être besoin de plusieurs méthodes de mise en page pour résoudre votre problème. Pour vous aider, dans les modules suivants, vous découvrirez les caractéristiques uniques de chaque mécanisme de mise en page CSS pour éclairer ces décisions.
Mise en page: bref historique
Aux débuts du Web,
des conceptions plus complexes qu'un simple document ont été disposées avec des éléments <table>.
La séparation du code HTML des styles visuels a été facilitée lorsque le CSS a été largement adopté par les navigateurs à la fin des années 90.
Grâce au CSS, les développeurs ont pu modifier complètement l'apparence d'un site Web sans avoir à toucher au code HTML.
Cette nouvelle fonctionnalité a inspiré des projets tels que The CSS Zen Garden,
qui a été conçu pour démontrer la puissance du CSS et encourager davantage de développeurs à l'apprendre.
Les CSS ont évolué en même temps que nos besoins en termes de conception Web et de technologie de navigation. Pour découvrir comment la mise en page CSS et notre approche de la mise en page ont évolué au fil du temps, consultez cet article de Rachel Andrew.
Mise en page: le présent et le futur
Le CSS moderne offre des outils de mise en page incroyablement puissants. Nous avons des systèmes dédiés pour la mise en page et nous allons voir de haut niveau ce que nous avons à notre disposition, avant d'aborder plus en détail Flexbox et Grid dans les prochains modules.
Comprendre la propriété display
La propriété display a deux fonctions.
Il détermine tout d'abord si la case à laquelle il est appliqué agit comme une ligne intégrée ou un bloc.
.my-element {
display: inline;
}
Les éléments intégrés se comportent comme des mots dans une phrase.
Ils sont alignés l'un à côté de l'autre.
Des éléments tels que <span> et <strong>
qui sont généralement utilisés pour styliser des éléments de texte
dans des éléments contenant des éléments tels qu'une <p> (paragraphe),
sont intégrés par défaut.
Elles préservent également les espaces blancs environnants.