Catégories
Astuces et Design

Purge complète | Astuces CSS

Nous avons déjà abordé des techniques lorsque vous voulez un élément pleine largeur dans une colonne de largeur limitée, comme une image bord à bord dans une colonne de texte plus étroite. Il existe de nombreuses techniques.

Peut-être que ma préférée est cette petite classe utilitaire:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Cela fonctionne tant que la colonne est centrée et que cela ne vous dérange pas de devoir vous cacher overflow-x sur la colonne (ou le corps) car cela peut déclencher un débordement horizontal dans le cas contraire.

Il y a eu un peu de va-et-vient sur d'autres idées ces derniers temps…

Josh Comeau a écrit sur le blog que vous pouviez mettre en place une grille à trois colonnes et placer principalement le contenu dans la colonne du milieu, mais avoir ensuite la possibilité d'en sortir:

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / -1;
}

Je pense que c'est intelligent. Je l’utiliserais probablement. Mais j'avoue qu'il y a des éléments qui me semblent bizarres. Par exemple…

  • Désormais, tout ce qui se trouve dans le conteneur est un élément de grille. Ce n'est pas grave, mais les éléments se comporteront légèrement différemment. Aucune marge ne s'effondre, pour un.
  • Vous devez appliquer le comportement par défaut souhaité à chaque élément. Plutôt que des éléments qui s'empilent naturellement les uns sur les autres, vous devez les sélectionner et leur dire où aller et les laisser s'empiler. On a un peu moins l'impression de suivre le grain de la toile. Ensuite, vous avez toujours besoin d'une classe utilitaire pour effectuer le comportement de fond perdu.

Ce que j'aime vraiment dans cette idée, c'est qu'elle vous donne cette grille littérale avec laquelle travailler. Par exemple, votre entretoise gauche pourrait faire la moitié de la largeur de la droite et c'est tout à fait correct. Il s'agit de configurer cet espace pour qu'il soit potentiellement utilisé, comme Ethan en a parlé dans son article sur les grilles contraintes.

Kilian Valkhof a répondu à l'article avec cette idée:

body > *:not(img):not(video) { 
  position: relative;
  max-width: 40rem;
  margin: auto;
}

Aussi très intelligent. Cela limite la largeur de tout (dans n'importe quel conteneur, et il ne serait pas nécessaire que ce soit le corps) sauf les éléments que vous souhaitez supprimer (qui pourraient être une classe utilitaire là aussi, et pas nécessairement des images et des vidéos).

Encore une fois, pour moi, ce sentiment que je dois sélectionner chaque élément et lui fournir ces informations fondamentales sur la mise en page me semble un peu étrange. Pas comme "ne pas l'utiliser" bizarre, mais pas quelque chose que j'ai l'habitude de faire. Historiquement, je suis plus à l'aise pour dimensionner et positionner un conteneur et laisser le contenu de ce conteneur se mettre en place sans trop d'instructions supplémentaires.

Tu sais ce que j'aime le plus? Que nous avons tellement d'outils de mise en page puissants en CSS et que nous avons des conversations sur les avantages et les inconvénients de tirer exactement ce que nous recherchons.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *