Litera initiala - CSS-Tricks

Anonim

initial-letter este o proprietate CSS care selectează prima literă a elementului în care este aplicată și specifică numărul de linii pe care le ocupă litera.

Este posibil să fi văzut așa ceva pe site-urile de știri, unde prima literă a unui paragraf principal este mai mare decât restul conținutului.

Site-ul New Yorkerului stilizează litera inițială

Trucul cu stilul primei litere de conținut folosit pentru a face un mic hack în care înfășurați litera într-un și aplicați o clasă pentru a o stiliza:

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


Once upon a time in a faraway land…

Acest lucru funcționează, dar este mai mult markup HTML decât vrem și ne rupe conținutul. În plus, este greu să aplici acea clasă manual oricând vrei să o folosești.

Acolo unde initial-letterintră:

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


Once upon a time in a faraway land…

E mai curat! O altă abordare este aplicarea acestuia la ::first-letterpsuedo-selector în schimb:

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

Ai văzut asta? initial-letterProprietatea calculează automat atât dimensiunea fontului și numărul de linii necesare pentru a crea capac nostru picătură stilizat! Vrei să ocupe exact 2, 3, 4 sau mai multe linii? Spuneți proprietății și va face greutatea.

Schimbarea proprietății pentru a ocupa 1, 2 și 4 linii

Sintaxă și valori

initial-letter: normal | ( );

initial-letter acceptă următoarele valori:

  • normal: Nu aplică un efect de scalare pe prima literă. Acest lucru poate fi util pentru resetarea valorii în care s-ar putea moșteni din cascadă.
  • : Câte linii ar trebui să ocupe litera acolo unde valorile negative nu sunt permise.
  • : Câte linii ar trebui să scadă litera acolo unde valorile negative nu sunt permise. Acest lucru este la îndemână dacă trebuie să poziționați litera mai jos pentru a rezolva problemele de spațiere dificile, dar, dacă nu este specificat, ia valoarea

Exemple

Plasați capacul, capacul ridicat și capacul de blocare folosind litera inițială

Stilul literei inițiale poate fi folosit pentru a realiza câteva metode tipografice fanteziste. Vă rugăm să rețineți că următoarele exemple sunt acceptate doar în prezent de Safari.

Drop Caps sunt probabil cel mai familiar caz de utilizare:

Vezi litera inițială Pen: Drop Cap de Geoff Graham (@geoffgraham) pe CodePen.

Capacele crescute sunt un alt exemplu:

Vezi litera inițială Pen: Raised Cap de Geoff Graham (@geoffgraham) pe CodePen.

Capace blocate revin la basmele vechi:

Vezi litera inițială Pen: Block Cap de Geoff Graham (@geoffgraham) pe CodePen.

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 *

Legate de

  • ::first-letter
  • Fragmentul Drop Caps

Mai multe informatii

  • CSS Inline Layout Module Nivelul 3: Specificațiile oficiale
  • Jen Simmons Labs: Demonstrații și exemple de cazuri de utilizare
  • Firefox Ticket: Deschideți biletul pentru acceptarea funcției
  • Bilet Internet Explorer: Deschideți biletul pentru acceptarea funcției