Første bokstav - CSS-triks

Anonim

initial-letter er en CSS-egenskap som velger den første bokstaven i elementet der den brukes, og spesifiserer antall linjer bokstaven opptar.

Du har kanskje sett noe slikt på nyhetssider, der første bokstav i et ledende avsnitt er større enn resten av innholdet.

New Yorker-nettstedet stiler den første bokstaven

Trikset med å stylere den første bokstaven som ble brukt til å ta et lite hack der du vikler inn brevet i en og bruker en klasse for å style det:

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


Once upon a time in a faraway land…

Det fungerer, men det er mer HTML-markering enn vi ønsker, og bryter innholdet vårt. I tillegg er det vondt å måtte bruke den klassen manuelt når som helst du vil bruke den.

Det der initial-letterkommer inn:

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


Once upon a time in a faraway land…

Det er renere! En annen tilnærming er å bruke den på ::first-letterpsuedo-velgeren i stedet:

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

Så du det? Den initial-letterEiendommen beregner automatisk både skriftstørrelsen og antall linjer for å lage vår stiliserte dråpe cap! Vil du at den skal ta nøyaktig 2, 3, 4 eller flere linjer? Fortell eiendommen, og den vil løfte tungt.

Endrer eiendommen til å okkupere 1, 2 og 4 linjer

Syntaks og verdier

initial-letter: normal | ( );

initial-letter aksepterer følgende verdier:

  • normal: Bruker ikke en skaleringseffekt på første bokstav. Dette kan være nyttig for å tilbakestille verdien der en kan bli arvet fra kaskaden.
  • : Hvor mange linjer bokstaven skal oppta der negative verdier ikke er tillatt.
  • : Hvor mange linjer bokstaven skal synke der negative verdier ikke er tillatt. Dette er praktisk hvis du trenger å plassere bokstaven lavere for å imøtekomme vanskelige avstandsproblemer, men hvis ikke spesifisert, tar det verdien av

Eksempler

Drop Cap, Raised Cap og Block Cap ved hjelp av første bokstav

Styling av første bokstav kan brukes til å oppnå noen fancy typografiske designmetoder. Vær oppmerksom på at følgende eksempler for øyeblikket bare støttes av Safari.

Drop Caps er trolig den mest kjente brukssaken:

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

Raised Caps er et annet eksempel:

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

Block Caps harken tilbake til gamle eventyr:

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

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
Nei Nei Nei Nei TP *

Mobil / nettbrett

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

I slekt

  • ::first-letter
  • Drop Caps-kodebit

Mer informasjon

  • CSS Inline Layout Module Nivå 3: De offifiske spesifikasjonene
  • Jen Simmons Labs: Demoer og eksempler på brukssaker
  • Firefox Ticket: Åpen billett for å støtte funksjonen
  • Internet Explorer-billett: Åpen billett for å støtte funksjonen