Новые возможности CSS облегчающие вашу жизнь

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

Свойство text-wrap

Свойство text-wrap используется для указания того, должен ли текст в элементе переноситься или нет. Оно является частью спецификации CSS Text Module Level 4.

Свойство text-wrap может принимать несколько значений, но наиболее интересные balance и pretty.

Если для свойства text-wrap установлено значение balance, то браузер будет стараться перенести текст таким образом, чтобы последняя строка элемента была такой же длины, как и первая. Это может быть полезно, если необходимо обеспечить согласованный вид текста в элементе. Например, в заголовке статьи в блоге.

С другой стороны, если свойство text-wrap установлено в значение pretty, то браузер попытается интеллектуально разбить текст в блочных элементах таким образом, чтобы в последней строке не было одинокого слова.

Ограничения области действия CSS

С помощью правила @scope теперь можно ограничить область действия CSS в пределах определённого элемента. По сути, это позволяет создать CSS-правило, которое будет применяться только к определённому элементу и его дочерним элементам.

Например, если вы хотите ограничить CSS в пределах определённого элемента, вы можете сделать это с помощью селекторов class или ID, как показано ниже.

@scope (.class-component, #id-component) {
  /* CSS rules */
}

Приведём пример использования.

.all-green p {
  color: darkgreen;
}

@scope(.all-pink) {
  p {
    color: #c94f65;
  }
}

В результате элементы p внутри элемента .all-pink будут иметь розовый цвет, а элементы p за его пределами — зелёный.

Ограничение области действия CSS помогает избежать использования слишком специфических селекторов, а также позволяет избежать использования в CSS !important.

Узнать больше о @scope

• Ограничение области действия селекторов с помощью CSS правила @scope
• Как CSS @scope может заменить БЭМ

Автоувеличение textarea

В спецификации CSS появится новое правило под названием form-sizing, позволяющее управлять изменением размеров таких элементов, как <textarea>.

Если установить в свойство form-sizing значение normal, то браузер будет автоматически увеличивать высоту элемента <textarea> по мере набора пользователем текста.

textarea {
    form-sizing: normal;
}

View Transitions

В спецификации CSS появится новый метатег view-transition, позволяющий управлять переходом области просмотра при прокрутке страницы пользователем.

Например, если необходимо добавить эффект затухания в область просмотра при переходе пользователя на новую страницу, то это можно сделать следующим образом.

<meta name="view-transition" content="same-origin">

Здесь значение same-origin гарантирует, что переход произойдёт только в том случае, если пользователь перейдёт на страницу с тем же источником.

Это делает переход между страницами более плавным и менее резким. Больше похоже на нативное приложение.

Узнать больше о View Transitions

• Введение в View Transitions API

Функция light-dark()

light-dark() — это новая функция CSS, позволяющая задавать различные значения для светлого и тёмного режимов.

В качестве аргументов функции можно указать два значения цвета. Первое значение будет использоваться для светлого режима, а второе — для тёмного.

body {
  background-color: light-dark(white, black);
}

В результате цвет фона элемента body будет белым в светлом режиме и черным в тёмном.

Помимо предпочитаемой пользователем темы, функция light-dark() может быть использована для переключения между двумя значениями, основанными на свойстве color-scheme.

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc);
  /* In Light Mode = return 1st value.
  In Dark Mode = return 2nd value. */
}

Узнать больше о light-dark()

• Новая CSS функция light-dark() для переключения цвета темы

Вложенность в CSS

Недавно модуль под названием CSS Nesting Module появился в Safari Technology Preview 162 и Chrome Dev (при включении в браузере флага "Experimental Web Platform features").

После включения можно писать приведённый ниже Sass-подобный код в CSS следующим образом.

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

Конечно, это имеет ряд ограничений, о которых необходимо помнить.

Узнать больше о вложенность в CSS

• Вложенность CSS