​​CSS text-wrap: balance

Начиная с Chrome 114, вы можете использовать сбалансированный перенос текста для заголовков с помощью свойства text-wrap со значением balance.

👉 Уровень поддержки согласно caniuse

Для балансировки текста браузер выполняет эффективный бинарный поиск наименьшей ширины, которая не вызывает переноса строки, останавливаясь на одном пикселе CSS (не экранном пикселе). Для дальнейшей оптимизации бинарного поиска браузер начинает с 80% средней ширины строки.

👉 Смотреть демо
👉 Более подробная статья

​​😻Топ-5 фишек UI/UX дизайна платформы контейнеризации

В этой статье хочу поделиться топ-5 фишек, созданных для консоли dBrain, чтобы превратить рутинную работу инженера по обслуживанию кластера в творческую.

Читать...

​​🏦Зачем банкам менять интерфейсы, и как это сделать, если вы тоже хотите

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

Читать...

​​🥷Как появляются дизайн-системы: рассказываем и показываем на собственном примере

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

Читать...

​​😶Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

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

Читать...

​​🎃Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы

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

Читать...

​​😬Это ужасно бесит — подборка косяков, постоянно встречающихся от сайта к сайту, от приложения к приложению

В этой статье мы рассмотрим некоторые из таких наиболее распространённых косяков.

Читать...

​​👀HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

В этой статье мы покажем, как HTML и CSS могут улучшить или ухудшить верстку.

Читать...

​​😎Роль UX/UI-дизайна в процессах автоматизации бизнеса на примере оформления ипотеки

В этой статье мы рассмотрим как можно улучшить юзабилити формы заявки на сайте с точки зрения UX/UI и автоматизации.

Читать...

Запоминайте меньше и достигайте большего с помощью логических свойств

Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.

button {
padding-inline: 2ch;
padding-block: 1ch;
}

article > p {
text-align: start;
margin-block: 2ch;
}

.something::before {
inset-inline: auto 0;
}

Поддержка браузерами:

👉 padding-inline: caniuse
👉 margin-block: caniuse
👉 inset-inline: caniuse

Как всегда удачи в экспериментах!

​​😎3 правила в веб-дизайне, которые упрощают жизнь разработчикам

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

Читать...

​​👿HTML: плохие стороны

В этой статье автор расскажет о некоторых проблемах HTML с точки зрения accessibility и usability, таких как использование атрибута multiple элемента select, недостатки элементов <i> и <datalist>, проблемы с кнопками disabled, а также несогласованность в работе нативного проигрывателя видео.

Читать...

​​🧑‍💻Пара HTTP-заголовков, о которых, похоже, не знают разработчики

В этой статье мы рассмотрим что такое HTTP-заголовки, какие их типы бывают и зачем они нужны.

Читать...

​​🎛Проектируем дизайн честного кредитного калькулятора

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

Читать...

​​⌨Руководство по проектированию интерфейсов с Drag and Drop

В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop.

Читать...

​​🤔Как оценивать задачи и подружиться с дедлайнами

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

Читать...

​​👨‍🚀Figma to Frontend: как мы автоматически синхронизируем дизайн и код

В этой статье расскажу, как мы синхронизировали треть нашей дизайн-системы за счет автоматической генерации дизайн-токенов и компонентов.

Читать...

​​🤔UX-мракобесие

В этой статье о проблеме UX-мракобесия, которая заключается в упрощенном понимании пользовательского опыта.

Читать...

​​😎Как в Figma использовать noscript в качестве заливки

В этой статье мы рассмотрим способ, как использовать noscript картинку в качестве заливки векторного объекта.

Читать...

​​🎛11 полезных фичей Chrome DevTools

В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.

Читать...

​​👌UX/UI поисковой строки в интернет-магазине: 177 гайдлайнов

В этой статье мы разберем UX/UI строки поиска в интернет-магазине.

Читать...