initial-letter is een CSS-eigenschap die de eerste letter selecteert van het element waarop deze wordt toegepast en het aantal regels specificeert dat de letter inneemt.
Misschien heb je zoiets gezien op nieuwssites, waar de eerste letter van een eerste alinea groter is dan de rest van de inhoud.
De truc met het stylen van de eerste letter van de inhoud was vroeger een kleine hack waarbij je de letter in een wikkelt en een klasse toepast om deze te stylen:
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
Dat werkt, maar het is meer HTML-opmaak dan we willen en verdeelt onze inhoud. Bovendien is het pijnlijk om die klasse handmatig te moeten toepassen wanneer u deze wilt gebruiken.
Dat initial-letterkomt binnen:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
Dat is schoner! Een andere benadering is om het in ::first-letterplaats daarvan toe te passen op de psuedo-selector:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )Heb je dat gezien? De initial-lettereigenschap berekent automatisch zowel de lettergrootte als het aantal regels dat nodig is om onze gestileerde initiaal te maken! Wilt u dat het precies 2, 3, 4 of meer regels beslaat? Vertel het aan het pand en het zal het zware werk doen.
Syntaxis en waarden
initial-letter: normal | ( );initial-letter accepteert de volgende waarden:
normal: Past geen schaaleffect toe op de eerste letter. Dit kan handig zijn voor het resetten van de waarde waar er een zou kunnen worden overgenomen van de cascade.: Hoeveel regels de letter moet innemen als negatieve waarden niet zijn toegestaan.: Hoeveel regels de letter moet zinken waar negatieve waarden niet zijn toegestaan. Dit is handig als u de letter lager moet plaatsen om lastige afstandsproblemen op te lossen, maar indien niet gespecificeerd, heeft het de waarde van
Voorbeelden
Het stylen van de beginletter kan worden gebruikt om een aantal mooie typografische ontwerpmethoden te bereiken. Houd er rekening mee dat de volgende voorbeelden momenteel alleen worden ondersteund door Safari.
Drop Caps zijn waarschijnlijk de meest bekende use-case:
Zie de beginletter van de pen: Drop Cap van Geoff Graham (@geoffgraham) op CodePen.
Raised Caps zijn een ander voorbeeld:
Zie de beginletter van de Pen: Raised Cap door Geoff Graham (@geoffgraham) op CodePen.
Block Caps luisteren terug naar oude sprookjes:
Zie de beginletter van de pen: Block Cap van Geoff Graham (@geoffgraham) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| Nee | Nee | Nee | Nee | TP * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nee | Nee | Nee | 14.0-14.4 * |
Verwant
::first-letter- Drop Caps-fragment
Meer informatie
- CSS Inline Layout Module Level 3: De officiële specificaties
- Jen Simmons Labs: demo's en voorbeelden van use cases
- Firefox-ticket: open ticket voor ondersteuning van de functie
- Internet Explorer-ticket: open ticket voor ondersteuning van de functie
