Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Modèle pour les pages du Livre de recettes

Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité·e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette. Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

Exigences

Quels éléments ce motif doit-il inclure, ou quels problèmes doit-il résoudre ? Listez-les ici.

Recette

Modifiez le code d'exemple. Le dernier paramètre correspond à la hauteur de l'exemple interactif, que vous pouvez adapter si besoin. Indiquez que l'on peut cliquer sur « Exécuter » dans les blocs de code pour modifier l'exemple dans le MDN Playground.

html
<div class="container">
  <div class="item">Je suis centré&nbsp;!</div>
</div>
css
.container {
  border: 2px solid rgb(75 70 74);
  border-radius: 0.5em;

  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;

  width: 10em;
}

Choix effectués

Expliquez vos décisions lors de la création du motif. Pourquoi avoir choisi une certaine méthode ? Si vous souhaitez ajouter un exemple supplémentaire ici — par exemple une version avec des solutions de repli — faites-le. Cette section est volontairement souple car les motifs vont du très simple au plus complexe.

Solutions de repli ou méthodes alternatives utiles

S'il existe des méthodes alternatives utiles pour construire la recette, ou des recettes de repli à utiliser si vous devez prendre en charge des navigateurs non compatibles, incluez-les dans des sections séparées ici.

Problèmes d'accessibilité

Incluez ceci s'il y a des points spécifiques à surveiller concernant l'accessibilité. Si ce n'est pas pertinent pour votre motif, cette section peut être omise.

Voir aussi

  • Liens vers des propriétés associées : example-property
  • Liens vers des articles montrant comment utiliser la propriété en contexte : « Voir l'article … »
  • Liens externes de grande qualité. N'hésitez pas à ajouter des liens externes, mais ils doivent être remarquables et ne pas se limiter à des détails mineurs.