Första bokstaven - CSS-tricks

Anonim

initial-letter är en CSS-egenskap som markerar den första bokstaven i elementet där den tillämpas och anger antalet rader som bokstaven upptar.

Du kanske har sett något liknande på nyhetssajter, där första bokstaven i ett ledande avsnitt är större än resten av innehållet.

New Yorker-webbplatsen utformar den första bokstaven

Tricket med att utforma den första bokstaven som används för att ta ett litet hack där du slår in bokstaven i en och använder en klass för att utforma den:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Det fungerar, men det är mer HTML-markering än vi vill och bryter upp vårt innehåll. Dessutom är det ont att behöva tillämpa den klassen manuellt när du vill använda den.

Det där initial-letterkommer in:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Det är renare! Ett annat tillvägagångssätt är att tillämpa det på ::first-letterpsuedo-väljaren istället:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Såg du att? Den initial-letteregenskapen beräknar automatiskt både teckenstorlek och antalet linjer som behövs för att skapa vår stiliserade anfang! Vill du att det ska ta upp exakt 2, 3, 4 eller fler rader? Berätta för fastigheten så kommer den att lyfta tungt.

Ändra fastigheten till 1, 2 och 4 rader

Syntax och värden

initial-letter: normal | ( );

initial-letter accepterar följande värden:

  • normal: Tillämpar inte en skalningseffekt på första bokstaven. Detta kan vara användbart för att återställa värdet där man kan ärva från kaskaden.
  • : Hur många rader bokstaven ska uppta där negativa värden inte är tillåtna.
  • : Hur många rader bokstaven ska sjunka där negativa värden inte är tillåtna. Det här är praktiskt om du behöver placera bokstaven lägre för att ta itu med svåra avståndsproblem, men om det inte anges tar det värdet på

Exempel

Släpp keps, upphöjd keps och blockkeps med initial bokstav

Styling av den första bokstaven kan användas för att uppnå några snygga typografiska designmetoder. Observera att följande exempel för närvarande endast stöds av Safari.

Drop Caps är förmodligen det mest kända användningsfallet:

Se pennens första bokstav: Drop Cap av Geoff Graham (@geoffgraham) på CodePen.

Raised Caps är ett annat exempel:

Se pennens första bokstav: Raised Cap av Geoff Graham (@geoffgraham) på CodePen.

Block Caps harken tillbaka till gamla sagor:

Se pennens första bokstav: Block Cap av Geoff Graham (@geoffgraham) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
Nej Nej Nej Nej TP *

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
Nej Nej Nej 14,0-14,4 *

Relaterad

  • ::first-letter
  • Drop Caps-kodavsnitt

Mer information

  • CSS Inline Layout Module Level 3: De officiella specifikationerna
  • Jen Simmons Labs: Demos och exempel på användningsfall
  • Firefox Ticket: Öppna biljett för att stödja funktionen
  • Internet Explorer-biljett: Öppna biljett för att stödja funktionen