La propriété CSS initial-letter va vous faciliter la tâche.
Prise en charge des navigateurs
Où pouvez-vous essayer initial-letter ? Elle est disponible dans Safari et dans Chrome 110. Dans Safari, la propriété a besoin du préfixe -webkit-. Il existe un problème ouvert concernant son implémentation dans Firefox.
Testez la compatibilité avec initial-letter avec:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Solutions actuelles
Comment pouvez-vous styliser une casquette de lancement dans CSS aujourd'hui ?
Le pseudo-élément ::first-letter fait partie du processus.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Toutefois, vous devrez probablement rechercher des propriétés telles que "float" lors du calcul de la taille de cette première lettre.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
L'introduction de nouveaux blocs CSS tels que lh pourrait faciliter certaines choses. Toutefois, leur compatibilité est également limitée (lh n'est actuellement compatible qu'avec Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Présentation de la lettre initiale
La propriété initial-letter vous permet de contrôler plus précisément le style des majuscules. Elle comporte deux valeurs séparées par un espace:
p::first-letter {
initial-letter: 3.5 3;
}
- Le premier argument définit la taille de la lettre et le nombre de lignes qu'elle occupera. La lettre s'agrandit tout en conservant ses proportions. Vous ne pouvez pas utiliser de valeur négative, mais vous pouvez utiliser des valeurs décimales.
- Le deuxième argument définit le récepteur de lettres. Il peut être considéré comme le décalage de l'emplacement de la lettre. La deuxième valeur est facultative et ne peut pas être négative. Si elle n'est pas présente, il suppose que la valeur de la taille de lettre est inférieure à l'entier le plus proche. Cela revient à utiliser le mot clé "drop". Le récepteur accepte également une autre valeur de mot clé, "raise", ce qui équivaut à un récepteur de 1.
Regardez cette démonstration pour savoir comment modifier les valeurs et voir comment cela affecte le style des majuscules.
Combinez-le avec ::first-line pour obtenir un résultat semblable à celui-ci.
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Vous pouvez également lui attribuer une border. Notez que l'exemple suivant utilise le mot clé "drop", qui serait la valeur par défaut s'il est omis et équivaut à 3 :
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Ajoutez peut-être background ou box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
Vous pouvez aussi rogner l'arrière-plan en fonction du texte:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Les possibilités sont nombreuses.
Vous disposez désormais d'un contrôle plus précis du style des majuscules avec initial-letter. Aimeriez-vous ajouter des majuscules à votre typographie ? Comment pourriez-vous les styliser ? Contactez-nous.