Pierwsza litera - CSS-Tricks

Anonim

initial-letter to właściwość CSS, która wybiera pierwszą literę elementu, w którym jest stosowana, i określa liczbę wierszy zajmowanych przez tę literę.

Być może widzieliście coś takiego w witrynach z wiadomościami, w których pierwsza litera początkowego akapitu jest większa niż reszta treści.

Witryna New Yorkera stylizuje pierwszą literę

Sztuczka ze stylizowaniem pierwszej litery treści, która była używana do małego hacka, polegająca na zawijaniu litery w a i zastosowaniu klasy, aby ją stylizować:

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


Once upon a time in a faraway land…

To działa, ale jest to więcej znaczników HTML niż chcemy i rozbija naszą zawartość. Poza tym bólem jest ręczne stosowanie tej klasy za każdym razem, gdy chcesz jej użyć.

To gdzie initial-letterjest:

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


Once upon a time in a faraway land…

To czystsze! Innym podejściem jest zastosowanie go do ::first-letterpseudo-selektora:

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

Widziałeś to? initial-letterNieruchomość automatycznie oblicza zarówno wielkość czcionki i liczbę linii potrzebnych do stworzenia naszego stylizowane inicjału! Chcesz, żeby zajmowało dokładnie 2, 3, 4 lub więcej wierszy? Poinformuj obiekt, a on wykona ciężkie podnoszenie.

Zmiana lokalu na 1, 2 i 4 linie

Składnia i wartości

initial-letter: normal | ( );

initial-letter akceptuje następujące wartości:

  • normal: Nie stosuje efektu skalowania do pierwszej litery. Może to być przydatne do resetowania wartości, która może zostać odziedziczona z kaskady.
  • : Ile wierszy powinna zajmować litera, jeśli wartości ujemne są niedozwolone.
  • : Ile wierszy powinna zawierać litera, jeśli wartości ujemne są niedozwolone. Jest to przydatne, jeśli musisz ustawić literę niżej, aby uwzględnić trudne problemy z odstępami, ale jeśli nie zostanie określony, przyjmuje wartość

Przykłady

Inicjał, Podniesiona czapka i Blokada przy użyciu pierwszej litery

Stylizacja pierwszej litery może posłużyć do uzyskania wyszukanych metod projektowania typograficznego. Należy pamiętać, że poniższe przykłady są obecnie obsługiwane tylko przez Safari.

Inicjały to prawdopodobnie najbardziej znany przypadek użycia:

Zobacz inicjał litery Pen: Drop Cap autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Podniesione czapki to kolejny przykład:

Zobacz inicjał litery Pen: Raised Cap autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Block Caps nawiązuje do starych bajek:

Zobacz inicjał litery Pen: Block Cap autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
Nie Nie Nie Nie TP *

Telefon komórkowy / tablet

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

Związane z

  • ::first-letter
  • Fragment inicjały

Więcej informacji

  • Moduł CSS Inline Layout Poziom 3: Oficjalne specyfikacje
  • Jen Simmons Labs: Dema i przykłady zastosowań
  • Firefox Ticket: otwarty bilet do obsługi tej funkcji
  • Bilet na Internet Explorer: bilet otwarty do obsługi tej funkcji