initial-letter је ЦСС својство које бира прво слово елемента где се примењује и наводи број редова које слово заузима.
Можда сте видели нешто слично на веб локацијама са вестима, где је прво слово водећег пасуса веће од остатка садржаја.
Трик у обликовању првог слова садржаја некада је требало мало провалити када слово умотате у а и примените класу да бисте га обликовали:
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
То ради, али то је више ХТМЛ означавања него што желимо и разбија наш садржај. Поред тога, бол је што морате ручно применити ту класу кад год желите да је користите.
То где initial-letterдолази:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
То је чистије! Други приступ је да се ::first-letterуместо тога примени на псуедо-селектор:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )Да ли си видео то? initial-letterИмовина аутоматски израчунава како величину и број линија које су потребне да створимо стилизован дроп цап! Желите да заузме тачно 2, 3, 4 или више редова? Обавестите власништво и урадиће тешко дизање.
Синтакса и вредности
initial-letter: normal | ( );initial-letter прихвата следеће вредности:
normal: Не примењује ефекат скалирања на прво слово. Ово може бити корисно за ресетовање вредности где се једна може наследити од каскаде.: Колико редова слово треба да заузме тамо где негативне вредности нису дозвољене.: Колико редова слово треба да утоне тамо где негативне вредности нису дозвољене. Ово је згодно ако слово требате поставити ниже да бисте удовољили шкакљивим проблемима са размаком, али ако није наведено, узима вредност
Примери
Стилизовање почетног слова може се користити за постизање неких фантастичних метода типографског дизајна. Имајте на уму да Сафари тренутно подржава само следеће примере.
Дроп Цапс су вероватно најпознатији случај употребе:
Погледајте почетно писмо оловке: Дроп Цап, Геофф Грахам (@геоффграхам) на ЦодеПен.
Подигнути капице су још један пример:
Погледајте почетно писмо оловке: Подигнута капа, Геофф Грахам (@геоффграхам) на ЦодеПен.
Блоцк Цапс враћени у старе бајке:
Погледајте почетно писмо оловке: Блоцк Цап, Геофф Грахам (@геоффграхам) на ЦодеПен.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| Не | Не | Не | Не | ТП * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| Не | Не | Не | 14,0-14,4 * |
Повезан
::first-letter- Дроп Цапс фрагмент
Више информација
- ЦСС модул за линијски распоред нивоа 3: Службене спецификације
- Лабораторија Јен Симмонс: Демонстрације и примери случајева употребе
- Улазница за Фирефок: Отворена улазница за подршку функцији
- Улазница за Интернет Екплорер: Отворена улазница за подршку функцији