Začiatočné písmeno - Triky CSS

Anonim

initial-letter je vlastnosť CSS, ktorá vyberie prvé písmeno prvku, kde sa použije, a určuje počet riadkov, ktoré písmeno zaberá.

Možno ste niečo také mohli vidieť na spravodajských weboch, kde je prvé písmeno úvodného odseku väčšie ako zvyšok obsahu.

Stránka Newyorčana upravuje štýl začiatočného písmena

Trik so štýlom prvého písmena obsahu zvyčajne spôsobil malý hack, keď písmeno zalomíte písmenom a a použijete triedu na jeho štýl:

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


Once upon a time in a faraway land…

To funguje, ale je to viac značiek HTML, ako chceme, a rozdeľuje náš obsah. Navyše je bolestivé, že musíte túto triedu aplikovať manuálne, kedykoľvek ju chcete použiť.

Že kde initial-letterpríde:

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


Once upon a time in a faraway land…

To je čistejšie! Ďalším prístupom je použiť ho ::first-letternamiesto selektora psuedo:

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

Videl si to? initial-letterVlastnosť automaticky spočíta ako veľkosť písma a počet riadkov potrebných na vytvorenie našej štylizované iniciálky! Chcete, aby zabral presne 2, 3, 4 alebo viac riadkov? Povedzte to majetku a urobí to ťažké zdvíhanie.

Zmena vlastníctva na obsadzovanie 1, 2 a 4 riadkov

Syntax a hodnoty

initial-letter: normal | ( );

initial-letter akceptuje nasledujúce hodnoty:

  • normal: Na prvé písmeno neuplatní efekt zmeny mierky. To môže byť užitočné pri resetovaní hodnoty tam, kde by sa dalo dediť z kaskády.
  • : Koľko riadkov má písmeno zaberať tam, kde nie sú povolené záporné hodnoty.
  • : Koľko riadkov by malo písmeno klesnúť tam, kde nie sú povolené záporné hodnoty. Je to užitočné, ak potrebujete umiestniť písmeno nižšie, aby sa prispôsobili zložitým problémom s medzerami, ale ak nie je uvedené, bude mať hodnotu

Príklady

Poklop, zvýšený uzáver a blokovací uzáver pomocou začiatočného písmena

Štýl počiatočného písmena možno použiť na dosiahnutie niektorých efektných metód typografického návrhu. Upozorňujeme, že nasledujúce príklady sú v súčasnosti podporované iba prehliadačom Safari.

Drop Caps sú pravdepodobne najznámejšie prípady použitia:

Pozrite si začiatočné písmeno pera: Drop Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Ďalším príkladom sú zvýšené čiapky :

Pozrite si začiatočné písmeno pera: Raised Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Block Caps sa vracajú k starým rozprávkam:

Pozrite si začiatočné písmeno pera: Block Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
Nie Nie Nie Nie TP *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
Nie Nie Nie 14,0 - 14,4 *

Súvisiace

  • ::first-letter
  • Fragment kvapiek

Viac informácií

  • Modul CSS Inline Layout Level 3: Oficiálne špecifikácie
  • Jen Simmons Labs: Ukážky a príklady prípadov použitia
  • Vstupenka do prehliadača Firefox: Otvorená vstupenka na podporu tejto funkcie
  • Vstupenka do programu Internet Explorer: Otvorená vstupenka na podporu tejto funkcie