Indledende bogstav - CSS-tricks

Anonim

initial-letter er en CSS-egenskab, der vælger det første bogstav i elementet, hvor det anvendes, og specificerer antallet af linjer, som brevet indtager.

Du har måske set noget lignende på nyhedswebsteder, hvor første bogstav i et ledende afsnit er større end resten af ​​indholdet.

New Yorker's site stiler det første brev

Tricket med styling af det første bogstav med indhold, der bruges til at tage et lille hack, hvor du pakker brevet ind i og anvender en klasse for at 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 mere HTML-markering, end vi ønsker, og bryder vores indhold op. Plus, det er smertefuldt at skulle anvende denne klasse manuelt, når som helst du vil bruge den.

Det hvor initial-letterkommer ind:

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


Once upon a time in a faraway land…

Det er renere! En anden tilgang er at anvende den på ::first-letterpsuedo-vælgeren i stedet:

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

Så du det? Den initial-letterejendom beregner automatisk både skriftstørrelse og antallet af linjer, der er nødvendige for at skabe vores stiliseret uncial! Vil du have den til at tage nøjagtigt 2, 3, 4 eller flere linjer? Fortæl ejendommen, og det løfter tungt.

Ændring af ejendommen til at indtage 1, 2 og 4 linjer

Syntaks og værdier

initial-letter: normal | ( );

initial-letter accepterer følgende værdier:

  • normal: Anvender ikke en skaleringseffekt på det første bogstav. Dette kan være nyttigt til nulstilling af værdien, hvor man kan nedarves fra kaskaden.
  • : Hvor mange linjer brevet skal indtage, hvor negative værdier ikke er tilladt.
  • : Hvor mange linjer brevet skal synke, hvor negative værdier ikke er tilladt. Dette er praktisk, hvis du har brug for at placere brevet lavere for at imødekomme vanskelige afstandsproblemer, men hvis det ikke er angivet, tager det værdien af

Eksempler

Drop Cap, Raised Cap og Block Cap ved hjælp af første bogstav

Styling af det første brev kan bruges til at opnå nogle smarte typografiske designmetoder. Bemærk, at følgende eksempler kun understøttes i øjeblikket af Safari.

Drop Caps er sandsynligvis den mest velkendte brugssag:

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

Raised Caps er et andet eksempel:

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

Block Caps harken tilbage til gamle eventyr:

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

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
Ingen Ingen Ingen Ingen TP *

Mobil / tablet

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

Relaterede

  • ::first-letter
  • Drop Caps-uddrag

Mere information

  • CSS Inline Layout Modul Niveau 3: De officielle specifikationer
  • Jen Simmons Labs: Demoer og eksempler på brugssager
  • Firefox Ticket: Åben billet til understøttelse af funktionen
  • Internet Explorer-billet: Åben billet til understøttelse af funktionen