Lettera iniziale - Trucchi CSS

Anonim

initial-letter è una proprietà CSS che seleziona la prima lettera dell'elemento in cui è applicata e specifica il numero di righe occupate dalla lettera.

Potresti aver visto qualcosa di simile su siti di notizie, dove la prima lettera di un paragrafo iniziale è più grande del resto del contenuto.

Il sito del New Yorker definisce lo stile della lettera iniziale

Il trucco con lo stile della prima lettera di contenuto utilizzato per prendere un piccolo trucco in cui avvolgere la lettera in una e applicare una classe per modellarla :

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


Once upon a time in a faraway land…

Funziona, ma è più markup HTML di quanto desideriamo e rompe il nostro contenuto. Inoltre, è doloroso dover applicare quella classe manualmente ogni volta che vuoi usarla.

Ecco da dove initial-letterviene:

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


Once upon a time in a faraway land…

È più pulito! Un altro approccio consiste nell'applicarlo al ::first-letterselettore psuedo:

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

Hai visto che? La initial-letterproprietà calcola automaticamente sia la dimensione del carattere che il numero di righe necessarie per creare il nostro capolettera stilizzato! Vuoi che occupi esattamente 2, 3, 4 o più righe? Dillo alla proprietà e farà il lavoro pesante.

Modifica della proprietà per occupare 1, 2 e 4 righe

Sintassi e valori

initial-letter: normal | ( );

initial-letter accetta i seguenti valori:

  • normal: Non applica un effetto di ridimensionamento alla prima lettera. Questo può essere utile per reimpostare il valore in cui uno potrebbe essere ereditato dalla cascata.
  • : Quante righe deve occupare la lettera se non sono consentiti valori negativi.
  • : Quante righe deve affondare la lettera se non sono consentiti valori negativi. Questo è utile se è necessario posizionare la lettera più in basso per risolvere problemi di spaziatura complicati ma, se non specificato, assume il valore di

Esempi

Capolettera, maiuscolo e minuscolo utilizzando la lettera iniziale

Lo stile della lettera iniziale può essere utilizzato per ottenere alcuni metodi di progettazione tipografica fantasiosi. Tieni presente che i seguenti esempi sono attualmente supportati solo da Safari.

I capolettera sono probabilmente il caso d'uso più familiare:

Vedere la lettera iniziale della penna: capolettera di Geoff Graham (@geoffgraham) su CodePen.

I tappi rialzati sono un altro esempio:

Vedi la lettera iniziale della penna: Raised Cap di Geoff Graham (@geoffgraham) su CodePen.

I Block Caps richiamano vecchie favole:

Vedere la lettera iniziale della penna: Block Cap di Geoff Graham (@geoffgraham) su CodePen.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
No No No No TP *

Mobile / Tablet

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

Relazionato

  • ::first-letter
  • Snippet di capolettera

Maggiori informazioni

  • Modulo CSS Inline Layout Livello 3: le specificazioni ufficiali
  • Jen Simmons Labs: demo ed esempi di casi d'uso
  • Firefox Ticket: apri il ticket per supportare la funzione
  • Ticket di Internet Explorer: ticket aperto per supportare la funzionalità