Contenu - Astuces CSS

Anonim

La contentpropriété en CSS est utilisée en conjonction avec les pseudo-éléments ::beforeet ::after. Il est utilisé pour insérer littéralement du contenu. Il peut avoir quatre types de valeur.

Chaîne de caractères

.name::before ( content: "Name: "; )

Puis un élément comme celui-ci:

 Chris 

Rendrait comme ceci:

Name: Chris

Il peut également s'agir d'une chaîne vide, ce qui est généralement vu dans des choses comme le clearfix.

Contrer

div::before ( content: counter(my-counter); )

Plus d'informations à ce sujet.

Image

div::before ( content: url(image.jpg.webp); )

C'est littéralement une image sur la page comme le serait. Cela pourrait aussi être un dégradé. Notez que vous ne pouvez pas modifier les dimensions de l'image lorsqu'elle est insérée de cette façon. Vous pouvez également insérer une image en utilisant une chaîne vide pour le contenu, en la créant d'une display: blockcertaine manière, en la dimensionnant et en utilisant background-image. De cette façon, vous pouvez le redimensionner avec background-size.

Attribut

Vous pouvez utiliser des valeurs (des chaînes, de toute façon) qui proviennent directement des attributs du HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

La attr()fonction n'a pas encore de «types», donc vous ne pouvez pas passer une valeur comme 20px(juste des chaînes), mais un jour!

Texte alternatif

La spécification indique que vous pouvez utiliser un /dans la syntaxe pour répertorier un texte alternatif. Par exemple…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Vous pourriez peut-être l'utiliser comme…

 
  • Make Bed
  • Grocery Shop
  • Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Plus d'information

Le contenu inséré de cette manière n'est pas vraiment dans le DOM, il a donc certaines limites. Par exemple, vous ne pouvez pas attacher un événement directement (uniquement) à un pseudo-éléments. Il est également incohérent que le texte inséré de cette manière soit lu ou non par les lecteurs d'écran (c'est généralement de nos jours) ou si vous pouvez le sélectionner (ce n'est généralement pas le cas de nos jours).

  • Choses sympas que les pseudo-éléments peuvent faire
  • Présentation des pseudo éléments
  • Documents MDN

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
4 2 9 12 3.1

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 2,1 3.2

Pour Opera, url()uniquement pris en charge dans la version 7+.