Quelle est la bonne façon de faire un CSS Wrapper?
J'ai entendu beaucoup d'amis parler d'utiliser des wrappers en CSS pour centrer la partie "principale" d'un site Web.
Est-ce le meilleur moyen d'y parvenir? Quelle est la meilleure pratique? Y a-t-il d'autres moyens?
Exemple le plus élémentaire ( exemple live ici ):
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 500px width div centered on the page
</div>
</body>
Comment fonctionne le principe:
Créez votre emballage et attribuez-lui une certaine largeur. Appliquez ensuite une marge horizontale automatique à l’aide de margin: 0 auto; ou margin-left: auto; margin-right: auto;. Les marges automatiques s'assurent que votre élément est centré.
La meilleure façon de le faire dépend de votre cas d'utilisation spécifique.
Cependant, si nous parlons pour les meilleures pratiques générales pour l'implémentation d'un CSS Wrapper, voici ma proposition: introduire un élément <div> supplémentaire avec la classe suivante:
/**
* 1. Center the content. Yes, that's a bit opinionated.
* 2. Use `max-width` instead `width`
* 3. Add padding on the sides.
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}
... pour ceux d'entre vous qui veulent comprendre pourquoi, voici les 4 grandes raisons que je vois:
1. Utilisez max-width à la place width
Dans le réponse actuellement acceptée Aron dit width. Je ne suis pas d'accord et je propose plutôt max-width.
Définir la width d'un élément de niveau bloc l'empêchera de s'étendre jusqu'aux bords de son conteneur. Par conséquent, l'élément Wrapper prendra la largeur spécifiée. Le problème se produit lorsque la fenêtre du navigateur est inférieure à la largeur de l'élément. Le navigateur ajoute ensuite une barre de défilement horizontale à la page.
Dans ce cas, l'utilisation de max-width améliorera la gestion des petites fenêtres par le navigateur. Ceci est important pour rendre un site utilisable sur de petits appareils. Voici un bon exemple illustrant le problème:
/**
* The problem with this one occurs
* when the browser window is smaller than 960px.
* The browser then adds a horizontal scrollbar to the page.
*/
.width {
width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Using max-width instead, in this situation,
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Credits for the tip: W3Schools
* https://www.w3schools.com/css/css_max-width.asp
*/<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>Donc, en termes de réactivité, il semble que max-width soit le meilleur choix! -
2. Ajouter un rembourrage sur les côtés
J'ai vu beaucoup de développeurs encore oublier un cas Edge. Disons que nous avons un wrapper avec max-width défini à 980px. Le cas Edge apparaît lorsque la largeur de l'écran du périphérique de l'utilisateur est exactement de 980 pixels. Le contenu collera alors exactement sur les bords de l’écran sans laisser d’espace de respiration.
En règle générale, nous souhaitons avoir un peu de rembourrage sur les côtés. C’est pourquoi, si je dois implémenter un Wrapper d’une largeur totale de 980 pixels, je le ferais comme suit:
.wrapper {
max-width: 960px; /** 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/** ... omitted for brevity */
}
C’est pourquoi l’ajout de padding-left et padding-right à votre Wrapper peut être une bonne idée, en particulier sur mobile.
3. Utilisez un <div> au lieu d'un <section>
Par définition, le wrapper n'a pas de signification sémantique. Il contient simplement tous les éléments visuels et le contenu de la page. C’est juste un conteneur générique. Donc, en termes de sémantique, <div> est le meilleur choix.
On peut se demander si un élément <section> pourrait convenir à cet objectif. Cependant, voici ce que dit la spécification W3C:
L'élément n'est pas un élément conteneur générique. Lorsqu'un élément est nécessaire uniquement à des fins de style ou pour faciliter la rédaction de scripts, les auteurs sont encouragés à utiliser l'élément div à la place. Une règle générale est que l'élément section n'est approprié que si le contenu de l'élément est explicitement répertorié dans le plan du document.
L’élément <section> porte sa propre sémantique. Il représente un regroupement thématique de contenu. Le thème de chaque section doit être identifié, généralement en incluant un en-tête (élément h1-h6) en tant qu'enfant de l'élément de section.
Des exemples de sections sont les chapitres, les différentes pages à onglets d'une boîte de dialogue ou les sections numérotées d'une thèse. La page d'accueil d'un site Web peut être divisée en sections pour une introduction, des nouvelles et des informations de contact.
Cela peut ne pas sembler évident à première vue, mais oui! Le vieux <div> convient parfaitement à un wrapper!
4. Utilisation de la balise <body> et utilisation d'un <div> supplémentaire
Voici une question connexe . Oui, dans certains cas, vous pouvez simplement utiliser l'élément <body> en tant que wrapper. Cependant, je ne vous recommanderais pas de le faire, simplement en raison de la flexibilité et de la résilience aux changements.
Voici un cas d'utilisation illustrant un problème possible: Imaginons que, lors d'une étape ultérieure du projet, vous deviez imposer un pied de page pour "coller" à la fin du document (bas de la fenêtre d'affichage lorsque le document est court). Même si vous pouvez utiliser la méthode la plus moderne - avec Flexbox , je suppose que vous avez besoin d’un Wrapper <div> supplémentaire.
Je conclurais que la meilleure pratique consiste à avoir un <div> supplémentaire pour implémenter un CSS Wrapper. De cette façon, si les exigences spécifiques changent plus tard, vous n'avez pas besoin d'ajouter le Wrapper plus tard et de déplacer beaucoup de styles. Après tout, nous ne parlons que d’un élément supplémentaire du DOM.
Vous n'avez pas besoin d'une enveloppe, utilisez simplement le corps comme enveloppe.
CSS:
body {
margin:0 auto;
width:200px;
}
HTML:
<body>
<p>some content</p>
<body>
<div class="wrapper">test test test</div>
.wrapper{
width:100px;
height:100px;
margin:0 auto;
}
Consultez l'exemple de travail sur http://jsfiddle.net/8wpYV/
Le moyen le plus simple consiste à avoir un élément "wrapper" div avec un ensemble width et une marge gauche et droite de auto.
Échantillon de balisage:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
body { margin: 0; padding: 0 }
</style>
</head>
<body>
<div class="wrapper">
your content...
</div>
</body>
</html>
Centrer le contenu a tellement de possibilités qu'il ne peut pas être exploré en une seule réponse. Si vous souhaitez les explorer, CSS Zen Garden est une ressource agréable - si elle est ancienne explore les nombreuses façons de mettre en forme le contenu d’une manière que même les anciens navigateurs toléreront.
La bonne façon, si vous n’avez aucune exigence en matière d’atténuation, est d’appliquer simplement margin: auto aux côtés et une width. Si votre page n'a pas de contenu qui doit sortir de ces marges, appliquez-le simplement au corps:
body {
padding: 0;
margin: 15px auto;
width: 500px;
}
https://jsfiddle.net/b9chris/62wgq8nk/
Nous avons donc ici un ensemble de contenus d'une largeur de 500 pixels centrés sur toutes les tailles *. Le padding 0 est destiné à certains navigateurs qui aiment appliquer un padding par défaut et nous désorienter un peu. Dans l'exemple, le contenu d'une balise article est présenté comme étant agréable pour les lecteurs d'écran, Pocket, etc. afin que, par exemple, l'aveugle puisse passer au-dessus de la navigation que vous avez probablement (qui devrait être dans nav) et aller directement au contenu.
Je dis tout * parce que moins de 500 pixels cela va gâcher - nous ne sommes pas réactifs. Pour être réactif, vous pouvez simplement utiliser Bootstrap, etc., mais pour le construire vous-même, vous utilisez une requête multimédia telle que:
body {
padding: 0;
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
Notez qu'il s'agit de la syntaxe SCSS/SASS - si vous utilisez du CSS pur, elle est inversée:
body {
padding: 0;
margin: 15px;
}
@media (min-width: 500px) {
body {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/6/
Cependant, il est courant de vouloir centrer un seul morceau de page, appliquons-le donc uniquement à la balise article dans un dernier exemple.
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
article {
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/17/
Notez que ce dernier exemple utilise également CSS Flexbox dans le navigateur, ce qui est également l’un des moyens les plus récents de centrer les choses. Donc, c'est amusant.
Cependant, il existe des circonstances particulières dans lesquelles vous devez utiliser d'autres approches pour centrer le contenu, et chacune de celles-ci mérite probablement sa propre question (beaucoup d'entre elles ont déjà été posées et répondues ici sur ce site).
Y a-t-il d'autres moyens?
Les marges négatives ont également été utilisées pour le centrage horizontal (et vertical!), Mais il existe quelques inconvénients lorsque vous redimensionnez le navigateur de fenêtres: aucun curseur de fenêtre; le contenu ne peut plus être vu si la taille du navigateur de fenêtre est trop petite.
Pas de surprise car elle utilise un positionnement absolu, une bête jamais complètement apprivoisée!
Exemple: http://bluerobot.com/web/css/center2.html
Donc, c'était seulement pour votre information, comme vous l'avez demandé, margin: 0 auto; est une meilleure solution.
un "wrapper" est juste un terme pour un élément qui encapsule tous les autres éléments visuels de la page. La balise body semble correspondre à la facture, mais vous seriez à la merci du navigateur pour déterminer ce qui apparaît sous cela si vous ajustez le max-width.
Au lieu de cela, nous utilisons div car il agit comme un simple conteneur qui ne se casse pas. Les balises main, header, footer et section de HTML5 ne sont que des éléments div portant le nom approprié. Il semble qu’il pourrait (ou devrait) exister une balise wrapper en raison de cette tendance, mais vous pouvez utiliser la méthode d’emballage la plus adaptée à votre situation. via les classes, les identifiants et les CSS, vous pouvez utiliser une balise span de manière très similaire.
Il y a beaucoup de balises d'éléments HTML que nous n'utilisons pas souvent, voire même pas au courant. Faire des recherches vous montrerait ce qui peut être fait avec du HTML pur.