CSS Protips

Que fait CSS Protips ?

Une collection d'astuces pour vous aider à devenir un pro du CSS. Chaque entrée est un motif autonome — appliquez celui qui correspond au problème auquel vous faites face.

Utiliser un reset CSS

Les reset CSS aident à assurer une cohérence de style entre les différents navigateurs en offrant une base neutre pour le style des éléments. Il existe de nombreux modèles de reset, ou vous pouvez utiliser une approche plus simplifiée :

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Désormais, les éléments seront dépourvus de marges et de paddings, et box-sizing vous permet de gérer les mises en page avec le modèle de boîte CSS.

Démo

[!TIP] Si vous suivez l'astuce Hériter de box-sizing ci-dessous, vous pouvez choisir de ne pas inclure la propriété box-sizing dans votre reset CSS.

Hériter de box-sizing

Laissez box-sizing être hérité de html :

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Cela facilite le changement de box-sizing dans les plugins ou autres composants qui utilisent un comportement différent.

Démo

Utiliser all: unset avec précaution pour les reset de composants

Lors de la réinitialisation des propriétés d'un élément, vous pouvez réinitialiser chaque propriété individuellement :

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Ou utiliser la propriété raccourcie all avec unset. all: unset réinitialise presque toutes les propriétés (sauf unicode-bidi, direction et les propriétés personnalisées) — les propriétés héritées reviennent à inherit, les autres à initial. Un <button> devient display: inline et perd sa boîte native, donc il faut toujours restaurer la mise en page et le focus après la réinitialisation.

button.reset {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button.reset:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
}

[!TIP] Pour restaurer la feuille de style de l'agent utilisateur au lieu d'une base vierge, utilisez all: revert — voir Intention de réinitialisation : unset vs revert dans la section CSS Moderne.

Utiliser :not() pour Appliquer/Supprimer des Bordures sur la Navigation

Au lieu d'ajouter la bordure...

/* ajouter une bordure */
.nav li {
  border-right: 1px solid #666;
}

...puis de la retirer du dernier élément...

/* supprimer la bordure */
.nav li:last-child {
  border-right: none;
}

...utilisez la pseudo-classe :not() pour ne l'appliquer qu'aux éléments souhaités :

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Ici, le sélecteur CSS se lit comme un humain le décrirait.

Démo

Vérifier si une police est installée localement

Vous pouvez vérifier si une police est installée localement avant de la récupérer à distance, ce qui est également un bon conseil de performance.

@font-face {
  font-family: "Dank Mono";
  src:
    /* Nom complet */ local("Dank Mono"), /* Nom PostScript */ local("Dank Mono"),
    /* Sinon, téléchargez-la ! */ url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Merci à Adam Argyle d'avoir partagé cette astuce et sa démo.

Ajouter line-height à body

Vous n'avez pas besoin d'ajouter line-height à chaque <p>, <h*>, et al. séparément. Ajoutez-le plutôt à body :

body {
  line-height: 1.5;
}

Ainsi, les éléments textuels peuvent hériter facilement de body.

Démo

Définir :focus pour les éléments de formulaire

Les utilisateurs de clavier voyants se fient au focus pour déterminer où les événements clavier vont dans la page. Rendez le focus des éléments de formulaire visible et cohérent par rapport à l'implémentation par défaut d'un navigateur :

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

Démo

[!TIP] Dans le code moderne, préférez :focus-visible afin que les utilisateurs de clavier conservent un anneau de focus clair sans afficher les styles de focus à chaque clic de souris.

Centrer Verticalement N'importe Quoi

Préférez Grid avec une unité de vue dynamique sur mobile — 100vh correspond à la grande fenêtre d'affichage et peut mal se comporter lorsque les barres d'outils du navigateur s'affichent/se masquent. Avec les propriétés logiques, utilisez 100dvb (bloc de fenêtre d'affichage dynamique).

.center-page {
  min-block-size: 100dvb;
  display: grid;
  place-items: center;
}

Flexbox fonctionne de la même manière une fois que le parent a une taille de bloc définie :

html,
body {
  min-block-size: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

[!NOTE] Motif hérité : height: 100vh + place-items: center apparaît encore dans les anciens tutoriels. Préférez dvh/dvb/svh/lvh pour les mises en page pleine fenêtre sur mobile — voir MDN sur les longueurs relatives à la fenêtre d'affichage.

[!TIP] Vous voulez centrer autre chose ? CSS-Tricks a un excellent article à ce sujet.

Démo

Utiliser aspect-ratio au lieu de Hauteur/Largeur

La propriété aspect-ratio vous permet de dimensionner facilement les éléments et de maintenir un rapport hauteur/largeur constant. C'est incroyablement utile dans le design web réactif pour éviter le décalage de mise en page. Utilisez object-fit avec elle pour éviter de perturber la mise en page si les valeurs de hauteur/largeur des images changent.

img {
  aspect-ratio: 16 / 9; /* largeur / hauteur */
  object-fit: cover;
}

En savoir plus sur la propriété aspect-ratio dans cet article web.dev.

Démo

Listes Séparées par des Virgules

Faites ressembler les éléments de liste à une vraie liste séparée par des virgules :

ul > li:not(:last-child)::after {
  content: ",";
}

Utilisez la pseudo-classe :not() et aucune virgule ne sera ajoutée au dernier élément.

[!NOTE] Cette astuce peut ne pas être idéale pour l'accessibilité, notamment pour les lecteurs d'écran. De plus, le copier-coller depuis le navigateur ne fonctionne pas avec le contenu généré par CSS. Procédez avec prudence.

Sélectionner des Éléments en Utilisant nth-child Négatif

Utilisez nth-child négatif en CSS pour sélectionner les éléments 1 à n.

li {
  display: none;
}

/* sélectionner les éléments 1 à 3 et les afficher */
li:nth-child(-n + 3) {
  display: block;
}

Ou, puisque vous avez déjà appris à utiliser :not(), essayez :

/* sélectionner tous les éléments sauf les 3 premiers et les afficher */
li:not(:nth-child(-n + 3)) {
  display: block;
}

Démo

Utiliser SVG pour les Icônes

Il n'y a aucune raison de ne pas utiliser SVG pour les icônes :

.logo {
  background: url("logo.svg");
}

Le SVG s'adapte bien à tous les types de résolution et est pris en charge par tous les navigateurs depuis IE9. Abandonnez vos fichiers .png, .jpg ou .gif-jif-whatev.

[!NOTE] Si vous avez des boutons SVG uniquement iconiques pour les utilisateurs voyants et que le SVG ne se charge pas, cela aidera à maintenir l'accessibilité :

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Utiliser le Sélecteur "Lobotomisé Owl"

Il a peut-être un nom étrange, mais l'utilisation du sélecteur universel (*) avec le sélecteur de frère adjacent (+) peut offrir une puissante capacité CSS :

* + * {
  margin-top: 1.5em;
}

Dans cet exemple, tous les éléments dans le flux du document qui suivent d'autres éléments recevront margin-top: 1.5em.

[!TIP] Pour en savoir plus sur le sélecteur "lobotomisé owl", lisez l'article de Heydon Pickering sur A List Apart.

Démo

Utiliser max-height pour des Sliders CSS Purs

Implémentez des sliders uniquement CSS en utilisant max-height avec un débordement masqué :

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

L'élément s'agrandit jusqu'à la valeur max-height au survol et le slider s'affiche grâce au débordement.

Cellules de Tableau à Largeur Égale

Les tableaux peuvent être difficiles à manipuler. Essayez d'utiliser table-layout: fixed pour garder les cellules à largeur égale :

.calendar {
  table-layout: fixed;
}

Des mises en page de tableau sans douleur.

Démo

Se Débarrasser des Hacks de Marge avec Flexbox

Lorsque vous travaillez avec des gouttières de colonnes, vous pouvez vous débarrasser des hacks nth-, first- et last-child en utilisant la propriété space-between de flexbox :

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Désormais, les gouttières de colonnes apparaissent toujours uniformément espacées.

Utiliser les Sélecteurs d'Attribut avec des Liens Vides

Affichez les liens lorsque l'élément <a> n'a pas de valeur textuelle mais que l'attribut href contient un lien :

a[href^="http"]:empty::before {
  content: attr(href);
}

C'est très pratique.

Démo

[!NOTE] Cette astuce peut ne pas être idéale pour l'accessibilité, notamment pour les lecteurs d'écran. De plus, le copier-coller depuis le navigateur ne fonctionne pas avec le contenu généré par CSS. Procédez avec prudence.

Mieux Contrôler la Spécificité avec :is()

La pseudo-classe :is() est utilisée pour cibler plusieurs sélecteurs à la fois, réduisant la redondance et améliorant la lisibilité du code. C'est incroyablement utile pour écrire de grands sélecteurs sous une forme plus compacte.

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: green;
}

La règle ci-dessus est équivalente à la série de sélecteurs suivante...

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
  color: green;
}

Démo

Styliser les Liens "Par Défaut"

Ajoutez un style pour les liens "par défaut" :

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Désormais, les liens insérés via un CMS, qui n'ont généralement pas d'attribut class, auront une distinction sans affecter génériquement la cascade.

Boîtes à Rapport de Proportion Intrinsèque (solution de repli héritée)

[!NOTE] Hérité uniquement. Préférez aspect-ratio (Baseline Largement disponible) pour le nouveau code. Gardez cette astuce de padding uniquement lorsque vous devez prendre en charge de très anciens navigateurs ou avez besoin d'un motif qui précède aspect-ratio.

Pour créer une boîte avec un rapport de proportion intrinsèque, appliquez un padding supérieur ou inférieur à un div :

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

L'utilisation de 20% pour le padding rend la hauteur de la boîte égale à 20% de sa largeur. Quelle que soit la largeur de la fenêtre d'affichage, le div enfant conservera son rapport hauteur/largeur (100% / 20% = 5:1).

Démo

Styliser les Images Cassées

Rendez les images cassées plus esthétiques avec un peu de CSS :

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Ajoutez maintenant des règles de pseudo-éléments pour afficher un message utilisateur et la référence URL de l'image cassée :

img::before {
  content: "Nous sommes désolés, l'image ci-dessous est cassée :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

[!TIP] Apprenez-en plus sur le style de ce motif dans l'article de Ire Aderinokun.

Utiliser rem pour le Dimensionnement Global ; Utiliser em pour le Dimensionnement Local

Après avoir défini la taille de police de base à la racine (html { font-size: 100%; }), définissez la taille de police des éléments textuels sur em :

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Définissez ensuite la taille de police des modules sur rem :

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: 0.9rem;
}

Chaque module devient ainsi compartimenté et plus facile à styliser, plus maintenable et flexible.

Masquer les Vidéos en Lecture Automatique Non Muet

C'est une excellente astuce pour une feuille de style utilisateur personnalisée. Évitez de surcharger un utilisateur avec le son d'une vidéo qui se lance automatiquement au chargement de la page. Si le son n'est pas coupé, n'affichez pas la vidéo :

video[autoplay]:not([muted]) {
  display: none;
}

Encore une fois, nous profitons de l'utilisation de la pseudo-classe :not().

Utiliser :root pour une Typographie Flexible

La taille de police dans une mise en page réactive doit pouvoir s'adapter à chaque fenêtre d'affichage. Vous pouvez calculer la taille de police en fonction de la hauteur et de la largeur de la fenêtre d'affichage en utilisant :root :

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

Vous pouvez maintenant utiliser l'unité rem basée sur la valeur calculée par :root :

body {
  font: 1rem/1.6 sans-serif;
}

Démo

Définir font-size sur les Éléments de Formulaire pour une Meilleure Expérience Mobile

Pour éviter que les navigateurs mobiles n'affichent pas une alerte lors de la sélection d'un élément de formulaire, définissez font-size sur au moins 16px :

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

Ainsi, les navigateurs mobiles n'effectueront pas de zoom automatique sur les éléments de formulaire.

Utiliser scroll-behavior: smooth

Pour un défilement fluide dans la page, utilisez scroll-behavior: smooth sur html :

html {
  scroll-behavior: smooth;
}

Cette propriété est largement disponible (Baseline) et améliore l'expérience utilisateur lors de la navigation par ancres.

Préférer focus-visible à focus

Utilisez :focus-visible pour afficher un anneau de focus uniquement lorsque l'utilisateur navigue au clavier, évitant ainsi les indications de focus après un clic de souris :

button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

Cette approche est plus inclusive pour les utilisateurs de souris tout en restant accessible.

Utiliser les Propriétés Logiques pour la Mise en Page

Les propriétés logiques (comme margin-inline-start, padding-block-end) s'adaptent aux modes d'écriture et aux directions de texte :

.element {
  margin-inline: auto; /* centrage horizontal dans les directions LTR et RTL */
  padding-block: 1rem; /* espacement vertical */
  border-inline-end: 2px solid #ccc;
}

Elles sont Recommandées pour les sites multilingues.

Utiliser @supports pour l'Amélioration Progressive

Vérifiez la prise en charge des fonctionnalités avant de les appliquer :

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Cela permet d'utiliser des fonctionnalités modernes tout en offrant une solution de repli.

Utiliser clamp() pour une Typographie Fluide

La fonction clamp() permet de définir une valeur qui s'adapte entre un minimum et un maximum :

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

Ceci crée une typographie fluide sans requêtes média.

Utiliser gap avec Flexbox et Grid

La propriété gap fonctionne avec Flexbox et Grid pour espacer les éléments :

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Cela évite les hacks de marge.

Utiliser :has() pour le Styling Parent

La pseudo-classe :has() permet de cibler un élément parent en fonction de ses enfants :

.card:has(img) {
  grid-column: span 2;
}

form:has(input:invalid) {
  border-color: red;
}

C'est désormais largement disponible (Baseline 2023).

Centrer avec place-content et place-items

Les propriétés raccourcies place-content et place-items simplifient le centrage en Grid et Flexbox :

.center {
  display: grid;
  place-items: center; /* centre horizontalement et verticalement */
}

Ceci est plus concis que d'utiliser align-items et justify-items séparément.

Intention de Réinitialisation : unset vs revert

Valeur	Propriétés héritées	Propriétés non héritées	Effet sur les styles utilisateur
unset	inherit	initial	Ignoré
revert	Valeur héritée du parent	Valeur de la feuille de style utilisateur	Restaure le style du navigateur

Utilisez all: revert pour rétablir le style par défaut du navigateur plutôt qu'une ardoise vierge.

---

Source : AllThingsSmitty/css-protips + ajouts Baseline organisés (web.dev/MDN).