La text-transformpropriété en CSS contrôle la casse du texte et la capitalisation.
.lowercase ( text-transform: lowercase; )Valeurs de transformation de texte
lowercaserend toutes les lettres du texte sélectionné en minuscules.uppercasemet toutes les lettres du texte sélectionné en majuscules.capitalizemet en majuscule la première lettre de chaque mot dans le texte sélectionné.nonelaisse la casse et les majuscules du texte exactement telles qu'elles ont été saisies.inheritdonne au texte la casse et la capitalisation de son parent.
La démo ci - dessous montre lowercase, uppercaseet capitalizeen cours d' utilisation. Jetez un œil à l'onglet HTML pour voir comment le texte a été écrit à l'origine, puis revenez à l'onglet des résultats pour le voir une fois le CSS appliqué.
Voir le Pen 0f4293fce0d14aafc3818c950ab0ded3 par mariemosley (@mariemosley) sur CodePen.
Points d'interêts
capitalizemettra en majuscule les mots qui apparaissent entre guillemets simples ou doubles, et la première lettre après un tiret. Il ne mettra pas en majuscule la première lettre après un nombre, donc des dates comme «4 février 2015» ne se transformeront pas en «4 février 2015».
capitalizen'affecte que les premières lettres des mots. Cela ne changera pas la casse du reste des lettres d'un mot. Par exemple, si vous avez déjà capitalizeun mot en majuscules, les autres lettres du mot ne passeront pas en minuscules. C'est bien lorsque votre texte comprend un acronyme ou une abréviation qui ne doit pas inclure de lettres minuscules.
CSS ne peut pas faire «cas de titre», le style de capitalisation utilisé dans les titres de livres, films, chansons et poèmes, où les articles sont en minuscules (comme dans «Raiders of the Lost Ark»). Mais, il existe des solutions JavaScript pour la casse du titre, y compris toTitleCase () de David Gouch.
Plus d'information
- text-transform chez MDN
- text-transform dans la spécification W3C
- Remarques sur l'accessibilité du texte en majuscules à partir de WebAIM
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | Tout | Tout | Tout | Tout | Tout | Tout |
Firefox prend en charge les règles de capitalisation spécifiques à la langue pour les langues turques, l'allemand, le néerlandais et le grec qui ne sont pas prises en charge par d'autres navigateurs. Firefox est également le seul navigateur qui prend en charge text-transform: full-width;, ce qui peut aider à améliorer la lisibilité du texte qui comprend un mélange de scripts latins et d'Asie de l'Est. Voir les détails sur MDN.