Listes

Qu'est-ce que c'est ?

En HTML, tu as les listes à puces (<ul>) et les listes numérotées (<ol>). En CSS, on cherche souvent à personnaliser la puce ou à supprimer le style par défaut.

Propriété clé

  • list-style-type : Change la forme de la puce (circle, square, decimal, alpha...).
  • list-style-position : Définit si la puce est à l'intérieur (inside) ou à l'extérieur (outside) du bloc de texte.
  • list-style-image : Permet d'utiliser une icône personnalisée à la place de la puce.

Variables Font

Qu'est-ce que c'est ?

Auparavant, si tu voulais du texte fin, gras et italique, ton navigateur devait télécharger 3 fichiers différents (ex: Roboto-Light.ttf, Roboto-Regular.ttf, Roboto-Bold.ttf). Avec les Variable Fonts (Polices Variables), tu ne télécharges qu'un seul fichier qui contient toute la "médecine" pour générer n'importe quelle variante entre ces styles.

Propriété : Les axes

Au lieu de choisir entre "Gras" ou "Normal", tu joues sur des axes. Les plus courants sont définis par 4 lettres :

  1. wght (Weight / Poids) : Tu peux choisir précisément 432 ou 789 au lieu de rester bloqué à 400 (normal) ou 700 (gras).
  2. wdth (Width / Largeur) : Pour rendre les lettres plus étroites (condensed) ou plus larges (expanded).
  3. ital (Italic) : Pour incliner progressivement les lettres.
  4. opsz (Optical Size) : Ajuste automatiquement les détails selon que le texte est très petit (lisibilité) ou très grand (esthétique).

Comment faire ?

  1. Importez la police variable depuis Google Fonts en ajoutant le lien dans la balise <head> de votre HTML (ex: <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap" rel="stylesheet">).
  2. Définissez des variables CSS dans la section :root de votre fichier CSS pour stocker les propriétés de police (ex: --main-font: 'Roboto', sans-serif;).
  3. Utilisez la propriété font-variation-settings pour contrôler les axes de la police variable (ex: font-variation-settings: 'wght' 700, 'wdth' 100;).
  4. Appliquez la police à vos éléments HTML en utilisant la propriété font-family avec vos variables CSS (ex: font-family: var(--main-font);).
  5. Testez différents paramètres en ajustant les valeurs des axes pour obtenir l'apparence souhaitée.