CSS est un langage de balisage grâce auquel vous pouvez modifier l’apparence et la mise en forme de votre texte. L’attribut CSS UPPERCASE garantit que toutes les lettres du passage sélectionné sont rendues en majuscules plutôt qu’en minuscules ou en casse de titre. CSS UPPERCASE suivra toujours d’autres paramètres de formatage tels que la police et la taille des polices, mais transformera simplement toutes les lettres minuscules en leur variante majuscule.

En utilisant cet attribut CSS/HTML, vous pouvez modifier la mise en forme de n’importe quel mot dans une chaîne sans avoir à modifier le texte lui-même.

Voyons comment utiliser cette fonction de transformation de texte en majuscule.

Pourquoi utiliseriez-vous CSS MAJUSCULE ?

Il existe quelques cas où vous pouvez utiliser l’attribut CSS UPPERCASE. Par exemple, si vous souhaitez que tout le texte de votre site Web soit en majuscule, vous pouvez utiliser cet attribut sur la balise

pour obtenir cet effet. Vous pouvez également l’utiliser pour les en-têtes ou les titres que vous souhaitez distinguer du reste du texte de la page.

La prise en charge des navigateurs pour CSS MAJUSCULES est presque universelle, la plupart des navigateurs modernes la prenant en charge. Cependant, il existe quelques navigateurs plus anciens qui ne prennent pas entièrement en charge cet attribut. Si vous vous inquiétez de la compatibilité des navigateurs, vous pouvez utiliser une bibliothèque, telle que Modernizr, pour ajouter la prise en charge de CSS UPPERCASE aux anciens navigateurs.

CSS UPPERCASE est souvent utilisé pour formater le texte saisi par un utilisateur. Par exemple, l’utilisateur peut saisir le nom « maria » et vous pouvez l’afficher sous la forme « MARIA ».

Comment utilisez-vous la transformation de texte MAJUSCULE en CSS ?

La fonction CSS UPPERCASE est en fait l’attribut text-transform. Examinons de plus près la propriété et la fonction de transformation de texte CSS.

Par exemple, pour utiliser text-transform sur un H2, vous devrez ajouter la ligne de code suivante à votre feuille de style :

H2 {transformation de texte : majuscule} ;

Cela garantira que tout le texte du passage sélectionné est rendu en majuscules. Vous pouvez également utiliser la fonction de transformation de texte pour convertir du texte en minuscules ou en casse de titre.

• Transformer le texte en minuscules : cela convertira tout en minuscules.
• Text transform titlecase : cela utilisera la casse du titre sur le texte, en modifiant la première lettre de chaque mot.

Voici un exemple.

• Texte original: Bonjour le monde
• Majuscule: BONJOUR LE MONDE
• Minuscule: Bonjour le monde
• Casse du titre: Bonjour le monde

Donc, si vous voulez une lettre majuscule devant chaque mot, vous utiliserez l’attribut « text-transform: titlecase ».

Pourquoi les majuscules sont-elles importantes ?

Les majuscules sont importantes car elles peuvent changer le ton et la conception d’une phrase. Par exemple, prenez la phrase « Je vais au magasin ». Si vous mettez une majuscule à chaque mot de la phrase, cela prend un ton plus formel : « Je vais au magasin ».

Dans certains cas, mettre une majuscule à chaque mot d’une phrase peut le faire paraître plus important ou emphatique : « Je vais au magasin ». vs « Je vais au magasin. »

Les majuscules peuvent également être utilisées pour mettre l’accent dans une phrase. Par exemple, vous voudrez peut-être écrire un titre en majuscules pour le faire ressortir : « COMMENT UTILISER CSS MAJUSCULES ».

CSS concerne le formatage et la publication. Ainsi, souvent, CSS est utilisé pour la clarté ainsi que les principes fondamentaux de la conception. Vous pourriez constater que vous voulez que tous vos H2 soient en majuscules simplement pour les distinguer du texte environnant. Mais vous devrez peut-être également ajouter des attributs de casse de titre aux H2 si votre texte n’est pas correctement formaté.

Quels sont les avantages d’utiliser CSS MAJUSCULE ?

Dans le développement Web, vous souhaitez souvent modifier la mise en forme d’un texte sélectionné sans réellement modifier les données brutes. L’utilisation de CSS UPPERCASE plutôt que d’essayer de modifier le texte lui-même préservera le texte d’origine pour un formatage futur.

De plus, l’attribut CSS UPPERCASE est très facile à utiliser. Avec quelques lignes de code simples, vous pouvez rapidement et facilement modifier la mise en forme de n’importe quel texte sur votre page.

Si vous décidez de modifier votre page à l’avenir, vous pouvez facilement le faire en modifiant simplement votre attribut de transformation de texte en minuscules ou en casse de titre.

Enfin, la compatibilité des navigateurs pour la transformation de texte est presque universelle. Cela signifie que vous pouvez l’utiliser en toute confiance sur la plupart des navigateurs Web sans avoir à vous soucier des problèmes de compatibilité.

Quels sont les inconvénients de l’utilisation de CSS MAJUSCULES ?

Le seul véritable inconvénient de l’utilisation de CSS MAJUSCULES est qu’il ne fonctionne pas avec tous les navigateurs. Si vous vous inquiétez de la compatibilité du navigateur, vous pouvez utiliser une bibliothèque telle que Modernizr pour ajouter la prise en charge de la transformation de texte aux anciens navigateurs.

Les alternatives à l’utilisation de CSS MAJUSCULES incluent :

• À l’aide d’un HTML étiqueter comme ou pour mettre le texte en gras.
• Utilisation du CSS poids de la police propriété permettant d’alourdir le texte.
• Utilisation du CSS flotter propriété pour aligner le texte à gauche ou à droite d’une page ou d’une colonne.
• Utilisation du CSS hauteur de la ligne propriété pour augmenter ou diminuer l’espacement entre les lignes de texte.
• Utilisation du CSS texte-décoration propriété pour souligner, surligner ou barrer du texte.

Ceux-ci servent tous un objectif similaire – attirer l’attention sur un morceau de texte. Cependant, ils ne mettent pas les lettres en majuscules.

En PHP, vous pouvez utiliser des fonctions telles que strtolower() (minuscule) et strtoupper (majuscule) pour également passer une chaîne en minuscule ou en majuscule sans modifier les données brutes non formatées.

Pourquoi CSS MAJUSCULES ne fonctionne-t-il pas ?

Il y a quelques raisons potentielles pour lesquelles CSS UPPERCASE pourrait ne pas fonctionner pour vous.

La première est que vous ne l’utilisez peut-être pas correctement. Assurez-vous que vous utilisez la syntaxe correcte et que vous l’avez appliquée au texte que vous souhaitez modifier.

La deuxième possibilité est que vous la redéfinissiez ailleurs dans votre CSS. En matière de CSS, le dernier attribut défini sera celui utilisé. L’attribut text-transform sera hérité, mais l’enfant peut le remplacer.

Enfin, vous pouvez avoir du code en cache qui remplace vos modifications. Si vous utilisez SCSS plutôt que CSS, assurez-vous d’avoir reconstruit et actualisé tout votre code.

Conclusion : formater du texte via CSS

Vous saviez probablement déjà que vous pouviez utiliser les fonctions CSS pour modifier l’apparence de votre texte. Cependant, vous n’avez peut-être pas réalisé que vous pouvez modifier le texte réel via la transformation de texte. Il y a beaucoup de choses que vous pouvez faire en CSS seul.

Si vous voulez apprendre le HTML et le CSS, le moment est venu de commencer. Découvrez d’autres options de mise en forme, telles que le barré CSS, ou inscrivez-vous à un cours Udemy CSS.