initial-letter. Буквица в css

Сегодня мы рассмотрим еще одно новое дополнение к CSS, которое скоро появится в браузерах: initial-letter. Это свойство все еще является экспериментальным с поддержкой в Safari, но оно поддерживается в браузерах Chromium Canary. Иногда это немного глючит, и я столкнулся с проблемами, связанными с сбоем DevTools, поэтому он все еще явно экспериментальный.

Что это такое и что оно делает?

Свойство CSS initial-letter обеспечивает больший контроль и стиль над первой буквой в блоке текста ... это означает, что мы можем немного пофантазировать с нашей типографикой без хитрых трюков.

Initial-letter это свойство, которое применяется к псевдоэлементу ::first-letter. Это позволяет вам управлять размером первой буквы с помощью числа, которое указывает, сколько строк в высоту должна быть буква, и другого значения, целого числа, которое можно добавить, чтобы указать, на сколько строк вниз должна опускаться буква.

Например, допустим, мы хотим, чтобы наша буква была длиной в 3 строки. Мы бы написали следующее:

p::first-letter {
  initial-letter: 3;
}

И, в свою очередь, это сделало бы букву высотой в 3 строки:

Давайте введем второе значение, чтобы изменить, где находится буква. Буква по-прежнему будет иметь высоту 3 строки, но мы хотим, чтобы она опустилась до четвертой строки.

p::first-letter {
  initial-letter: 3 4;
}

Довольно аккуратно, и для этого требуется всего одна строка кода!

Что это решает для разработчиков?

Сила этого свойства заключается в возможности устранения ошибок при оформлении и позиционировании первой буквы блока текста. Нет обертывания вашей первой буквы в a <div>или чего-либо подобного. Возможность изменения размера на основе высоты строки также позволяет масштабировать букву.