Mise en forme des enveloppes de mise en page en CSS

Online Coding Courses for Kids

Un contenu de site Web doit être enveloppé ou contenu dans une largeur qui rend le contenu facile à lire. Pour ce faire, nous pouvons utiliser ce qu’on a appelé un wrapper ou un conteneur. L’utilisation d’un wrapper en CSS peut être possible de différentes manières, ce qui pourrait entraîner certains défis.

Dans cet article, je vais vous expliquer les wrappers de mise en page en CSS, comment ils fonctionnent, comment les utiliser et quand ne pas les utiliser. Notez que tout au long de cet article, je pourrais mentionner les termes wrapper et conteneur, et les deux signifient la même chose.

Es-tu prêt? Plongeons-nous!

Bref sur les emballages

Quand tu entends le mot emballage ou récipient, cela signifie en fait qu’un groupe d’éléments est enveloppé ou contenue à l’intérieur d’un autre élément. Sans utiliser d’éléments supplémentaires, nous pouvons ajouter un wrapper au élément comme ci-dessous:

body {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

Cependant, l’ajout de l’encapsuleur à la élément pourrait ne pas être pratique pour le travail d’aujourd’hui. L’élément wrapper peut empêcher les éléments enfants de sortir de ses limites. Considérez la figure suivante:

Nous avons des éléments secondaires et principaux, et ils vivent à l’intérieur d’un autre élément qui les enveloppe. le .wrapper l’élément a une largeur, bien sûr.

 class="wrapper">
    
    
...

Sans enveloppe, les éléments enfants colleront aux bords de l’écran. Cela peut être très gênant pour l’utilisateur, en particulier sur un grand écran.

La figure ci-dessus montre comment les éléments s’étireront lorsqu’il n’y a aucun élément qui les enveloppe. Ce comportement n’est pas quelque chose qu’un utilisateur doit ressentir. Permettez-moi d’expliquer raison derrière ça.

Pourquoi les wrappers de page sont nécessaires

L’utilisation d’un wrapper de page peut présenter de nombreux avantages que vous devez connaître en tant que concepteur ou développeur. Voici quelques avantages:

  1. Rendre le contenu plus lisible. Sans enveloppe, le contenu comme le texte et les images peut s’étirer pour remplir toute la largeur de l’écran. Pour les petits écrans, cela peut sembler correct. Cependant, pour un grand écran, c’est extrêmement ennuyeux.
  2. Le regroupement des éléments de conception est préférable pour ajouter de l’espacement.
  3. La division des éléments de conception en colonnes ne peut pas être effectuée facilement sans wrapper.

Implémentation d’un wrapper en CSS

Maintenant que vous comprenez les bases et les avantages d’un wrapper, voyons comment en créer un en CSS.

Ajout de la largeur

La première chose à décider lors de l’implémentation d’un wrapper est sa largeur. Comment voulez-vous que la largeur du wrapper soit? Cela dépend de votre conception. D’une manière générale, ayant une largeur de wrapper comprise entre 1000px - 1300px est le plus couramment utilisé. Le framework populaire Bootstrap, par exemple, utilise une largeur de 1170px.

.wrapper {
    width: 1170px;
}

Cependant, il n’est pas recommandé d’utiliser le width car elle provoquera un défilement horizontal lorsque la taille de l’écran est inférieure à 1170px. Vous pouvez le résoudre en ajoutant max-width, bien que.

.wrapper {
    width: 1170px;
    max-width: 100%;
}

Pendant que cela fonctionne, vous pouvez vous débarrasser de width et utilisez le max-width seulement comme suit.

.wrapper {
    max-width: 1170px;
}

Maintenant que nous avons ajouté la largeur du wrapper. Passons au centrage.

Centrage de l’emballage

Pour centrer le wrapper, vous devez ajouter un auto marge des côtés gauche et droit. Voir ce qui suit:

.wrapper {
    max-width: 1170px;
    margin: 0 auto;
}

Selon la spécification CSS, voici comment auto marges fonctionnent:

Si «marge gauche» et «marge droite» sont tous deux «auto», leurs valeurs utilisées sont égales. Cela centre horizontalement l’élément par rapport aux bords du bloc conteneur.

Si vous êtes intéressé à creuser dans le auto mot-clé, j’ai écrit un article détaillé à ce sujet.

j’ai utilisé margin: 0 auto, cela réinitialise essentiellement la margin pour le haut et le bas à zéro et faites-le auto pour les côtés gauche et droit. Il y a quelques conséquences à utiliser cela, mais j’y reviendrai plus loin dans cet article. Pour l’instant, il est recommandé d’utiliser la version longue des marges.

.wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

Ajoutez un rembourrage sur les côtés gauche et droit

Une chose importante à considérer est d’ajouter un rembourrage pour les côtés gauche et droit. Lorsque la taille de la fenêtre est inférieure à la largeur maximale de l’encapsuleur, les bords de l’encapsuleur se collent à la fenêtre.

.wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

En ajoutant le rembourrage, nous pouvons nous assurer que nous aurons un 16px décalage par rapport aux côtés gauche et droit, même si la taille de la fenêtre d’affichage est inférieure à la largeur maximale. Le rembourrage agit comme une stratégie de protection qui évite de faire en sorte que l’enveloppe adhère aux bords de la fenêtre lorsque l’espace n’est pas suffisant.

Mise à jour du 22 juin: utilisation d’un pourcentage de largeur pour l’encapsuleur

j’ai un réponse à propos de l’utilisation d’un pourcentage de largeur comme max-width: 90% pour l’emballage au lieu d’utiliser padding-left et padding-right.

Pendant que cela fonctionne, le 90% de la largeur de la fenêtre sera trop importante sur les grands écrans, que vous pouvez remplacer par une requête multimédia.

.wrapper {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* A media query for a large screen */
@media (min-width: 1170px) {
    .wrapper {
        max-width: 1170px;
    }
}

En utilisant un pourcentage de largeur, nous avons ajouté une étape supplémentaire. Nous pouvons facilement éviter cette étape en utilisant une valeur de largeur fixe. Une autre solution suggérée dans ce tweet dit que nous pouvons combiner width: 90% avec un max-width: 1170px propriété.

.wrapper {
	width: 90%;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

C’est une approche intéressante, mais je préférerais ajouter le rembourrage moi-même au lieu de dépendre du pourcentage de largeur.

le display type d’emballage

Étant donné que le wrapper est un

, c’est un élément de niveau bloc par défaut. La question est, que devons-nous faire si nous voulons changer le type d’affichage en grid, quand le contenu à l’intérieur du wrapper doit être placé dans une grille?

Eh bien, je ne recommande pas de faire cela car cela va à l’encontre du concept de séparation des préoccupations. Un wrapper sert à envelopper d’autres contenus, c’est tout. Si vous avez besoin d’un wrapper de grille, ajoutez-en un autre

à l’intérieur de l’emballage avec display: grid est plus facile, clair et plus facile à entretenir à l’avenir.

 class="wrapper">
    

Ce n’est pas recommandé, l’élément wrapper pourrait être utilisé sur une autre page et cela pourrait briser la mise en page involontairement.

.wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
}

Une meilleure solution serait la suivante:

 class="wrapper">
     class="featured-news">
        
    
.featured-news {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
}

Remarquez comment j’ai ajouté un élément séparé

élément pour envelopper le contenu. Ne vous souciez pas des classes et des conventions de dénomination pour cet exemple. Nous pouvons avoir une solution encore meilleure en utilisant un nom de classe qui peut être réutilisé sur différentes pages du site Web. Toutefois, les conventions de dénomination CSS sortent du cadre de cet article.

Ajout de marge entre les wrappers

Vous souvenez-vous quand je n’ai pas recommandé d’utiliser la version abrégée pour centrer l’élément wrapper? Je veux dire ceci:

.wrapper { 
    margin: 0 auto;
}

Bien que cela fonctionne, cela peut prêter à confusion lorsque vous avez plusieurs wrappers sur la page et que vous devez ajouter un espacement entre eux. Si, pour une raison quelconque, vous avez ajouté une autre classe de variantes au .wrapper, l’ajout de la marge peut ne pas fonctionner pour des raisons de spécificité.

.wrapper-variation {
    margin-top: 50px;
}

.wrapper { 
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

le margin pour le .wrapper-variation L’élément ne fonctionnera pas car il est remplacé par margin: 0 auto. Une propriété raccourcie remplace une propriété longue. Pour éviter une telle confusion, il est recommandé d’utiliser à la main pour de tels cas.

Passons maintenant à l’ajout de la marge. Dans chaque projet, je prépare un ensemble de classes utilitaires pour la marge et le remplissage, et je les utilise lorsque cela est nécessaire. Considérez la figure suivante.

 class="wrapper mb-5">
class="wrapper">
class="wrapper">
.mb-5 {
    margin-bottom: 3rem !important;
}

De cette façon, le CSS wrapper reste tel quel et l’espacement est ajouté avec une classe utilitaire CSS supplémentaire. Maintenant, vous pourriez vous demander, pourquoi dois-je ajouter plusieurs wrappers à une page, quand je peux en ajouter un? Dans le HTML ci-dessus, il y a un

élément entre deux wrappers.

En utilisant !important c’est bien, car le but des classes d’utilité est de forcer une propriété, et en ajoutant !important, nous pouvons le garantir.

Un wrapper dans une section plein écran

Il peut y avoir des cas où vous avez une section avec un arrière-plan qui a une largeur de fenêtre de 100% et à l’intérieur, il y a un wrapper. C’est similaire à ce qui est présenté dans l’exemple précédent.

Une structure HTML de page peut être comme ça:

class="wrapper">
class="wrapper">

le

a 100% de largeur de la fenêtre. Vous pouvez y ajouter une couleur ou une image d’arrière-plan. À l’intérieur, le wrapper empêche le contenu de prendre toute la largeur de la fenêtre.

Dans la figure ci-dessus, la section a une image d’arrière-plan et occupe toute la largeur de la fenêtre. Le contenu à l’intérieur est limité par la largeur du wrapper.

Une section de héros a-t-elle besoin d’un wrapper?

En fait ça dépend. Explorons les deux conceptions de sections de héros les plus utilisées.

Le premier a son contenu centré et est contraint d’une largeur spécifique.

Le second a son contenu réparti sur la largeur principale de l’emballage.

Pour mieux comprendre les deux modèles, voyons comment créer chacun d’eux.

Un héros au contenu centré

Vous pourriez être tenté de placer le contenu du héros, puis de tout centrer sans tenir compte de l’emballage.

 class="hero">
    

How to make bread at home

....

href="/sign-up">Sign up

Avec le code HTML ci-dessus, vous pouvez centrer le contenu avec text-align:

.hero { text-align: center; }

Cela semblera bon jusqu’à ce que vous redimensionniez la fenêtre du navigateur. Voici les problèmes que vous pourriez remarquer.

Le contenu est collé aux bords.

Comme il n’y a pas de rembourrage sur les côtés gauche et droit, le contenu collera aux bords sans espacement approprié. C’est mauvais pour l’utilisateur car cela rendra plus difficile l’observation et la lecture du contenu.

Longueur de ligne longue pour les grands écrans

Sur les grands écrans, le texte du paragraphe peut être très difficile à lire car la longueur de la ligne est trop longue. Selon Les éléments du style typographique appliqués au Web, le nombre de caractères recommandé pour une ligne est de 45 à 75. Tout élément éloigné de cette plage rendra la lecture plus difficile.

Pour éviter les problèmes ci-dessus, un wrapper peut être utilisé pour éviter que la longueur du texte ne devienne trop longue et pour ajouter un espacement dans le mobile.

 class="hero">
     class="hero__wrapper">
            

How to make bread at home

...

href="/sign-up">Sign up

J’ai utilisé la classe hero__wrapper puisque ce wrapper peut être personnalisé uniquement pour la section hero, il peut donc avoir une certaine largeur qui est plus petite que l’élément wrapper habituel.

.hero__wrapper {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

Pour centrer le contenu, cela peut être fait en utilisant la technique de votre choix, selon le cas d’utilisation. Pour cet exemple, en utilisant text-align: center suffit de centrer le contenu.

L’emballage doit-il être centré ou aligné à gauche?

Je ne sais pas s’il y a un noir ou un blanc pour cette question, mais j’ai vu des sites Web qui centrent le wrapper sur des écrans d’ordinateur portable, et il est aligné à gauche sur les tailles de bureau.

Le site Web Techcrunch en est un exemple. Remarquez comment le site Web est aligné à gauche sur de grands écrans.

Pour moi, j’aime lire un site Web centré et avec un espacement symétrique sur les côtés gauche et droit. Mais cela pourrait être une raison pour laquelle je ne suis pas au courant. Si vous avez une idée, faites-le moi savoir Twitter!

Utilisation de variables CSS pour les variations de wrapper

Il est rare que vous n’ayez besoin que d’un emballage d’une seule taille. Une largeur de wrapper peut être petite ou grande, selon le contenu et le cas d’utilisation. En tirant parti des variables CSS, nous pouvons créer une version moderne d’un wrapper, et vous aurez une grande flexibilité. Considérez ce qui suit:

 class="wrapper">
.wrapper {
    max-width: var(--wrapper-width, 1170px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

Si vous remarquez, le var a deux valeurs, la première si la variable --wrapper-width, et le second est 1170px. La deuxième variable est un se retirer, ce qui signifie que si la variable --wrapper-width n’est pas défini, le second sera utilisé.

Qu’est-ce que ça veut dire? Cela signifie que vous pouvez créer une variante du wrapper, en remplaçant le --wrapper-width comme ci-dessous:

 class="wrapper" style="--wrapper-width: 720px">

De cette façon, j’ai créé un wrapper personnalisé sans:

Si vous n’aimez pas la solution consistant à ajouter un style en ligne pour remplacer la variable CSS, vous pouvez ajouter une nouvelle classe à la place. Voir ci-dessous:

 class="wrapper wrapper--small">
.wrapper--small {
    --wrapper-width: 720px;
    /* this will override the default wrapper width. */
}

Démo

Utilisation de CSS display: contents

Tout d’abord, permettez-moi de vous expliquer cette valeur. Chaque élément en CSS est une boîte, et cette boîte contient du contenu, un remplissage, une marge et une bordure. En utilisant display: contents, cette zone sera supprimée du flux. Je peux l’imaginer comme supprimant les balises d’ouverture et de fermeture environnantes.

<header class="site-header">
    <div class="wrapper site-header__wrapper">
            -- Header content -->
    div>
header>
.site-header__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Dans l’exemple ci-dessus, vous devrez peut-être laisser l’en-tête s’étendre sur toute la largeur de la page, au lieu d’être limité par la largeur du wrapper.

.site-header__wrapper {
    display: contents;
}

.site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Ce faisant, le .wrapper l’élément sera caché (en quelque sorte). Maintenant, quand display: flex est appliqué au .site-header , les éléments descendants de l’élément .wrapper seront les articles enfants de .site-header.

Fond fluide, contenu fixe

Dans son livre CSS Secrets, Lea Verou a présenté une technique intéressante qui peut être utilisée pour les sections qui ont un arrière-plan fluide (prenant toute la largeur de la fenêtre) avec un wrapper à l’intérieur. Passons en revue la manière courante de le faire.

class="wrapper">
section {
	background-color: #ccc;
}

.wrapper {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

le margin-left: auto et margin-right: auto fonctionne d’une manière qui calcule la moitié de la largeur de la fenêtre d’affichage, moins la largeur du contenu. Cette même chose peut être effectuée en utilisant un rembourrage.

section {
  padding: 1rem calc(50% - 585px);
}

Nous n’avons pas encore fini. Le contenu sera collé aux bords sur mobile. Une solution pour cela serait la suivante.

section {
  padding: 1rem;
}

@media (min-width: 1170px) {
	section {
	  padding: 1rem calc(50% - 585px);
	}
}

Une solution alternative serait d’utiliser le nouveau CSS max() fonction. Simplement, nous fixons un rembourrage minimum de 1rem, et le 50% - 585px le calcul peut être utilisé comme l’autre valeur.

section {
  padding: 1rem max(1rem, (50% - 585px));
}

Si vous souhaitez en savoir plus sur min(), max(), et clamp(), J’ai écrit un article détaillé à leur sujet.

La fin

C’est une enveloppe. Vous avez un commentaire ou une suggestion? N’hésitez pas à me cingler @ shadowed9.

Merci pour la lecture.


Close Menu