Cara yang Dapat Diakses
Taruhan terbaik Anda adalah menonton video 5 menit Ethan dan kemudian merujuk ini:
Cara lintas-browser (markup ekstra)
Cukup bungkus karakter pertama paragraf dalam satu rentang, lalu targetkan rentang tersebut dengan CSS dan gaya.
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; )Cara CSS3 (tanpa markup tambahan)
Targetkan karakter pertama dari paragraf pertama menggunakan pemilih kelas semu. Tidak diperlukan markup tambahan, tetapi tidak ada dukungan 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; )The initial-lettercara
Dukungan browser initial-lettercukup jarang pada saat penulisan ini, tetapi dapat digunakan untuk menghitung jumlah baris yang harus ditempati oleh huruf drop capped dan ukuran font daripada melakukannya sendiri.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| Tidak | Tidak | Tidak | Tidak | TP * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Tidak | Tidak | Tidak | 14.0-14.4 * |