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

Exploration des bizarreries du marqueur de liste: le mystère de l'écart post-marqueur

En explorant l'article de Google Web.dev Blog "Creative List Styling", je suis tombé sur un détail intrigant dans les exemples de code de la section ::marker. Le pseudo-élément ::marker, permettant la personnalisation des marqueurs de liste, a présenté une solution particulière pour ajouter un espacement après un marqueur SVG personnalisé:

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

Le caractère spatial ("") annexé à la fonction url() crée l'écart. Cela semblait moins idéal; CSS propose margin et padding pour l'espacement. Ma première tentative de remplacement de l'espace par un margin-right a échoué:

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

La prise en charge de la propriété CSS

::marker est limitée (principalement liée au texte) empêche margin et padding de fonctionner comme prévu.

Cela a conduit à une enquête plus approfondie sur la création de lacunes post-marqueur.

rembourrage et marges sur les éléments <li> et <ol></ol>:

Les expériences

ont révélé que les éléments padding-left sur <li> augmentent l'écart après le marqueur (quand list-style-position: outside). D'autres propriétés de rembourrage et de marge affectent l'indentation. Même avec padding-left: 0px, un écart minimum dépendant du navigateur persiste.

list-style-position: inside:

Déplacement du marqueur à l'intérieur L'élément de liste utilisant list-style-position: inside modifie le comportement. padding-left affecte désormais l'espacement avant le marqueur, éliminant le contrôle de l'écart post-marqueur. De plus, un bogue de chrome triple la taille de l'espace dans ce scénario. Les incohérences du navigateur dans la taille de l'espace sont également apparentes.

L'image ci-dessous illustre les différences de rendu par défaut entre les navigateurs pour le positionnement du marqueur outside et inside:

[L'image comparant le rendu du navigateur des marqueurs de liste irait ici]

Marqueurs personnalisés:

Utilisation list-style-type ou la propriété content sur ::marker pour définir des marqueurs personnalisés introduit d'autres nuances. Alors que content offre une plus grande flexibilité, le manque de support de Safari nécessite d'utiliser list-style-type pour une compatibilité plus large. Le remplacement de la balle par défaut par "•" (U 2022 Bullet) supprime l'écart minimum et rétrécit la taille du marqueur. L'ajustement font-size sur ::marker provoque un désalignement vertical, tandis que les modifications font-family peuvent affecter la taille du marqueur, offrant une solution de contournement potentielle. Le bogue de chrome est absent lorsque vous utilisez des marqueurs personnalisés avec list-style-position: inside.

Résultats de clés:

<li> Les navigateurs appliquent par défaut padding-inline-start à <li> et <ol></ol>. <li> Un écart minimum existe après des marqueurs intégrés, mais pas des personnaux. <li> padding-left sur <li> contrôle l'espace post-marker uniquement avec list-style-position: outside. <li> Les marqueurs de chaîne personnalisés sont plus petits que les marqueurs intégrés. font-family Les ajustements peuvent augmenter la taille.

Conclusion:

Le caractère d'espace dans l'exemple de code initial est une solution de contournement nécessaire. L'absence de prise en charge margin et padding sur ::marker, en particulier lorsque list-style-position: inside, limite le contrôle sur l'espacement post-marqueur. Jusqu'à ce que ::marker gagne un soutien immobilier plus large à la propriété CSS, des solutions de contournement comme l'utilisation d'un pseudo-élément pour une émulation de marqueur peuvent être nécessaires. La fonctionnalité améliorée ::before est hautement souhaitable. ::marker

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!