Počáteční písmeno - Triky CSS

Anonim

initial-letter je vlastnost CSS, která vybírá první písmeno prvku, kde je aplikován, a určuje počet řádků, které písmeno zabírá.

Možná jste něco takového mohli vidět na zpravodajských webech, kde je první písmeno úvodního odstavce větší než zbytek obsahu.

Web Newyorčana stylizuje počáteční písmeno

Trik se stylizováním prvního písmene obsahu umožňoval malý hack, kde písmeno zabalíte do písmene a použijete třídu k jeho stylizaci:

/* 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 více značek HTML, než chceme, a rozbíjí náš obsah. Navíc je bolestné použít tuto třídu ručně, kdykoli ji chcete použít.

Že kde initial-letterpřijde:

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


Once upon a time in a faraway land…

To je čistší! Dalším přístupem je ::first-lettermísto toho použít selektor psuedo:

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

Viděl jsi to? initial-letterVlastnost automaticky spočítá jak velikost písma a počet řádků potřebných k vytvoření naší stylizované iniciály! Chcete, aby zabral přesně 2, 3, 4 nebo více řádků? Řekněte to majetku a bude to dělat těžké zvedání.

Změna vlastnosti na 1, 2 a 4 řádky

Syntaxe a hodnoty

initial-letter: normal | ( );

initial-letter přijímá následující hodnoty:

  • normal: Na první písmeno nepoužije měřítko. To může být užitečné pro resetování hodnoty tam, kde by se člověk mohl zdědit z kaskády.
  • : Kolik řádků by písmeno mělo zabírat tam, kde záporné hodnoty nejsou povoleny.
  • : Kolik řádků by písmeno mělo klesnout tam, kde záporné hodnoty nejsou povoleny. To je užitečné, pokud potřebujete umístit písmeno níže, aby se přizpůsobily složitým problémům s mezerami, ale pokud není uvedeno, má hodnotu

Příklady

Drop Cap, Raised Cap a Block Cap pomocí počátečního písmene

Styling počátečního písmene lze použít k dosažení některých efektních metod typografického návrhu. Následující příklady jsou aktuálně podporovány pouze Safari.

Drop Caps jsou pravděpodobně nejznámější případ použití:

Viz počáteční písmeno pera: Drop Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Dalším příkladem jsou zvýšené čepice :

Viz počáteční písmeno pera: Raised Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Block Caps harken zpět ke starým pohádkám:

Viz počáteční písmeno pera: Block Cap od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
Ne Ne Ne Ne TP *

Mobilní / Tablet

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

Příbuzný

  • ::first-letter
  • Fragment kapátka

Více informací

  • Modul CSS Inline Layout Level 3: Oficiální specifikace
  • Jen Simmons Labs: Ukázky a příklady případů použití
  • Firefox Ticket: Otevřete lístek pro podporu této funkce
  • Vstupenka do aplikace Internet Explorer: Otevřená vstupenka na podporu této funkce