Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

Сброс стилей элементу одной строкой

Начнём с того, что порой хочется одним движением избавиться от всех стилей элемента. Например, вы хотите сделать свою кнопку без всяких браузерных украшений. Можно прописывать border: none, background: none, padding: 0 и так далее — а можно просто написать all: unset. Это свойство одним словом убирает всё, что браузер навесил на элемент по умолчанию. Просто и элегантно.

Цвет курсора в текстовом поле

А теперь представьте: вы делаете форму и хотите, чтобы она была в фирменных цветах. Казалось бы, цвет текста и фона настроили — и всё. Но вот мигающий курсор в текстовом поле всё ещё чёрный, как в 90-х. Оказывается, есть свойство caret-color, которое позволяет управлять цветом этого курсора. Например:

input {
  caret-color: crimson;
}

Мелочь? Да. Но такие детали делают интерфейс опрятным и законченным.

Плавная прокрутка без JavaScript

Когда на сайте много ссылок с якорями, пользователи наверняка оценят плавную прокрутку. Вы можете написать JavaScript с анимацией скролла, а можете просто добавить в корневой селектор:

html {
  scroll-behavior: smooth;
}

И браузер сам обеспечит мягкий переход к нужному месту страницы.

Красивое подчёркивание текста

Подчёркивание текста — вроде бы примитивная вещь, но у стандартного подчёркивания есть один визуальный изъян: линия грубо пересекает спуски букв, например «у» или «р». Свойство text-decoration-skip-ink даёт браузеру команду аккуратно обойти эти элементы. Достаточно написать:

a {
  text-decoration-skip-ink: auto;
}

и ваш текст моментально начнёт выглядеть опрятнее.

Вертикальное направление текста

Иногда в дизайне хочется, чтобы текст шёл вертикально, например, в боковой панели или на карточке товара. Для этого есть свойство writing-mode. Оно позволяет менять направление текста, и вам не придётся прибегать к хитрым трансформациям или использовать картинки вместо букв.

.vertical {
  writing-mode: vertical-rl;
}

Текст будет идти сверху вниз, справа налево. Отличный способ сделать что-то необычное.

Предсказуемый скролл при подгрузке данных

Когда страница подгружает данные — например, новые комментарии или товары в каталоге — может происходить неприятная вещь: скролл прыгает, и пользователь сбивается с места. Чтобы этого не было, достаточно добавить свойство overflow-anchor: none; к контейнеру с динамическим контентом. Браузер перестанет стараться «помогать» удерживать скролл, и интерфейс будет вести себя предсказуемо.

Элемент невидимый для кликов

А знаете, что можно сделать элемент невидимым для кликов? Свойство pointer-events: none; отключает для элемента любые события мыши. Очень полезно, если хотите, чтобы поверх чего-то висел декоративный элемент, не мешая взаимодействию с кнопками или ссылками под ним.

Не можем сказать, что делать так — хорошо, но возможности CSS даёт.

Изменяемый размер блока

Не все знают, но элемент на странице можно сделать изменяемым пользователем по размеру. Например, <textarea> можно настроить так, чтобы человек сам растягивал его в ширину и высоту мышкой. Делается это свойством resize.

textarea {
  resize: both;
}

Главное — не забыть про overflow, иначе результат будет неожиданным.

Запрет на выделение текста

Иногда приходится делать текст недоступным для выделения. Например, в интерактивных элементах или в кнопках. Чтобы запретить пользователю выделять текст, достаточно одной строки:

button {
  user-select: none;
}

Наложение слоёв как в графическом редакторе

И наконец — свойство для тех, кто хочет добавить каплю графического шика без фотошопа. mix-blend-mode позволяет элементу смешиваться с фоном по законам наложения слоёв из графических редакторов.

.image-overlay {
  mix-blend-mode: multiply;
}

И вот уже ваш текст или картинка выглядит так, будто стала частью фона.

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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

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

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

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :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
CSS-селекторы. Шпаргалка для новичков

CSS-селекторы. Шпаргалка для новичков

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

Читать дальше
CSS
  • 8 августа 2025
CSS-градиенты в oklch

CSS-градиенты в oklch

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

Читать дальше
CSS
  • 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов

CSS :has() — проверка наличия потомков или соседних элементов

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

Читать дальше
CSS
  • 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

Читать дальше
CSS
  • 5 августа 2025
Всё самое важное о псевдоклассе :default

Всё самое важное о псевдоклассе :default

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Читать дальше
CSS
  • 4 августа 2025
Как работает единица измерения em в CSS

Как работает единица измерения em в CSS

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Читать дальше
CSS
  • 30 июля 2025
Как найти пустые элементы в CSS

Как найти пустые элементы в CSS

Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

Читать дальше
CSS
  • 29 июля 2025