Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.

Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.

Как работает ::first-letter

Псевдоэлемент применяют к блочному элементу (чаще всего к <p>). Он «отделяет» первую букву и позволяет задать ей собственные стили: размер, цвет, шрифт или даже фон. Остальной текст остаётся неизменным.

В примере выше первая буква абзаца сразу бросается в глаза и создаёт настроение для чтения.

Исторический контекст

Когда CSS только внедрялся, ::first-letter был одним из немногих инструментов, которые позволяли веб-дизайнерам подчеркнуть «живость» текста. В 90-х и начале 2000-х годов это активно использовали новостные порталы и онлайн-журналы, пытаясь визуально напоминать печатные издания.

Со временем приём стал использоваться реже — минимализм и адаптивный дизайн вытеснили буквицу. Однако сегодня ::first-letter переживает второе дыхание: его применяют в блогах, образовательных проектах и сайтах, где текст играет ключевую роль.

Комбинирование с другими стилями

Вы можете не только увеличить букву, но и задать фон, рамку, отступы или даже скругления. Это позволяет гармонично вписать буквицу в современный дизайн.

Приём работает особенно хорошо в длинных текстах: учебных материалах, статьях или даже документации, когда хочется добавить немного визуального акцента.

Поддержка в браузерах

::first-letter поддерживается всеми современными браузерами уже много лет. На самом деле, даже Internet Explorer 5 умел работать с этой фичей, так что можно смело сказать: это одна из самых надёжных возможностей CSS.

Сейчас статус псевдоэлемента в спецификации CSS закреплён как «Widely Available». Это значит, что использовать его можно без опасений: никаких префиксов или обходных решений не потребуется.

Итог

Псевдоэлемент ::first-letter — это пример того, как небольшая деталь из печатного мира прижилась в вебе и стала частью нашей профессии. Он помогает добавить характер и выразительность в текст, оставаясь при этом лёгким и универсальным инструментом. Если вы только начинаете свой путь в веб-разработке, обязательно попробуйте поиграть с ::first-letter — это отличный способ почувствовать, как CSS меняет восприятие страницы.