Хабр, привет!

Я много лет рассказываю о 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 ООО «МТ ФИНАНС»