text-transform
Change la casse des lettres : tout en majuscules, tout en minuscules, ou une majuscule au début de chaque mot.
- Valeur initiale
none- Héritée
- Oui
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.textTransform = "uppercase"
Exemple
#.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem;
}<span class="badge box" style="display: inline-grid; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;">premium</span>Définition et utilisation
#La propriété text-transform change la façon d’afficher les lettres sans modifier le contenu dans le code. uppercase met toutes les lettres en majuscules, lowercase en minuscules, et capitalize met une majuscule au début de chaque mot.
C’est une meilleure solution que d’écrire le texte en majuscules directement dans le HTML. Les lecteurs d’écran lisent le texte normalement, sans l’épeler lettre par lettre, et changer le style plus tard ne demande pas de modifier le contenu.
Les règles de changement de casse dépendent de la langue définie par l’attribut lang. Par exemple, en turc, la majuscule du « i » est « İ », et le navigateur en tient compte si lang est correctement renseigné.
Syntaxe
#text-transform: none | uppercase | lowercase | capitalize | full-width;Valeurs
#- Le texte exactement comme dans le code.
- Toutes les lettres en majuscules.
- Toutes les lettres en minuscules.
- Chaque mot avec une majuscule initiale.
Valeurs en pratique
#none
.demo { text-transform: none; }uppercase
.demo { text-transform: uppercase; }lowercase
.demo { text-transform: lowercase; }capitalize
.demo { text-transform: capitalize; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez le contenu normalement, et appliquez les majuscules en CSS. Les lecteurs d’écran n’épelleront pas les mots.
- En français, on ne met pas de majuscule à chaque mot d’un titre comme en anglais : seuls le premier mot et les noms propres en reçoivent une.
capitalizecorrespond donc rarement au style des titres français.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.