Tout ce que vous devez savoir sur l'écart après le marqueur de liste

je lisais "Style de liste créative" sur le blog web.dev de Google et j'ai remarqué quelque chose d'étrange dans l'un des exemples de code du ::marker partie de l'article. Les marqueurs de liste intégrés sont des puces, des nombres ordinaux et des lettres. Le ::marker Le pseudo-élément nous permet de styliser ces marqueurs ou de les remplacer par un caractère ou une image personnalisé.

::marker { content: url('/marker.svg') ' ';
}

L'exemple qui a attiré mon attention utilise une icône SVG comme marqueur personnalisé pour les éléments de la liste. Mais il y a aussi un seul espace (" ") dans la valeur CSS à côté de url() fonction. Le but de cet espace semble être d'insérer un espace après le marqueur personnalisé.

Quand j'ai vu ce code, je me suis immédiatement demandé s'il y avait une meilleure façon de créer l'écart. Ajout d'un espace à content ressemble plus à une solution de contournement qu'à la solution optimale. CSS fournit margin ainsi que padding et d'autres moyens standard d'espacer les éléments sur la page. Aucune de ces propriétés ne pourrait-elle être utilisée dans cette situation ?

Tout d'abord, j'ai essayé de remplacer le caractère espace par une marge appropriée :

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

Cela n'a pas fonctionné. Comme il s'avère, ::marker ne prend en charge qu'un petit ensemble de propriétés CSS principalement liées au texte. Par exemple, vous pouvez modifier le font-size ainsi que color du marqueur et définissez un marqueur personnalisé en définissant content à une chaîne ou une URL, comme indiqué ci-dessus. Mais le margin ainsi que padding les propriétés sont pas pris en charge, leur définition n'a donc aucun effet. Quelle déception.

Se pourrait-il vraiment qu'un caractère espace soit le seul moyen d'insérer un espace après un marqueur personnalisé ? J'avais besoin de savoir. En faisant des recherches sur ce sujet, j'ai fait quelques découvertes intéressantes que j'aimerais partager dans cet article.

Ajouter du rembourrage et des marges

Tout d'abord, confirmons ce que margin ainsi que padding faire sur le <ul> ainsi que <li> éléments. J'ai créé une page de test à cet effet. Faites glisser les curseurs appropriés et observez l'effet sur l'espacement de chaque côté du marqueur de liste. Conseil : utilisez généreusement le bouton Réinitialiser pour réinitialiser tous les contrôles à leurs valeurs initiales.

Remarque: Les navigateurs appliquent une valeur par défaut padding-inline-left of 40px à <ol> ainsi que <ul> éléments. La logique padding-inline-left la propriété est équivalente à la physique padding-left propriété dans les systèmes d'écriture avec une direction en ligne de gauche à droite. Dans cet article, je vais utiliser les propriétés physiques par souci de simplicité.

Comme vous pouvez le voir, padding-left on <li> augmente l'espace après le marqueur de liste. Les trois autres propriétés contrôlent l'espacement à gauche du marqueur, en d'autres termes, l'indentation de l'élément de liste.

Notez que même lorsque l'élément de la liste est padding-left is 0px, il y a encore un écart minimum après le marqueur. Cet écart ne peut pas être réduit avec margin or padding. La longueur exacte de l'écart minimum dépend du navigateur.

Pour résumer, le contenu de l'élément de liste est positionné à une distance minimale spécifique au navigateur du marqueur, et cet écart peut être encore augmenté en ajoutant un padding-left à <li>.

Ensuite, voyons ce qui se passe lorsque nous positionnons le marqueur à l'intérieur l'élément de la liste.

Déplacer le marqueur à l'intérieur de l'élément de liste

La list-style-position propriété accepte deux mots-clés : outside, qui est la valeur par défaut, et inside, qui déplace le marqueur à l'intérieur de l'élément de liste. Ce dernier est utile pour créer des conceptions avec des éléments de liste pleine largeur.

Si le marqueur est maintenant à l'intérieur l'élément de la liste, cela signifie-t-il que padding-left on <li> n'augmente plus l'écart après le marqueur ? Découvrons-le. Sur ma page de test, activez list-style-position: inside via la case à cocher. Comment vont les quatre padding ainsi que margin propriétés concernées par ce changement?

Comme vous pouvez le voir, padding-left on <li> augmente maintenant l'espacement à la à gauche du marqueur. Cela signifie que nous avons perdu la possibilité d'augmenter l'écart après le marqueur. Dans cette situation, il serait utile de pouvoir ajouter margin-right à la ::marker lui-même, mais cela ne fonctionne pas, comme nous l'avons établi ci-dessus.

De plus, il y a un bogue dans Chromium qui provoque l'écart après le marqueur à triple après être passé à inside positionnement. Par défaut, la longueur de l'espace est d'environ un tiers de la taille du texte. Donc par défaut font-size of 16px, l'écart est d'environ 5.5px. Après être passé à inside, l'écart se creuse au maximum 16px dans Chrome. Ce bogue affecte le disc, circleet square marqueurs, mais pas des marqueurs de nombres ordinaux.

L'image suivante montre le rendu par défaut des marqueurs de liste positionnés à l'extérieur et à l'intérieur dans trois principaux navigateurs sur macOS. Pour votre commodité, j'ai aligné horizontalement tous les éléments de la liste sur leurs marqueurs pour faciliter la comparaison des différences de tailles d'espace.

Pour résumer, passer à list-style-position: inside introduit deux problèmes. On ne peut plus augmenter l'écart via padding-left on <li>, et la taille de l'écart est incohérente entre les navigateurs.

Enfin, voyons ce qui se passe lorsque nous remplaçons le marqueur de liste par défaut par un marqueur personnalisé.

Passer à un marqueur personnalisé

Il existe deux manières de définir un marqueur personnalisé:

• list-style-type ainsi que list-style-image propriétés
• content propriété sur le ::marker pseudo-élément

La content la propriété est plus puissante. Par exemple, cela nous permet d'utiliser le counter() fonction pour accéder au numéro ordinal de l'élément de la liste (le implicitement list-item contrer) et décorez-le avec des chaînes personnalisées.

Malheureusement, Safari ne prend pas en charge le content propriété sur ::marker encore (Bug WebKit). Pour cette raison, je vais utiliser le list-style-type propriété pour définir le marqueur personnalisé. Vous pouvez toujours utiliser le ::marker sélecteur pour styliser le marqueur personnalisé déclaré via list-style-type. Cet aspect de ::marker est pris en charge dans Safari.

Tout caractère Unicode peut potentiellement servir de marqueur de liste personnalisé, mais seul un petit ensemble de caractères a réellement "Bullet" dans leur nom officiel, alors j'ai pensé les compiler ici pour référence.

Personnage	Nom	Point de code	Mot-clé CSS
•	Canon	U+2022	disc
‣	Balle triangulaire	U+2023
⁃	Trait d'union Puce	U+2043
⁌	Balle noire vers la gauche	U+204C
⁍	Balle noire vers la droite	U+204D
◘	Balle inversée	U+25D8
◦	Balle blanche	U+25E6	circle
☙	Balle de coeur floral à rotation inversée	U+2619
❥	Balle lourde de coeur noir tournée	U+2765
❧	Balle de coeur floral tourné	U+2767
⦾	Puce blanche entourée	U+29BE
⦿	Puce encerclée	U+29BF

Remarque: Le CSS square le mot-clé n'a pas de caractère "Bullet" correspondant dans Unicode. Le personnage qui s'en rapproche le plus est l'emoji Petit carré noir (▪️) (U+25AA).

Voyons maintenant ce qui se passe lorsque nous remplaçons le marqueur de liste par défaut par list-style-type: "•" (U+2022 Balle). C'est le même caractère que la puce par défaut, il ne devrait donc pas y avoir de différences de rendu majeures. Sur ma page de test, activez le list-style-type option et observez tout changement apporté au marqueur.

Comme vous pouvez le voir, il y a deux changements importants :

1. Il n'y a plus d'écart minimum après le repère.
2. La balle est devenue plus petite, comme si elle était rendue à un plus petit font-size.

Selon Styles de compteur CSS niveau 3, le marqueur de liste par défaut (disc) devrait être « similaire à • U+2022 BALLE". Il semble que les navigateurs augmentent la taille de la puce par défaut pour la rendre plus lisible. Firefox utilise même une police spéciale, -moz-bullet-font, pour le marqueur.

Le problème de petite taille peut-il être résolu avec CSS ? Sur ma page de test, activez le style de marqueur et observez ce qui se passe lorsque vous modifiez le font-size, line-heightet font-family du marqueur.

Comme vous pouvez le voir, augmenter la font-size provoque un désalignement vertical du marqueur personnalisé, et cela ne peut pas être corrigé en diminuant le line-heightL’ vertical-align propriété, qui pourrait facilement résoudre ce problème, n'est pas prise en charge sur ::marker.

Mais avez-vous remarqué que changer le font-family peut faire grossir le marqueur ? Essayez de le régler sur Tahoma. Cela pourrait potentiellement être une solution de contournement suffisante pour le problème de petite taille, bien que je n'aie pas testé quelle police fonctionne le mieux sur les principaux navigateurs et systèmes d'exploitation.

Vous avez peut-être également remarqué que le bogue Chromium ne se produit plus lorsque vous positionnez le marqueur à l'intérieur de l'élément de liste. Cela signifie qu'un marqueur personnalisé peut servir de solution de contournement pour ce bogue. Et cela m'amène au problème principal et à la raison pour laquelle j'ai commencé à faire des recherches sur ce sujet. Si vous définissez un marqueur personnalisé et le positionnez à l'intérieur de l'élément de liste, il n'y a pas d'espace après le marqueur et aucun moyen d'insérer un espace par des moyens standard.

1. Il n'y a pas d'écart minimum après les marqueurs personnalisés.
2. ::marker ne supporte pas padding or margin.
3. padding-left on <li> n'augmente pas l'écart puisque le repère est positionné inside.

Résumé

Voici un résumé de tous les faits clés que j'ai mentionnés dans l'article :

1. Les navigateurs appliquent une valeur par défaut padding-inline-start of 40px à <ul> ainsi que <ol> éléments.
2. Il y a un espace minimum après les marqueurs de liste intégrés (disc, decimal, etc.). Il n'y a pas d'écart minimum après les marqueurs personnalisés (chaîne ou URL).
3. La longueur de l'espace peut être augmentée en ajoutant un padding-left à <ul>, mais uniquement si le marqueur est positionné en dehors de l'élément de liste (le mode par défaut).
4. Les marqueurs de chaîne personnalisés ont une taille par défaut plus petite que les marqueurs intégrés. Changer le font-family on ::marker peuvent augmenter leur taille.

Conclusion

En regardant l'exemple de code du début de l'article, je pense que je comprends maintenant pourquoi il y a un espace dans le content valeur. Il n'y a tout simplement pas de meilleur moyen d'insérer un espace après le marqueur SVG. C'est une solution de contournement qui est nécessaire car aucune quantité de margin ainsi que padding peut créer un espace après un marqueur personnalisé positionné à l'intérieur de l'élément de liste. UN margin-right on ::marker pourrait facilement le faire, mais cela n'est pas pris en charge.

Jusqu'à ce que ::marker ajoute la prise en charge de plus de propriétés, les développeurs Web n'auront souvent d'autre choix que de masquer le marqueur et de l'émuler avec un ::before pseudo-élément. J'ai dû le faire moi-même récemment parce que je ne pouvais pas changer le marqueur background-color. Espérons que nous n'aurons pas à attendre trop longtemps pour un plus puissant ::marker pseudo-élément.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/