Начална буква - CSS-трикове

Anonim

initial-letter е CSS свойство, което избира първата буква от елемента, където е приложена, и указва броя на редовете, които буквата заема.

Може да сте виждали нещо подобно в новинарските сайтове, където първата буква на водещ абзац е по-голяма от останалото съдържание.

Сайтът на New Yorker оформя първоначалната буква

Трикът със стилизиране на първата буква на съдържанието обикновено отнема малко хакване, когато обвивате писмото в и прилагате клас, за да го оформите:

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


Once upon a time in a faraway land…

Това работи, но това е повече HTML маркиране, отколкото искаме, и разбива нашето съдържание. Освен това е мъчно да се налага да прилагате този клас ръчно по всяко време, когато искате да го използвате.

Това, което initial-letterвлиза:

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


Once upon a time in a faraway land…

Това е по-чисто! Друг подход е ::first-letterвместо това да го приложите към psuedo-селектора:

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

Видя ли това? В initial-letterимота автоматично изчислява както размера на шрифта и броя на линиите, необходими за създаването ни стилизиран капка шапка! Искате ли да заема точно 2, 3, 4 или повече редове? Кажете на имота и той ще направи тежкото повдигане.

Промяна на свойството, за да заеме 1, 2 и 4 реда

Синтаксис и стойности

initial-letter: normal | ( );

initial-letter приема следните стойности:

  • normal: Не прилага ефект на мащабиране върху първата буква. Това може да бъде полезно за нулиране на стойността, при която човек може да бъде наследен от каскадата.
  • : Колко реда трябва да заеме буквата, когато отрицателните стойности не са разрешени.
  • : Колко реда трябва да потъне буквата там, където не се допускат отрицателни стойности. Това е удобно, ако трябва да поставите буквата по-ниско, за да отговорите на сложни проблеми с разстоянието, но ако не е посочено, отнема стойността на

Примери

Пуснете капачка, повдигната капачка и блок капачка с помощта на първоначално писмо

Оформянето на началната буква може да се използва за постигане на някои фантастични методи за типографски дизайн. Моля, обърнете внимание, че следните примери в момента се поддържат само от Safari.

Drop Caps са може би най-познатият случай на употреба:

Вижте първоначалното писмо на Pen: Drop Cap от Geoff Graham (@geoffgraham) на CodePen.

Повдигнатите капачки са друг пример:

Вижте първоначалното писмо на Pen: Повдигната капачка от Geoff Graham (@geoffgraham) на CodePen.

Block Caps се връщат към старите приказки:

Вижте началната буква на Pen: Block Cap от Geoff Graham (@geoffgraham) на CodePen.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
Не Не Не Не TP *

Мобилен / таблет

Android Chrome Android Firefox Android iOS Safari
Не Не Не 14,0-14,4 *

Свързани

  • ::first-letter
  • Фрагмент на Drop Caps

Повече информация

  • Модул за вградено оформление на CSS Ниво 3: Официалните спецификации
  • Лаборатории на Jen Simmons: Демонстрации и примери за случаи на употреба
  • Билет за Firefox: Отворен билет за поддръжка на функцията
  • Билет за Internet Explorer: Отворен билет за поддръжка на функцията