Contenu CSS | Astuces CSS

Contenu CSS | Astuces CSS

CSS a une propriété appelée teneur. Il ne peut être utilisé qu’avec les pseudo éléments :après et :avant. Il est écrit comme un pseudo sélecteur (avec les deux points), mais on l’appelle un pseudo élément parce qu’il ne sélectionne en fait rien de ce qui existe sur la page mais ajoute quelque chose de nouveau à la page. Voilà à quoi ça ressemble :

.email-address:before {
   content: "Email address: ";
}

Avec ce CSS en place, nous pourrions avoir ce HTML :

Et la sortie serait comme :

• Adresse e-mail: [email protected]

Peut-être que cet exemple ne vous fait pas saliver, mais le contenu des pseudo-éléments peut être très utile et faire des choses sympas. Passons en revue quelques idées et considérations.

Hey! C’est du contenu, pas du design !

La première préoccupation pourrait être celle d’un puriste de la séparation entre le contenu et le design. Vous ajoutez littéralement du contenu textuel à la page avec du contenu CSS, et cela brise cette barrière. La spécification est terminée et l’idée mise en œuvre, mais cela ne veut pas dire que cela ne vaut pas la peine d’en discuter. Si vous avez une opinion sur le contenu CSS et son utilisation, merci de la partager dans les commentaires.

Je pense que c’est génial et parfaitement adapté pour CSS. Considérons l’exemple ci-dessus où nous préfaçons tous les éléments avec une classe de adresse e-mail avec le texte « Adresse e-mail : ». C’est une décision de conception, où pour la clarté du contenu, il a été décidé qu’avoir ce texte avant les adresses e-mail rendait le contenu plus clair. Peut-être que dans une refonte du site, il y avait moins de place où ces adresses e-mail sont affichées et il a été décidé qu’au lieu de les faire précéder de texte, une petite icône serait utilisée à la place. Cela correspond à l’idée de CSS, dans la mesure où le contenu HTML n’a pas besoin de changer du tout, ce changement pourrait être uniquement accompli avec CSS.

Je vais publier un article demain avec ce genre d’idée.

Utiliser des caractères spéciaux

Si vous devez utiliser un caractère spécial dans le contenu CSS, c’est un peu bizarre. Comment je le fais, c’est que je trouve le numéro ASCII du symbole. Ce tableau de glyphes est pratique. Donc, sur ce graphique, le symbole du copyright © est © – donc le nombre ASCII est 169. Ensuite, je dépose ce nombre dans le calculateur de conversion d’entité qui le convertira en ce dont vous avez besoin pour CSS.

Contenu CSS | Astuces CSS

En voici quelques-uns utiles au hasard :

2018 – Devis intelligent unique gauche
2019 – Devis intelligent unique droit
0A9 – Droit d’auteur
2713 – Coche
2192 – Flèche droite
2190 – Flèche gauche

Marquez vos liens visités avec des coches :

#main-content a:visited:before {
   content:  "2713 ";
}

Utilisation d’attributs

Vous pouvez insérer des attributs des éléments que vous ciblez en tant que contenu. Par exemple, un lien d’ancrage peut avoir un attribut title :

CSS-Tricks

Vous pouvez accéder à cet attribut de titre à partir de la propriété content comme :

a:before {
   content: attr(title) ": ";
}

Tout attribut peut être ciblé en tant que tel, au format attr(nom-de-attribut). Si vous souhaitez insérer quelque chose dans le code HTML à utiliser à des fins de contenu CSS (mais rien d’autre), vous pouvez utiliser le nouveau Les données- préfixe d’attribut en HTML5.

Exemple d’astuce : info-bulles CSS3

Info-bulles pour les liens basés sur le Titre attribut:

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

aCSS Content | CSS-Tricks:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20px;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(#eeeeee, #cccccc);  
}
Contenu CSS | Astuces CSS

Maintenant, cet exemple utilise le Titre attribut, et d’autres exemples comme celui-ci que vous trouvez sur le Web utilisent également l’attribut title. C’est probablement la bonne à utiliser. Cependant, notez que les navigateurs ont leurs propres fenêtres contextuelles d’info-bulle. Quand cela arrivera, cela couvrira cela et aura l’air bizarre. J’ai essayé de prendre une capture d’écran du problème, mais cela ne m’a pas permis pour une raison quelconque. Il n’y a aucun moyen de supprimer cela, autre que de ne pas utiliser le Titre attribut. HTML5 Les données- attributs, encore une fois, pourraient être utiles ici.

Points à considérer

  • Firebug ne peut pas encore cibler les éléments pseudo. L’inspecteur Web des navigateurs WebKit peut les cibler, mais n’affiche pas leurs propriétés/valeurs. J’ai entendu dire que les outils de développement d’IE pouvaient également les cibler, mais je ne suis pas sûr de la propriété/des valeurs.
  • Dans WebKit, ils doivent être au niveau du bloc pour être tournés. Firefox peut faire pivoter les éléments/pseudo-éléments en ligne.
  • Dans Firefox 3.0, les pseudo éléments ne peuvent pas être positionnés de manière absolue.
  • Ils ne peuvent pas être transformés ou animés.

J’ai eu une idée que je voulais essayer où vous auriez une liste verticale de noms, et lorsque vous passez la souris dessus, leurs adresses e-mail glissent sous eux. Pour que le HTML soit aussi propre que possible, j’ai pensé qu’il serait cool d’utiliser le an :après pseudo élément et un -webkit-transition pour y arriver. Mais, hélas, vous ne pouvez pas animer ou faire la transition d’un pseudo élément.

Contenu CSS | Astuces CSS

En utilisant la méthode :after/content, j’ai obtenu un exemple qui fonctionne, il ne glisse pas comme je pensais que ce serait cool. À l’aide de s J’ai eu l’idée de travailler, également dans la page de démonstration.

Voir la démo

@media print {
     #main-content a[href]:after { " (" attr(href) ") "; }
}

Prise en charge du navigateur / Accessibilité

Tous les principaux navigateurs (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ et Internet Explorer 8+) (voir le graphique complet) prennent en charge le contenu CSS avec les pseudo-éléments :after/:before et la spécification est dans son statut de recommandation de candidat complet.

En ce qui concerne l’accessibilité, je ne suis tout simplement pas sûr à 100% de la situation. J’essayais d’utiliser VoiceOver avec Safari sur mon Mac avec la démo des liens contextuels des e-mails. Pour une meilleure accessibilité, je pense que l’objectif serait de lui faire lire l’intégralité du texte, y compris le contenu CSS ajouté. J’ai eu du mal à le faire faire ça, mais je pensais que je l’avais réussi à le faire une fois d’une manière ou d’une autre. J’étais vraiment mauvais dans l’utilisation de VoiceOver et j’ai trouvé frustrant de le faire faire ce que j’essayais de faire, même aux niveaux les plus élémentaires. Si quelqu’un en sait plus sur l’accessibilité en ce qui concerne le contenu CSS, je suis sûr que nous aimerions tous en savoir plus.

Suite

Tout un tas de trucs incroyables que les pseudo-éléments peuvent faire

Contenu CSS | Astuces CSS

#Contenu #CSS #Astuces #CSS