initial-letter ir CSS rekvizīts, kas izvēlas elementa pirmo burtu, kur tas tiek lietots, un norāda burtu aizņemto rindu skaitu.
Iespējams, kaut ko tādu esat redzējis ziņu vietnēs, kur vadošās rindkopas pirmais burts ir lielāks nekā pārējais saturs.
Pirmā satura burta veidošanas triks, kas tika izmantots, lai nedaudz uzlauztu, kur jūs iesaiņojat burtu un izmantojat klasi, lai to veidotu:
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
Tas darbojas, bet tas ir vairāk HTML marķējums, nekā mēs vēlamies, un sadala mūsu saturu. Turklāt ir sāpīgi, ka šī klase ir jāpielieto manuāli jebkurā laikā, kad vēlaties to izmantot.
Tas, kur initial-letterienāk:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
Tas ir tīrāks! Vēl viena pieeja ir tā vietā piemērot ::first-letterpsuedo-selector:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )Vai tu to redzēji? initial-letterĪpašums automātiski aprēķina gan fonta lielumu un skaitu, kas nepieciešamas, lai izveidotu savu stilizētu drop vāciņu! Vai vēlaties, lai tas aizņem tieši 2, 3, 4 vai vairāk rindu? Pastāstiet īpašumam, un tas smagi pacels.
Sintakse un vērtības
initial-letter: normal | ( );initial-letter pieņem šādas vērtības:
normal: Pirmajam burtam nepiemēro mērogošanas efektu. Tas var būt noderīgi, lai atiestatītu vērtību, ja tā varētu būt mantota no kaskādes.: Cik rindiņu burtam vajadzētu aizņemt, ja nav atļautas negatīvas vērtības.: Cik daudz burtu vajadzētu nogrimt vietās, kur nav atļautas negatīvas vērtības. Tas ir ērti, ja burts jānovieto zemāk, lai pielāgotos sarežģītām atstarpju problēmām, bet, ja tas nav norādīts, tas aizņem vērtību
Piemēri
Sākotnējā burta veidošanu var izmantot, lai panāktu dažas izdomātas tipogrāfiskās noformēšanas metodes. Lūdzu, ņemiet vērā, ka tālāk minētos piemērus pašlaik atbalsta tikai Safari.
Drop Caps , iespējams, ir vispazīstamākais lietošanas gadījums:
Skatiet pildspalvas sākotnējo burtu: Geoff Graham (@geoffgraham) Drop Cap vietnē CodePen.
Vēl viens piemērs ir Raised Caps :
Skatiet pildspalvas sākotnējo vēstuli: Geoff Graham (@geoffgraham) paaugstināts vāciņš vietnē CodePen.
Bloķējiet vāciņus, lai atgrieztos pie vecajām pasakām:
Skatiet pildspalvas sākotnējo burtu: bloķējiet vāciņu no Geoff Graham (@geoffgraham) vietnē CodePen.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| Nē | Nē | Nē | Nē | TP * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nē | Nē | Nē | 14,0–14,4 * |
Saistīts
::first-letter- Drop Caps fragments
Vairāk informācijas
- CSS iekšējā izkārtojuma modulis 3. līmenis: oficiālās specifikas
- Jen Simmons Labs: demonstrācijas un lietošanas gadījumu piemēri
- Firefox biļete: Atvērta biļete, lai atbalstītu šo funkciju
- Internet Explorer biļete: atveriet biļeti, lai atbalstītu šo funkciju