CSS

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

Обрезка блоков текста с помощью line-clamp

Обрезка блоков текста с помощью line-clamp

Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу.

В основе line-clamp лежит комбинация свойств, включающих display: -webkit-box, -webkit-line-clamp и -webkit-box-orient: vertical. Современные браузеры поддерживают стандартное свойство line-clamp без префиксов, но для максимальной совместимости лучше использовать и префиксные версии. Это особенно важно для старых версий браузеров, таких как Safari.

Давайте разберём, как работает line-clamp, и посмотрим на несколько примеров.

Читать дальше
CSS
  • 18 октября 2025
CSS-свойство image-orientation: исправляем ориентацию изображений из EXIF

CSS-свойство image-orientation: исправляем ориентацию изображений из EXIF

При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.

Читать дальше
CSS
  • 25 сентября 2025
Визуализация: nth-child – как выбирать элементы на странице

Визуализация: nth-child – как выбирать элементы на странице

Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.

Читать дальше
CSS
  • 7 сентября 2025
Именованные цвета в CSS

Именованные цвета в CSS

Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.

Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.

Читать дальше
CSS
  • 5 сентября 2025
Раздвигаем буквы на CSS: свойство letter-spacing

Раздвигаем буквы на CSS: свойство letter-spacing

Свойство letter-spacing — одно из базовых средств CSS-типографики, которое управляет расстоянием между буквами текста. Оно позволяет сделать текст более разреженным или, наоборот, плотным. Сегодня это свойство используется повсеместно — от стилизации логотипов до улучшения читаемости в длинных абзацах. С января 2018 года оно находится в статусе Widely Available в Baseline, а значит, поддерживается всеми современными браузерами.

Читать дальше
CSS
  • 29 августа 2025
Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

Читать дальше
CSS
  • 24 августа 2025
Правило @import в CSS: модульность и организация стилей

Правило @import в CSS: модульность и организация стилей

Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.

Читать дальше
CSS
  • 22 августа 2025
Псевдоклассы валидации форм: делаем интерфейсы понятнее

Псевдоклассы валидации форм: делаем интерфейсы понятнее

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.

Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.

Читать дальше
CSS
  • 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter

Как сделать первую букву абзаца большой — буквица через ::first-letter

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

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

Читать дальше
CSS
  • 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее

Лигатуры в CSS: как сделать текст аккуратнее

Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

Читать дальше
CSS, Это база
  • 9 августа 2025