Il modo accessibile
La soluzione migliore è guardare il video di 5 minuti di Ethan e quindi fare riferimento a questo:
Il modo cross-browser (markup extra)
Basta racchiudere il primo carattere del paragrafo in un intervallo, quindi indirizzare l'intervallo con CSS e stile.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Il modo CSS3 (nessun markup aggiuntivo)
Scegli come target il primo carattere del primo paragrafo utilizzando i selettori di pseudo classe. Nessun markup aggiuntivo necessario, ma nessun supporto IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Il initial-lettermodo
Il supporto del browser per initial-letterè piuttosto scarso al momento della stesura di questo articolo, ma può essere utilizzato per calcolare il numero di righe che la lettera maiuscola dovrebbe occupare e la dimensione del carattere invece di farlo da soli.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )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 * |