Хабр, привет!
Я много лет рассказываю о CSS. Показываю, как применять его, чтобы не было больно. Рассказываю про лучшие практики. Забочусь о вас, чтобы вы не стреляли себе в ноги.
Только и у меня бывают непонятки с CSS. Сижу и задаю себе вопрос: «А зачем это свойство нужно?» У меня даже подгорает на авторов спецификаций. Конечно, так не всегда, но всё же бывает.
Поэтому за время работы у меня появился список свойств, которые я не понимаю, чем они полезны. Не поймите меня неправильно. Я понимаю, что они делают. Не понимаю, где найти ситуации, в которых они помогут.
В общем, я хочу рассказать о них вам. Зачем? Для обмена опытом. Может, у вас получится открыть мне глаза и показать всю пользу этих свойств. Это вы можете сделать в комментариях. Помогите мне, пожалуйста.
В общем, начинаю свой «критический обзор» CSS. Давайте посмотрим, что я подготовил.
Свойство empty-cells
При работе с таблицами могут получиться пустые ячейки. Лично меня они не раздражали. Но, похоже, я нахожусь в меньшинстве. Не просто же так в CSS есть возможность «скрывать» такие ячейки с помощью свойства empty-cells.
Для демонстрации я создал таблицу с именем и возрастом.
<body>
<table>
<tbody>
<tr>
<th>Игрок</th>
<th>Возраст</th>
</tr>
<tr>
<td>Головин</td>
<td>29</td>
</tr>
<tr>
<td>Пиняев</td>
<td></td>
</tr>
<tr>
<td>Кисляк</td>
<td></td>
</tr>
<tr>
<td>Сафонов</td>
<td>26</td>
</tr>
</tbody>
</table>
</body>
Давайте посмотрим, как оно работает вместе со значением hide.
table {
empty-cells: hide;
}
Всё, нет пустых ячеек. Магия!
Конечно, свойство empty-cells не прячет саму ячейку. Она остаётся на месте. Это можно посмотреть в инструментах разработчика.
Вся фишка кроется в отображении свойств background и border. Значение hide запрещает браузерам их отображать.
Как итог, мы получаем визуальное скрытие ячейки. Это как с ёжиком. Вы видите его? Нет? А он есть!
Свойство text-align-last
Каждый фронтендер знает, что свойство text-align выравнивает текст по основному направлению. Обычная же задача. А вам когда-нибудь требовалось выровнять последнюю строку?
Если да, то авторы спецификаций позаботились о вас. С прошлого года у нас появилось ещё свойство text-align-last. Оно также выравнивает текст, как свойство text-align, только делает это для последней строки.
Для демонстрации я сделаю выравнивание по центру.
<body>
<div class="awesome-block">
<p>Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.</p>
</div>
</body>.awesome-block {
box-sizing: border-box;
max-width: 23rem;
border: 2px solid;
padding-inline: 1rem;
text-align-last: center;
}
Мне очень интересно узнать, что думали авторы, создавая это свойство в 2023 году. Столько полезных штук мы ждём годами, а они последнюю строку выравнивают... Надеюсь, у вас найдутся доводы в их защиту!
Свойство shape-outside
Тринадцать лет назад нельзя было использовать флексбоксы для позиционирования элементов. Одним из методов расположить элементы друг за другом было использование свойства float. Я думаю, что уже многие даже забыли его. Напомню вам о нём.
Оно делает две важных вещи. Первая, заставить элемент максимально сместиться в левую или правую сторону. Вторая, это заставить последующие строчные элементы его обтекать. Например, текст.
Покажу это наглядно. У меня будет текст и изображение. К последнему я применю свойство float со значением left.
<body>
<div class="awesome-block">
<!-- поскольку картинка ненастоящая, я оставляю атрибут alt пустым -->
<img class="awesome-picture" src="https://placehold.co/150x150" alt="">
<p>Общаясь с фронтендерами, я заметил, что многие не знают новые классные возможности HTML и CSS. Мне от этого грустно. Надо это исправлять!</p>
<p>Я подумал и составил список, состоящий из наиболее рекомендуемых мной новых фишек. Они поддерживаются в большинстве современных браузеров. Решают старые проблемы. Упрощают разработчикам жизнь. В общем суперполезные!</p>
</div>
</body>.awesome-block {
max-width: 30rem;
border: 2px solid;
padding: 1rem 1.5rem;
}
.awesome-picture {
float: left;
margin: 1rem;
border-radius: 50%;
}
Мы видим, что изображение сместилось влево, а текст начал его обтекать справа. Вот такую простую штуку делает свойство float. А теперь перейдём к главному. Почему я начал говорить про свойство float?
В нашем примере у области с изображением размеры 150 на 150 пикселей. Другими словами, у нас квадрат. Соответственно, текст будет обтекать так, чтобы не залезть в эту квадратную область. Получается не совсем равномерно.
Сегодня CSS позволяет изменить форму области, которую обтекает текст. Для этого есть свойство shape-margin. Давайте для демонстрации определим его со значением circle().
.awesome-block {
max-width: 30rem;
border: 2px solid;
padding: 1rem 1.5rem;
}
img {
float: left;
margin: 1rem;
border-radius: 50%;
shape-outside: circle(50%);
}
Теперь текст обтекает изображение, создавая дугу. Получается область, в которой находится изображение, теперь круглая. Это хорошо видно в инструментах разработчика.
Дополнительно можно создавать разные геометрические фигуры, поскольку в качестве значения доступны функции inset(), ellipse(), polygon() и url(). Они помогут реализовать любую фантазию дизайнера.
Да, безграничные возможности свойства shape-outside подкупили многих разработчиков. Они очень сильно хвалили его, говоря, что теперь можно создавать супер интересные эффекты.
Жаль, что такие сайты очень редко можно встретить. Лично у меня, даже ни разу не было задачи, где я мог использовать свойство shape-outside.
Свойство hyphenate-character
Некоторое время назад я рассказывал про старые CSS свойства. Среди них было свойство hyphens. Я не буду подробно рассказывать второй раз. У вас есть возможность прочитать про него отдельно.
Для текущей статьи важно сказать, что оно включает установку дефисов при переносе слов. Так, как нас учили делать в школе.
<body>
<div class="awesome-block" lang="ru">
<p>Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.</p>
</div>
</body>.awesome-block {
max-width: 23rem;
border: 2px solid;
hyphens: auto;
}
Казалось бы, дефис — универсальный символ. Зачем его менять? А разработчики стандартов решили разрешить смену символа. Для этого они придумали свойство hyphenate-character.
Для демонстрации я буду использовать символ = вместо дефиса. А почему нет.
.awesome-block {
max-width: 23rem;
border: 2px solid;
hyphens: auto;
hyphenate-character: "=";
}
Вот такие забавные эффекты мы можем создавать. Мне кажется, кто-то среди авторов CSS недолюбливает дефис. В моей картине мира только в этом случае могло появиться свойство hyphenate-character. Других вариантов нет.
Свойство tab-size
Однажды захотел я сделать документацию по компонентам. Мне нужно было описать, как настраивать CSS. В нашей команде ещё не было никакой документации. Всё держалось на честном слове.
В общем, я нашёл несколько библиотек, а потом мне пришла идея: «Почему бы не воспользоваться встроенными возможности HTML и CSS?»
Есть же элементы pre и code для вставки кода. Код можно вставить с помощью них.
<body>
<pre class="awesome-code">
<code>
.awesome-block {
tab-size: 4;
}
</code>
</pre>
</body>
Ширину символа табуляции можно настроить свойством tab-size.
.awesome-code {
border: 2px solid;
tab-size: 1rem;
}
Показал я решение одному коллеге, второму, третьему. Все они, как сговорившись, говорили мне: «Почему нет подсветки кода? Так не пойдёт». А встроенные возможности HTML и CSS не позволяют же сделать подсветку. Вот так я и оставил эту идею.
Свойство text-emphasis
У нас есть множество способов для стилизации текста. Подчёркивания, начертание, наклон. Всё, что хочешь. Но думаю, вы не знали, что также можно установить декоративный маркер над текстом.
Например, вы захотите показать, где в слове нужно установить ударение. Как вы это сделаете? Вот в таких ситуация нужно использовать свойство text-emphasis. Оно позволяет добавлять текстовые символы над словами.
Например, я добавлю апостроф с помощью значения sesame.
<body>
<div class="awesome-block">
<p>Общаясь с фронт<span class="text-emphasis">е</span>ндерами, я заметил, что многие не знают новые классные возможности HTML и CSS.</p>
</div>
</body>.text-emphasis {
text-emphasis: sesame;
color: red;
}
Ещё свойство позволяет устанавливать кружочки, треугольники, точки или любой текстовый символ. Для демонстрации я определю символ +.
.text-emphasis {
text-emphasis: "+";
color: red;
}
Вроде забавная и полезная штука. Как говорят в интернете, пользователям даже будет проще понять, как произносить слово. Только я за всю свою жизнь ни разу не видел такого примера. Может, это мне так повезло. Надеюсь, вы его видели.
Заключение
Давайте подведём итог. В этой статье мы рассмотрели:
Как можно спрятать пустые ячейки в таблице благодаря свойству
empty-cells.Возможность выровнять текст на последней строке свойством
text-align-last.Настройку символов переноса текста, используя свойство
hyphenate-character.Свойство
shape-outside, позволяющее создать нестандартную область, которую будет обтекать контент.Настройку табуляции через свойство
tab-size.Установку декоративных маркеров с помощью свойства
text-emphasisдля обозначения ударения в слове.
Ещё раз хочу обратиться к вам. Если вы знаете кейсы, в которых очевидна польза свойства, освещённых в этой статье, расскажите, пожалуйста, о них в комментариях. Я буду ждать вас.
На этом всё. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.
© 2025 ООО «МТ ФИНАНС»
Комментарии (17)
KivApple
30.09.2025 09:06Непонятно как в списке оказался tab-size. Какой-нибудь highlight.js раскрашивает содержимое блока кода, но он полагается на браузерный рендеринг преформатированного текста. И там пригодится тот самый tab-size, если хочется подправить стиль. Полагаю, другие красилки кода тоже могут полагаться на pre. И даже если размер таба вынесен в конфиг, под капотом может использоваться свойство, потому что как иначе отрисовать табы как не через pre и его CSS аналог (а если красилка заменяет табы на пробелы, то это очень плохая красилка, так как код должен копироваться со страницы в точности так как был вставлен).
text-align-last звучит как полезный инструмент при text-align: justify, чтобы выбрать выравнивать ли последнюю строку тоже по ширине или по левому краю. Зависит от требований типографики. Без justify действительно не имеет смысла. Надо спрашивать дизайнеров когда они используют разные выравнивания и какое из них ТРУ (опять же, вангую, может зависеть от обычаев конкретного языка и страны).
Насчёт смены символа переноса скорее всего нужно при вёрстке сайта на языке, где принят нестандартный символ. С учётом того как варьируются правила от языка к языку (например, в русском и английском вопросительный знак ставится впритык к предыдущему слову, во французском через пробел, а в испанском вопросительных знака целых два - вначале и в конце предложения), я уверен на 99% в существовании языка с альтернативой знаку переноса. Но не удивительно с ним не встретиться верстая сайты только на русском или английском.
text-empasis понятное дело всякие онлайн словари, где нужно расставлять ударения. Плюс в некоторых книгах авторы иногда помечают слова, где ударения влияет на смысл, какая-нибудь онлайн читалка должна быть способна это отрисовать. Обычным сайтам мало нужно. Если вы не разрабатывали ни один онлайн словарь и ни одну онлайн библиотеку, то логично, что вы не сталкивались (я тоже).
В итоге одно свойство попало в список ни за что, по поводу второго надо спрашивать дизайнеров и ещё два свойства очевидно нишевые и пока вы не попали в эту нишу, они вам не нужны, но если попадёте будут must have.
В итоге остаются только два по-настоящему мало используемых свойств.
mao_zvezdun
30.09.2025 09:06А вам когда-нибудь требовалось выровнять последнюю строку?
Когда абзац выровнен по ширине, а последнюю строчку хочется по центру или прижать к левому краю. В некоторых случаях это может смотреться.
pokrovskiy_199
30.09.2025 09:06Скорее всего имелось ввиду, что хочется прижать к правому краю тот огрызок текста, который перенесся на последнюю строку, но всё же на практике чаще встречается то, что весь текст центрируется, по ширине выравнивается гораздо реже
wadowad
30.09.2025 09:06По ширине текст выравнивался бы чаще, если была бы адекватная поддержка переносов. Так вот, с выравниванием по ширине последняя строка часто будет получаться с огромными пробелами и её придётся "насильно" выравнивать по левому краю.
AuToMaton
30.09.2025 09:06А вам когда-нибудь требовалось выровнять последнюю строку?
Я видел как это используется при вёрстке. Если последняя строка короткая, то справа и слева выводится картинка, типа вензель. А если последняя строка длинная, то делится на две.
Почему все Web технологии такие тупые, задумался я. Гипотеза - CSS люди и JavaScript люди не могут договориться. Чумы бы на оба ваши дома…
vanxant
30.09.2025 09:06text-align-last решает одну из двух проблем выключки по ширине (text-align: justify) и невозможности её нормального использования в вебе.
Если последняя строка получилась короткой, то выключка по ширине разорвёт её на слова с гигантскими пробелами по середине. text-align-last как раз лечит эту беду.
Вторая проблема с выключкой по ширине в том, что увеличивать нужно не только пробелы между словами, но и межбуквенное расстояние (letter-spacing). Пакеты для вёрстки бумаги всё это умеют примерно с семидесятых и кнутовского ТЕХа, но для браузеров это загадочная нереализуемая магия.
daggert
30.09.2025 09:06Вторая проблема с выключкой по ширине в том, что увеличивать нужно не только пробелы между словами, но и межбуквенное расстояние
Не не не, не надо. Текст где разное межбуквенное расстояние в зависимости от строки - это жесть для глаз.
monochromer
30.09.2025 09:06Отображение со свойством
empty-cellsсильно зависит отborder-collapseС прошлого года у нас появилось ещё свойство
text-align-last.Странно, я это свойство в 2015-ом году использовал как улучшение.
HenryFrod
30.09.2025 09:06Спасибо, я отстал на пару веков от современных тенденций в CSS и мне статья очень полезна.
empty-cells - Это удобно для визуальных дашбордов, когда нужно красиво сделать таблицу, а использовать ничего кроме css нельзя. У меня без этого свойства кодом другой класс присваивался.
text-align-last - для html генерации бланков, в т. ч. Строгой отчётности - самое то. У нас на работе могут ради этого самого переноса в отчёте заставить не печатать генерированную форму, а выгрузить не в Ворд и там подправить (конечно же пробелами, какие отступы)
shape-outside - вот прям 2 дня назад сделал печатную форму пропуска где меня просили сделать огибание круглой фото. Я это решил разбивкой на несколько блоков с position absolute. Теперь переделаю.
tab-size - у меня в фреймворке это решено через таблицы (табуляции для просмотра кода со страницы) теперь можно сделать по человечески.
text-emphasis - тут привет с сайтов на старорусском
Я понимаю, что я не показатель и нормальные кодеры, если их разбудить по среди ночи и спросить про огибание картинки текстом средствами css - тут же выплюнут минимум 3 способа, да ещё и в соответствии в требованиями консорциума. Начинающим это и не нужно, но вот для не очень начинающих, но периодически практикующих статья очень полезна.
stas-clear
30.09.2025 09:06По моему мнению большинство из них сделано чисто ради какого ни будь эксклюзивного и абстрактного дизайна, но вот для ударений я бы вообще ввёл свой уникальный тег и всё, всем было бы проще, чем заключать в SPAN уродуя при этом цельность слова в коде, да еще ему и класс прописывать. Сделали бы просто что то вроде <accent>a</accent>
masterthemac
30.09.2025 09:06Как мне кажется самое очевидное использование выравнивания последней строки - это имитация расположения подписи автора на бумаге. Возьмем эпистолярный жанр - выводим на страницу текст письма как обычно, а "с уважением, ваш Вольдемар" прижатым вправо.
ZloiGoroh
30.09.2025 09:06Вот добавили бы возможность манипулировать строчками по лекалам `:nth-child()`, цены бы им не было
Vindicar
Насчёт hyphenate-character я могу предположить, что это перестраховка. Трудно переоценить степень упоротости естественных языков, может, где-то и впрямь вместо дефиса другой символ принят.
artptr86
В канадском слоговом письме конечный c обозначается горизонтальной чертой
ᐨ, поэтому для переносов необходимо использовать символ᐀CANADIAN SYLLABICS HYPHEN (U+1400)vanxant
и ещё типография. Этих чёрточек разной длины штук -надцать, и обычный "минус" здесь далеко не лучший выбор для символа переноса.
newdya
Да: https://ru.wikipedia.org/wiki/Перенос_(типографика)#Знаки_переноса