Calea accesibilă
Cel mai bun pariu este să vizionați videoclipul de 5 minute al lui Ethan și apoi să faceți referire la acest lucru:
Modul cross-browser (marcaj suplimentar)
Doar înfășurați primul caracter al paragrafului într-un interval, apoi vizați intervalul cu CSS și stil.
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; )Modul CSS3 (fără marcaj suplimentar)
Vizați primul caracter al primului paragraf folosind selectoare de pseudo-clasă. Nu este nevoie de niciun markup suplimentar, dar nu suport 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; )initial-lettermodul
Suportul browserului pentru initial-lettereste destul de rar în momentul scrierii, dar poate fi folosit pentru a calcula numărul de linii pe care ar trebui să le ocupe litera cu majuscule și dimensiunea fontului, în loc să facă asta pe cont propriu.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| Nu | Nu | Nu | Nu | TP * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| Nu | Nu | Nu | 14.0-14.4 * |