
Привет, Хабр.
Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.
Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их.
Давайте посмотрим, что я вам подготовил.
▍ Шрифт по умолчанию тоже может быть красивым
Я думаю, вы согласитесь, что классный интерфейс не может существовать без хорошей типографики. Дизайнеры настолько сильно заморачиваются, что задача фронтендера — не испортить их работу. В частности, при работе со шрифтами. Особенно с нестандартными.
Типичная задача фронтендера — это правильно их подключить. Нужно подумать над тем, как шрифт будет отображён, если он не загрузится. По этой причине долгое время существовала практика указывать семейство шрифтов. Например, sans-serif
.
body {
font-family: "Roboto", sans-serif;
}
Если шрифт Roboto не загрузится, то браузеры применят шрифт из указанного семейства. Чаще всего, это шрифт Arial. Он некрасивый. Так что чаще всего текст будет выглядеть плохо. Я хочу предложить другой подход.
В CSS есть ключевое слово system-ui
. Оно позволяет нам использовать для веб-контента шрифт, который встроен в операционную систему. В большинстве случаев он будет намного красивее.
Начать использовать ключевое слово system-ui
очень просто. Нужно его добавить вторым значением для свойства font-family
.
body {
font-family: "Roboto", system-ui, sans-serif;
}
Поддержка ключевого слова system-ui
очень хорошая. Это позволяет оставить только его, убрав ключевое слово sans-serif
.
body {
font-family: "Roboto", system-ui;
}
Но это я уже оставляю на ваше усмотрение. Главное, вы теперь знаете, как улучшить типографику на вашем проекте.
▍ Улучшаем отображение заголовков
В типографике есть термин «вдовы». Под ним понимается ситуация, когда в блоке с текстом на последней строке остаётся одно слово. В вебе данное явление можно увидеть в заголовках. Я сразу покажу пример.
<body>
<main class="content">
<h1>Овечкин продолжает забивать! Но «Вашингтон» проиграл первый кубок в этом году</h1>
<p>
«Вашингтон» ждал приезда «Коламбуса» с особыми чувствами.
<!-- здесь оставшиеся текст -->
</p>
</main>
</body>

На последней строке осталось одно слово «году». Вот такое отображение текста называется «вдовы». Согласитесь, выглядит некрасиво.
Для исправления ситуации мы можем использовать значение balance
для свойства text-wrap
. Таким образом браузеры начнут анализировать текст и будут его равномерно распределять по строкам. В итоге заголовки будут выглядеть лучше.
Давайте это проверим с помощью нашего примера.
h1 {
text-wrap: balance;
}

Круто же. Теперь текст смотрится более гармонично. А главное, что этот трюк очень легко внедрить. Дерзайте!
▍ Можно подобрать более подходящую надпись для кнопки «Перейти» на виртуальной клавиатуре
У нас, как у фронтендеров, не так много возможностей, как-то изменять виртуальную клавиатуру. Но одна всё же есть. Вы слышали про атрибут enterkeyhint
? Надеюсь, что нет, потому что я хочу рассказать о нём.
Сделаю я это сразу на примере. Мы посмотрим на виртуальную клавиатуру при заполнении формы авторизации.
<body>
<form>
<label for="un">Логин</label>
<input type="text" id="un">
<label for="pw">Пароль</label>
<input type="password" id="pw">
<button>Отправить</button>
</form>
</body>

Обратите внимание на правый нижний угол. Там находится клавиша с надписью «Перейти». Вот мы можем её изменить. Это поможет нам сделать атрибут enterkeyhint
.
Например, я задам значение send
для поля ввода пароля.
<body>
<form>
<label for="un">Логин</label>
<input type="text" id="un">
<label for="pw">Пароль</label>
<input type="password" id="pw" enterkeyhint="send">
<button>Отправить</button>
</form>
</body>

Теперь мы видим сокращённое слово «Отправ.». На английском языке будет надписано «Send». Вот так атрибут помог использовать более подходящую надпись.
Когда я только узнал про атрибут, подумал, что можно задать любую надпись. Это не так. В качестве значения нам предоставляется ограниченный список. Всего есть 7 значений, а именно: enter
, done
, go
, next
, previous
, search
и send
.
Конечно, не густо. Хочется больше надписей. Но в качестве микроулучшения мне нравится этот атрибут.
▍ Делаем удобный ввод цифрового кода при авторизации
Мне часто встречаются интерфейсы, которые используют ввод цифрового кода при авторизации. Казалось бы, простая ситуация. Надо ввести код. Что может пойти не так?
Я хочу обратить ваше внимание на клавиатуру, которая появляется на смартфонах при вводе. Если мы используем элемент <input>
, то она будет содержать буквы и цифры сразу. Но для ввода цифрового кода буквы явно не пригодятся. Нам нужны только цифры!
И так можно сделать. Я нашёл отличный пример.

Для достижения такого результата разработчики добавили атрибут inputmode
со значением numeric
.

Ввод цифрового кода — не единственный сценарий, где полезно значение numeric
. Ввод номера паспорта, даты рождения, да вообще все цифровые данные. Правильная клавиатура всегда упрощает взаимодействие. А лично меня она спасает от боли в кистях. Пожалуйста, обращайте внимание на этот аспект.
▍ Выделение текста может быть разным
Подбирая темы для этой статьи, я сомневался, стоит ли включать псевдо-элемент ::selection
. Мне казалось, что его знают все. В таких случаях я делаю опрос среди своих подписчиков. Оказалось, что большая часть моей аудитории его не знает.
А зря. Этот псевдо-элемент поможет вам изменить стандартное выделение текста. Например, я так сделал для Хабра.
::selection {
background-color: #fce4ec;
}

Видите, браузеры используют более красивое выделение. Классно же! Вот так просто вы можете сделать выделения текста в фирменном стиле сайта.
▍ Добавить тёмную тему очень просто
В прошлом году Яндекс провёл исследование о настройках доступности в Яндекс Браузере для iOS и Android. Оказывается, 27% пользователей, или примерно 11 миллионов людей, используют тёмную тему. Супер популярная функция!
Хорошо, что CSS позволяет просто её реализовать. Медиа-функция prefers-color-scheme
сделает всю работу. Лично я использую её вместе с пользовательскими CSS-свойствами.
/* определяю цвета для светлой темы */
:root {
--main-mode-color: #fcfcfc;
--accent-mode-color: #222;
}
@media (prefers-color-scheme: dark) {
/* определяю цвета для тёмной темы */
:root {
--main-mode-color: #1e2229;
--accent-mode-color: #ebecef;
}
}
body {
color: var(--accent-mode-color);
background-color: var(--main-mode-color);
}
Вот и всё. Таким способом вы позволите своим пользователям использовать тёмную тему. Просто же. Надеюсь, вы её добавите в свои проекты.
▍ Расширяем кликабельную область с помощью псевдо-элементов
Одна из главных задач дизайнера — продумать размеры интерактивных элементов так, чтобы по ним было удобно нажимать. К моему сожалению, так делают не все. Некоторые ставят красоту выше удобства. В результате получаются маленькие кнопки или ссылки.
Я много раз с этим сталкивался. Переубеждать дизайнеров я устал. Вместо этого начал думать, как ещё можно решить проблему. И мне пришла мысль: «Почему бы не увеличить интерактивную область?».
Реализовать такое решение можно с помощью псевдо-классов ::before
или ::after
. Я просто буду расширять их размеры так, чтобы они выходили за пределы родительского элемента. В итоге визуально элементы остались бы тех же размеров, а их область станет больше.
Покажу реализацию на примере кнопки размером шестнадцать на шестнадцать пикселей.
.button {
width: 16px;
height: 16px;
position: relative;
isolation: isolate;
}
.button::before {
content: "";
position: absolute;
inset: -10px;
z-index: -1;
}
Вся фишка заключается в свойстве inset
. Именно оно расширяет интерактивную область элемента. В нашем примере я это сделал на 10px
с каждой стороны. В итоге кликабельная область стала размером 36px
на 36px
.

Так же мы можем сделать этот код более универсальным. В моих проектах он используется с помощью отдельного класса.
.ha-clickable-area {
--_ha-clickable-area-expandable-ratio: var(--ha-clickable-area-expandable-ratio, 6px);
position: var(--ha-clickable-area-position, relative);
isolation: isolate;
}
.ha-clickable-area::before {
content: "";
position: absolute;
inset: calc(-1 * var(--_ha-clickable-area-expandable-ratio));
z-index: -1;
}
/* здесь объявляю значение для конкретного элемента */
.button {
--ha-clickable-area-expandable-ratio: 10px;
width: 16px;
height: 16px;
}
▍ Заключение
Давайте подведём итог. В этой статье мы рассмотрели:
- использование ключевого слова
system-ui
в качестве объявления шрифта по умолчанию; - значение
balance
для свойстваtext-wrap
для улучшения отображения заголовков; - атрибут
enterkeyhint
, позволяющий лучше адаптировать виртуальную клавиатуру под контекст использования; - как атрибут
inputmode
со значениемnumeric
делает ввод цифрового кода проще; - псевдо-элемент
::selection
для стилизации выделенного текста в фирменном цвете; - создание тёмной темы с помощью медиа-функции
prefers-color-scheme
; - сниппет для расширения кликабельной области.
Будете использовать эти лайфхаки в своих проектах? Или я зря написал эту статью? Делитесь своим мнением в комментариях. Спасибо за чтение!
P.S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.
© 2025 ООО «МТ ФИНАНС»
Telegram-канал со скидками, розыгрышами призов и новостями IT 💻
