initial-letter est une propriété CSS qui sélectionne la première lettre de l'élément où elle est appliquée et spécifie le nombre de lignes occupées par la lettre.
Vous avez peut-être vu quelque chose comme ça sur des sites d'actualités, où la première lettre d'un premier paragraphe est plus grande que le reste du contenu.
L'astuce avec le style de la première lettre de contenu utilisé pour prendre un petit hack où vous enveloppez la lettre dans un et appliquez une classe pour la styliser :
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
Cela fonctionne, mais c'est plus de balisage HTML que nous ne le souhaitons et décompose notre contenu. De plus, il est difficile de devoir appliquer cette classe manuellement chaque fois que vous souhaitez l'utiliser.
C'est là initial-letterqu'intervient:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
C'est plus propre! Une autre approche consiste à l'appliquer au ::first-lettersélecteur psuedo à la place:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )As-tu vu ça? La initial-letterpropriété calcule automatiquement à la fois la taille de la police et le nombre de lignes nécessaires pour créer notre lettrine stylisée! Vous voulez qu'il occupe exactement 2, 3, 4 lignes ou plus? Dites à la propriété et elle fera le gros du travail.
Syntaxe et valeurs
initial-letter: normal | ( );initial-letter accepte les valeurs suivantes:
normal: N'applique pas d'effet de mise à l'échelle sur la première lettre. Cela peut être utile pour réinitialiser la valeur qui pourrait être héritée de la cascade.: Combien de lignes la lettre doit occuper lorsque les valeurs négatives ne sont pas autorisées.: Combien de lignes la lettre doit couler là où les valeurs négatives ne sont pas autorisées. Ceci est pratique si vous devez positionner la lettre plus bas pour tenir compte des problèmes d'espacement délicats, mais, s'il n'est pas spécifié, il prend la valeur de
Exemples
Le style de la lettre initiale peut être utilisé pour obtenir des méthodes de conception typographique sophistiquées. Veuillez noter que les exemples suivants ne sont actuellement pris en charge que par Safari.
Les lettrines sont probablement le cas d'utilisation le plus courant:
Voir la lettre initiale de Pen: Drop Cap de Geoff Graham (@geoffgraham) sur CodePen.
Les majuscules surélevées sont un autre exemple:
Voir la lettre initiale Pen: Raised Cap par Geoff Graham (@geoffgraham) sur CodePen.
Block Caps rappelle les vieux contes de fées:
Voir la lettre initiale de Pen: Block Cap de Geoff Graham (@geoffgraham) sur CodePen.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| Non | Non | Non | Non | TP * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| Non | Non | Non | 14,0-14,4 * |
En rapport
::first-letter- Extrait de Drop Caps
Plus d'information
- Module de mise en page en ligne CSS niveau 3: les spécifications officielles
- Jen Simmons Labs: Démos et exemples de cas d'utilisation
- Firefox Ticket: ticket ouvert pour prendre en charge la fonctionnalité
- Ticket Internet Explorer: ticket ouvert pour la prise en charge de la fonctionnalité