Technologie de contenu généré par CSS

Introduction

La propriété content a été introduite dans CSS 2.1 pour ajouter du contenu généré aux pseudo-éléments :before et :after. Tous les principaux navigateurs (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+) prennent en charge cette fonctionnalité. De plus, Opera 9.5+ prend en charge les attributs de contenu sur tous les éléments, pas seulement les pseudo-éléments :before et :after.

Dans le brouillon de travail CSS 3 Generated Content, davantage de fonctionnalités ont été ajoutées à la propriété content - par exemple, le contenu peut être inséré et déplacé dans le document pour créer des notes de bas de page, des notes de fin et des commentaires de section. Mais aucun navigateur n’a implémenté le contenu des fonctions étendues.

Dans cet article, nous aborderons les bases du travail avec le contenu généré, puis présenterons les techniques spécifiques pour les utiliser.

Quelques mises en garde

Avant d'approfondir ce sujet, il convient de souligner que le contenu généré

ne fonctionnera que dans les navigateurs modernes avec CSS activé

Non disponible via DOM. C'est une pure expression. Plus précisément, du point de vue de l'accessibilité, le contenu généré n'est pas pris en charge par les lecteurs d'écran actuels.

Contenu généré - les bases

le contenu est utilisé comme ceci :

h2:avant {

contenu : "du texte";

>

Cela insérera "du texte" h2 avant le début de chaque élément de la page.

Au lieu de saisir la valeur texte de l'attribut content, vous pouvez également utiliser la valeur de l'attribut attr(), comme suit :

a:after {

content: attr (href)

}

Cela insérera le contenu de chaque élément après la fin de l'élément a href.

Notez que vous devez utiliser le nom de l'attribut attr() sans guillemets lorsque vous le référencez.

Vous pouvez également utiliser un compteur ou utiliser une image insérée pour générer une URL numérique dynamique (/chemin/vers/fichier). Regardons quelques exemples.

Contenu numérique avec compteur

Si vous souhaitez insérer des valeurs incrémentielles dans une séquence répétée d'éléments, comme la question 1, la question 2, la question 3, vous pouvez utiliser un compteur pour incrémenter la valeur du compteur puis utilisez le contenu Afficher le décompte de la manière suivante :

ol {

Type de style de liste : aucun

Réinitialisation du compteur : Compteur segmenté

}

li : avant {

Contenu : compteur "chapitre" (décrochage

anti-incrément

}

Dans la première règle, utilisez la propriété counter-reset pour remettre le compteur à 1. Dans la deuxième règle, chaque élément li a une

chaîne imprimée, où X est la valeur actuelle du compteur. Le dernier attribut de la deuxième règle augmente la valeur du compteur de 1 avant de passer à l'élément suivant de la liste. Chapitre

Bien entendu, le numéro ne sera pas affiché dans les navigateurs qui ne prennent pas en charge cette fonctionnalité CSS. Si cela prête à confusion quelque part dans votre page Web, consultez le chapitre 10 pour plus de détails. La frontière est ténue entre la génération de contenu purement décoratif ou une partie réelle du contenu qui devrait être écrite en HTML réel.

J'ai écrit une démo illustrant la création d'un compteur avec du contenu généré. Pour plus de détails sur ce sujet, lisez l'excellent article de David Storey sur l'utilisation des compteurs CSS pour la numérotation automatique.

Insérez des guillemets corrects pour le contenu multilingue

Différentes langues utilisent des caractères différents pour les guillemets. Une citation anglaise s'écrirait ainsi :

" Only Someone make you do it,

Une citation norvégienne s'écrirait ainsi :

« Hvis du forteller meg nok en vits,såskal jegslådeg til jorden»»

Au lieu d'utiliser du texte simple avec des guillemets codés en dur en HTML, vous pouvez utiliser l'élément q

< quelqu'un vous fait le faire

et spécifiez des guillemets pour chaque langue dans votre CSS

/* Spécifiez des guillemets pour deux langues */

:lang (en) > q { quotes: '"' '"' }

:lang(no) > q { guillemets : "«" "»"}

/* Insérer des guillemets avant et après le contenu de l'élément */

q:before { content : open-quote }

q:after { content: close-quote }

you Cette technique peut être utilisée avec n'importe quel élément, pas seulement q (bien que ce soit l'utilisation la plus évidente et la plus sémantique ). Notez que Safari 3 (et inférieur) et IE 7 (et inférieur) ne prennent pas en charge l'attribut quotes. >

Consultez la démo de mon plugin de devis pour voir cela en action

Remplacez le texte par une image<.>

Il existe plusieurs techniques de remplacement d'image que vous pouvez utiliser, chacune avec ses propres avantages et inconvénients. C'est une autre façon de remplacer du texte par un contenu d'image

div.logo {

Contenu : URL (logo.png);

}

L'avantage d'utiliser cette technique de remplacement d'image est qu'elle remplace véritablement le texte, vous n'avez donc pas besoin d'utiliser height et width pour créer de l'espace pour l'image,

text-indent

ou padding pour masquer le texte original.

Cependant, il y a quelques inconvénients :

Vous ne pouvez pas répéter. images, ou utilisez des sprites d'images

Cela ne fonctionnera que dans Opera 9.5+, Safari 4+, Chrome, il prend en charge l'URL du contenu sur tous les sélecteurs comme attribut de valeur, pas seulement :avant ou :après

Il n'y a aucun moyen d'utiliser ceci est un moyen d'inclure un texte alternatif afin que les lecteurs d'écran ne puissent pas comprendre votre contenu en remplaçant l'image.

Pour en savoir plus, consultez ma démo de remplacement d'image à l'aide de contenu.

Afficher l'icône du lien

Vous pouvez utiliser le Sélecteur d'attribut de l'attribut de contenu pour afficher une icône après un lien en fonction du format de fichier auquel il appartient ou d'un format de fichier externe.

a[href $='.pdf']:après {

content:url(icon-pdf.png);

}

a [rel="external"]:after { /* Vous pouvez également utiliser a[href ^="http"]:after */

content:url(icon-external.png);

}

La première règle utilise un sélecteur CSS3 avec correspondance de sous-chaîne - href $='.pdf' signifie que href a l'attribut .pdf à la fin de la valeur.

En raison de l'expression régulière , ^ et $ font respectivement référence au début et à la fin de la chaîne. À l'aide des sélecteurs d'attribut de correspondance de sous-chaîne CSS 3, [attribute^=value] et [attribute$=value] vous permettent de faire correspondre les éléments [attribute*=value] dont le contenu de l'attribut commence ou se termine par une valeur spécifiée, tout en sélectionnant tous les éléments de cette valeur. attribut Élément de position.

Il s'agit d'une démo montrant des PDF et des icônes externes sur les liens.

Utiliser les valeurs d'attribut comme contenu

Nous avons déjà mentionné que content: attr(val) permet d'afficher la valeur de l'attribut d'un élément à l'écran. Cela peut être utilisé de nombreuses manières utiles – en voici quelques exemples.

Imprimer les URL/Abréviations en CSS

Comme mentionné dans l'article pour imprimer en listes séparées, vous pouvez utiliser le contenu généré pour enrichir votre page une fois imprimé. Par exemple, imprimez l'URL du lien suivant dans le print CSS :

a:after {

content: "(" attr(href) ")";

>

Vous pouvez utiliser la même méthode pour imprimer l'expansion de l'élément abbr. Ajoutez simplement ce qui suit à votre feuille de style d'impression :

abréviation : après {

contenu : "("attr(title)")";

}

Consultez ma démo d'URL d'impression et d'extension d'abréviation pour en savoir plus.

Regard vers l'avenir : attr() CSS3 puissant

La valeur CSS3 et le brouillon d'unité étendent la gamme des expressions attr() - en plus de renvoyer des chaînes, il peut également renvoyer des valeurs telles que types d'unités Couleur CSS, entier CSS, longueur, angle, temps, fréquence et autres unités.

En plus des attributs de données personnalisés, cela peut être très puissant pour le rendu de tableaux, graphiques et animations simples. Par exemple, nous pouvons définir la couleur d'arrière-plan d'un élément en fonction de la valeur de l'attribut. Cela peut être utile dans les applications qui affichent des palettes de couleurs sur le Web. Nous pouvons également spécifier la taille d'un élément en fonction d'une valeur définie dans un attribut de données personnalisé. Par exemple, la longueur d'une barre dans un graphique à barres peut être définie par une propriété de l'élément qui représente la barre. Malheureusement, cette fonctionnalité est faiblement prioritaire et ne sera pas prête de si tôt.

Conclusion

J'espère que cet article vous a permis de mieux comprendre l'attribut content et ce avec quoi vous pouvez l'utiliser. Étant donné qu'IE 8 prend désormais également en charge le contenu, il est très clair pour nous que nous pouvons utiliser cette fonctionnalité CSS dans notre travail de production. Utilisez-le simplement lorsque cela est approprié et soyez conscient des implications en matière d'accessibilité que le contenu résultant a encore.

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!