Passer au contenu principal

Il est désormais simple de personnaliser la couleur, la taille ou le type de numéro ou de puce lors de l'utilisation d'un

    ou

      .


      Mise à jour

Grâce à Igalia sponsorisé par Bloomberg, nous pouvons enfin enregistrer nos astuces pour les listes de styles. Regarder!

igraal_fr-fr
marqueur-fun-1069220
Voir la source

Grâce à CSS :: marqueur nous pouvons changer le contenu et certains styles de puces et de nombres.

Compatibilité du navigateur

Lorsque Versions de Chrome 86, :: marqueur il sera compatible avec Firefox pour ordinateur de bureau et Android, Safari de bureau et Safari iOS, et les navigateurs de bureau et Android basés sur Chromium. Voir MDN Compatibilité du navigateur table de mise à jour.

Pseudo-éléments

Considérez la liste désordonnée HTML essentielle suivante:

< ul >
< li > Lorem ipsum douleur sit amet consectetur adipisicing elit li >
< li > Dolores quaerat illo totam porro
li >
< li > Quidem aliquide perferendis voluptate
li >
< li > Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit conséquatur alias facilis rem
li >
< li > Fuite
li >
ul >

Ce qui aboutit à la représentation sans surprise suivante:

Le point au début de chaque

  • L'article est gratuit! Le navigateur dessine et crée une boîte de marqueurs générée pour vous.

    Aujourd'hui, nous sommes ravis de parler de la :: marqueur pseudo-élément, qui vous donne la possibilité de concevoir l'élément de puce que les navigateurs créent pour vous.

    Terme clé:
    Un pseudo-élément représente un élément du document autre que ceux qui existent dans l'arborescence du document. Par exemple, vous pouvez sélectionner la première ligne d'un paragraphe à l'aide du pseudo-élément p :: première ligne, bien qu'il n'y ait pas d'élément HTML qui encapsule cette ligne de texte.

    Créer un signet

    Les :: marqueur La zone de marqueur de pseudo-élément est automatiquement générée dans chaque élément de l'élément de liste, avant le contenu réel et le :: avant que pseudo-élément.

    li :: avant {
    contenu : ":: avant" ;
    fond : gris clair ;
    rayon de la bordure : 1ch ;
    rembourrage en ligne : 1ch ;
    margin-inline-end : 1ch ;
    }

    En règle générale, les éléments de la liste sont

  • Les éléments HTML, mais d'autres éléments peuvent également être convertis en éléments de liste avec affichage: élément de liste.

    < dl >
    < dt > Lorem dt >
    < jj > Lorem ipsum douleur sit amet consectetur adipisicing elit
    jj >
    < jj > Dolores quaerat illo totam porro
    jj >

    < dt > Ipsum dt >
    < jj > Quidem aliquide perferendis voluptate
    jj >
    dl >

    dd {
    affichage : élément de liste ;
    type de style de liste : "🤯" ;
    padding-inline-start : 1ch ;
    }

    Peigner un marqueur

    Jusqu'à ce que :: marqueur, les listes peuvent être conçues en utilisant type de liste y image-style-liste Pour changer le symbole de l'élément de liste avec 1 ligne de CSS:

    li {
    image de style de liste : url ( /right-arrow.svg ) ;
    type de liste : '' ' ;
    padding-inline-start : 1ch ;
    }

    C'est utile, mais nous avons besoin de plus. Que diriez-vous de changer la couleur, la taille, l'espacement, etc.? C'est là où :: marqueur vient à la rescousse. Permet un ciblage individuel et global de ces pseudo-éléments CSS:

    li :: marker {
    couleur : rose vif;
    }

    li: first-child :: marker {
    taille de la police : 5rem ;
    }

    Mise en garde:
    Si la liste ci-dessus ne contient pas de puces roses, alors :: marqueur il n'est pas compatible avec votre navigateur.

    Les type de liste La propriété offre des possibilités de style très limitées. Les :: marqueur pseudo élément signifie que vous pouvez pointer vers le marqueur lui-même et le styliser directement. Cela permet plus de contrôle.

    Cela étant dit, vous ne pouvez pas utiliser toutes les propriétés CSS dans un :: marqueur. La liste des propriétés autorisées et non autorisées est clairement indiquée dans la spécification. Si vous essayez quelque chose de cool avec ce pseudo-élément et que cela ne fonctionne pas, la liste ci-dessous est votre guide sur ce qui peut et ne peut pas être fait avec CSS:

    CSS autorisé :: marqueur Propriétés

    • animation- *
    • transition- *
    • Couleur
    • direction
    • Police de caractère- *
    • contenu
    • unicode-bidi
    • espace blanc

    Changer le contenu d'un :: marqueur C'est fait avec contenu l'opposé de type de liste. Dans l'exemple suivant, le style du premier élément est utilisé type de liste et le second avec :: marqueur. Les propriétés dans le premier cas s'appliquent à l'ensemble de l'élément de la liste, pas seulement au marqueur, ce qui signifie que le texte est animé comme le marqueur. Lorsque vous utilisez :: marqueur nous ne pouvons pointer que sur la zone de marqueur et non sur le texte.

    Notez également comment les Contexte la propriété n'a aucun effet.

    Styles de liste

    li: nth-child (1) {
    type de liste : '?' ;
    taille de la police : 2rem ;
    arrière - plan: hsl ( 200 20% 88% ) ;
    animation : changement de couleur 3s facilité d'entrée-sortie infinie ;
    }

    Résultats mitigés entre le signet et l'élément de liste

    Styles de marqueurs

    li: nth-child (2) :: marker {
    contenu : '!' ;
    taille de la police : 2rem ;
    arrière - plan: hsl ( 200 20% 88% ) ;
    animation : changement de couleur 3s facilité d'entrée-sortie infinie ;
    }

    Résultats focalisés entre le marqueur et l'élément de liste

    Gotchas!

    En chrome, espace blanc ne fonctionne que pour les marqueurs placés à l'intérieur. Pour les marqueurs placés à l'extérieur, le régleur de style force toujours espace blanc: pré pour préserver l'espace final.

    Modifier le contenu d'un signet

    Voici quelques-unes des façons dont vous pouvez concevoir vos signets.

    Modifier tous les éléments de la liste

    li {
    type de style de liste : "😍" ;
    }

    li :: marker {
    contenu : "😍" ;
    }

    Modifier un seul élément de la liste

    li: dernier-enfant :: marqueur {
    contenu : "😍" ;
    }

    Changer un élément de liste en SVG

    li :: marker {
    contenu : url ( /heart.svg ) ;
    contenu : url ( #heart ) ;
    contenu : url ( "données: image / svg + xml; charset = UTF-8, " ) ;
    }

    Modification des listes numérotées
    Que diriez-vous d'un

      même si? Le marqueur dans un élément de liste ordonnée est un nombre et non une puce par défaut. En CSS, ils sont appelés Comptableset ils sont assez puissants. Ils ont même des propriétés pour définir et réinitialiser le début et la fin du nombre, ou les changer en chiffres romains. Pouvons-nous concevoir cela? Oui, et nous pouvons même utiliser la valeur du contenu du signet pour créer notre propre présentation de numérotation.

      li :: marker {
      contenu : compteur ( élément de liste ) "› " ;
      couleur : rose vif;
      }

      Dépuration

      Chrome DevTools est prêt à vous aider à inspecter, déboguer et modifier les styles appliqués à :: marqueur pseudo éléments.

      devtools-1804244

      Style futur des pseudo-éléments

      Vous pouvez obtenir plus d'informations sur :: marker à l'adresse:

      C'est formidable d'avoir accès à quelque chose qui a été difficile à concevoir. Vous souhaiterez peut-être être en mesure de concevoir d'autres éléments générés automatiquement. Vous pourriez être frustré par

      ou l'indicateur de saisie semi-automatique de l'entrée de recherche, les choses qui ne sont pas implémentées de la même manière dans tous les navigateurs. Une façon de partager ce dont vous avez besoin est de créer un souhait https://webwewant.fyi.

  • Erreur: Attention: Contenu protégé.