scrollbar-gutter: stable;
Решает проблему смещения контента при появлении или скрытии скроллбара (полоса прокрутки). Часто эта проблема появляется при открытии/закрытии модального окна.
Когда модальное окно открывается, стандартная практика заключается
в том, чтобы скрыть
полосу прокрутки, применяя
к элементу body свойство overflow: hidden;. Однако такое
решение может привести к
неприятным смещениям контента, когда полоса прокрутки исчезает. Свойство scrollbar-gutter
предлагает удобное решение для этой проблемы.
Существует несколько значений этого свойства:
text-wrap: balance;
В случае, если заголовок не помещается в одну строку, часть текста переносится на следующую строку, что может выглядеть неаккуратно, получаются одиноко повисшие слова портить общий вид страницы.
С введением свойства text-wrap: balance; появилась
возможность более эффективно распределять символы
в заголовках. Это свойство позволяет браузерам равномерно распределять текст между строками, минимизируя
вероятность появления висячих слов. В результате текст выглядит более эстетично и читаемо, что, безусловно,
порадует дизайнеров,
стремящихся к идеальному оформлению.
Однако следует учитывать, что данное свойство имеет свои
ограничения: оно эффективно
работает лишь при объемах
текста длиной до шести строк.
Это связано с тем, что балансировка символов по нескольким строкам требует определенных вычислительных ресурсов,
что в дальнейшем может создать нагрузки для браузера. Поэтому text-wrap: balance; лучше всего
подходит для применения в таких случаях,
как заголовки, модальные окна, узкие столбцы и подсказки. Для основного контента это свойство использовать не
рекомендуется.
Кроме того, стоит отметить, что применение text-wrap: balance; не отменяет
необходимости в
использовании неразрывных пробелов и дефисов в верстке,
что позволяет поддерживать должное качество отображения текста и избегать нежелательного разбиения слов в
неподходящих местах.
align-content: center;
Позволяет отцентрировать элемент по вертикали не только во flex и grid контейнерах, но внутри блочных элементов.
text-underline-offset
Свойство text-underline-offset в
CSS позволяет управлять положением линии подчеркивания, которая
создается с помощью свойства text-decoration. Это
свойство не
является частью сокращенного свойства
text-decoration, что означает,
что его можно использовать отдельно для настройки только
подчеркивания.
Значения свойства text-underline-offset:
text-indent
Свойство text-indent в CSS
предназначено для задания отступа первой строки текста в блоке. Это
позволяет выделить первую строку абзаца, улучшая читаемость и визуальное восприятие текста.
Свойство может принимать различные единицы измерения, такие как пиксели (px), проценты (%), эм (em), рем (rem) и другие.
Например, text-indent: 20px;
создаст отступ в 20 пикселей для первой строки абзаца.