CSS - Citations : Apporter de la Personnalité à Votre Texte

Salut à toi, aspirant(e)s designer web ! Aujourd'hui, nous allons plonger dans une propriété CSS souvent négligée mais amusante : les citations. En tant que votre enseignant informatique de quartier bienveillant, je suis excité de partager cette petite pépite avec vous. Faites-moi confiance, à la fin de ce tutoriel, vous citerez comme un pro !

Qu'est-ce que les Citations CSS ?

Avant de commencer, comprenons ce que sont les citations dans CSS. Ce ne sont pas seulement pour souligner la parole ou citer des sources ; dans CSS, les citations sont un outil puissant pour ajouter automatiquement des guillemets à votre contenu. C'est comme avoir un petit robot qui suit votre texte, ajoutant ces petites marques incurvées où vous lui dites de le faire !

Valeurs Possibles

Commençons par les différentes valeurs que nous pouvons utiliser avec la propriété quotes. Voici un tableau pratique pour résumer :

Valeur	Description
none	Aucune citation utilisée
<string>	Spécifie les citations à utiliser
initial	Définit sur la valeur par défaut
inherit	Hérite de l'élément parent
auto	Le navigateur décide en fonction de la langue

Voyons maintenant ces valeurs une par une.

Applications

Avant d'aller plus loin, il est important de noter que la propriété quotes s'applique à tous les éléments. Cependant, elle est le plus souvent utilisée avec les éléments <q> et <blockquote>. Pensez-y comme un assaisonnement universel - vous pouvez l'ajouter à n'importe quel élément, mais il a le meilleur goût avec certains plats !

Syntaxe

La syntaxe de base pour utiliser les citations est simple :

selecteur {
quotes: valeur;
}

Simple, n'est-ce pas ? Maintenant, voyons chaque valeur en détail.

Citations CSS - Valeur none

Lorsque vous définissez quotes: none, vous dites essentiellement à CSS : "Pas de citations, s'il vous plaît !" Cela est utile lorsque vous souhaitez ignorer les guillemets par défaut. Voici un exemple :

q {
quotes: none;
}

<p>Elle a dit <q>Hello, world!</q></p>

Dans ce cas, le texte à l'intérieur de la balise <q> n'aura pas de guillemets. C'est comme chuchoter sans vraiment baisser la voix !

Citations CSS - Valeur <string>

C'est là que commence le fun ! Vous pouvez spécifier exactement quels caractères vous souhaitez pour vos citations. La syntaxe se présente comme suit :

selecteur {
quotes: "guillemet-ouvert1" "guillemet-fermé1" "guillemet-ouvert2" "guillemet-fermé2";
}

Essayons un exemple :

q {
quotes: "<<" ">>" "(" ")";
}

<p>Elle a crié <q>Quelle <q>superbe</q> journée !</q></p>

Cela se rendra comme suit : Elle a crié <<Quelle (superbe) journée !>>

N'est-ce pas génial ? C'est comme donner un lifting à votre texte !

Citations CSS - Valeur initial

La valeur initial réinitialise la propriété à sa valeur par défaut. C'est comme appuyer sur le bouton de réinitialisation sur vos citations. Pour la plupart des navigateurs, c'est équivalent à :

q {
quotes: '"' '"' "'" "'";
}

Cela vous donne les guillemets standard en anglais : des guillemets doubles pour le niveau externe, des guillemets simples pour le niveau interne.

Citations CSS - Valeur auto

La valeur auto est comme un assistant intelligent pour vos citations. Il choisit des guillemets appropriés en fonction de la langue de votre document. Par exemple :

:root {
quotes: auto;
}

Maintenant, si votre HTML a lang="fr", il pourrait utiliser des guillemets français «guillemets» pour le texte français. C'est comme avoir un expert polyglotte en citations dans votre équipe !

Utilisation de la Pseudo-classe :lang

Voici où on peut devenir vraiment stylé. La pseudo-classe :lang nous permet de spécifier différentes citations pour différentes langues. Regardez ça :

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

Cela configure différents styles de citation pour l'anglais, le français et l'allemand. C'est comme enseigner à votre site web à parler plusieurs langues !

Mettre Tout Ensemble

Créons un exemple plus complexe pour voir comment tout cela fonctionne ensemble :

<p lang="en">She said, <q>I love <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

Cela rendra chaque phrase avec des guillemets appropriés à la langue. C'est comme avoir un compositeur polyglotte travaillant sur votre site web !

Conclusion

Et voilà, les amis ! Nous avons voyagé à travers le monde des citations CSS, du simple au complexe. Souvenez-vous, les citations ne sont pas seulement des signes de ponctuation ; elles ajoutent de la personnalité et du contexte culturel à votre texte. Elles sont l'épice dans votre cuisine textuelle !

Alors que vous continuez votre voyage dans le design web, n'oubliez pas d'expérimenter avec les citations. Essayez différents styles, mélangez les langues, et voyez ce qui fonctionne le mieux pour votre site. Qui sait ? Vous pourriez bien citoer votre chemin vers la célébrité du design web !

Happy coding, et que vos citations soient toujours au point !

Credits: Image by storyset