text-transform |
Transforme le texte |
| CSS |
|
Syntaxe
|
text-transform: paramètres;
|
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer le transformer le texte : |
| "capitalize" |
Ceci est un texte d'exemple |
Cette constante indique que le premier caractère de chaque mot est en majuscule et le reste en minuscule |
| "lowercase" |
Ceci est un texte d'exemple |
Cette constante indique que le texte est tout en minuscule |
| "none" |
Ceci est un texte d'exemple |
Cette constante indique qu'il n'y a aucune modification. |
| "uppercase" |
Ceci est un texte d'exemple |
Cette constante indique que le texte est tout en majuscule |
Description
Cette propriété permet de définir les «cases» du texte (majuscule, minuscule,...).
Remarques
- Fonctionnalité de transformation : La propriété text-transform permet de modifier l'apparence du texte en contrôlant la capitalisation. Elle peut
transformer les lettres en majuscules, minuscules ou en capitalisation de chaque mot. Cela permet une personnalisation facile sans modifier directement le contenu
HTML ou le texte source.
- Accessibilité et SEO : Utiliser text-transform est bénéfique pour l'accessibilité et le SEO, car les transformations n'altèrent pas le contenu réel du
texte. Par exemple, un texte en majuscules avec uppercase sera toujours lisible correctement par les lecteurs d'écran.
- Interaction avec les polices de caractères : ertaines polices peuvent avoir des variations stylistiques pour les majuscules ou les minuscules. Lorsqu'on
utilise text-transform, l'apparence peut varier en fonction de la police de caractères utilisée, ce qui peut influencer le rendu final.
- Limitations avec des langues spécifiques : La propriété peut ne pas gérer correctement certaines langues. Par exemple, en turc, le passage de minuscule à
majuscule ne respecte pas toujours les règles spécifiques, comme la distinction entre i et I.
- Effets sur le style inline Si vous appliquez text-transform à un élément parent, tous les éléments enfants héritent de cette transformation. Cela
peut causer des comportements inattendus si certains sous-éléments nécessitent une capitalisation différente.
- Utilisation pour le design : Cette propriété est particulièrement utile pour les titres et les boutons, où un style uniforme (comme tout en majuscule) est
souvent nécessaire pour respecter une charte graphique sans modifier le texte d'origine.
- Compatibilité et support des navigateurs : La propriété text-transform est prise en charge par tous les navigateurs modernes, ce qui la rend fiable
pour une utilisation généralisée dans des projets web. Cependant, des ajustements peuvent être nécessaires pour certains rendus spécifiques dans des cas complexes.
Dernière mise à jour : Dimanche, le 20 décembre 2015
