Не так давно в CSS появились переменные, но мало кто знает, что их ещё можно и типизировать!
Это стало возможным благодаря директиве @property:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

Или вот такому объявлению JS:

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "red",
});

1) При помощи свойства syntax мы указываем какой тип будет присвоен нашей переменной (полный список возможных значений и их комбинаций можно найти в спецификации).
2) inherits указывает, будет ли объявленная позже в коде переменная наследоваться потомками или нет.
3) initialValue задаёт значение по-умолчанию по аналогии со вторым параметром внутри var(--btn-bg, red);

Далее мы можем это использовать таким образом:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  --my-color: blue;
  background-color: var(--my-color); /* Будет использован blue */
}

.box:hover {
  --my-color: green; /* Будет использован green */
}

/* Дочерние элементы уже не получат эту переменную, т.к. мы ранее указали inherits: false */

.child {
  background-color: var(--my-color); /* Будет использован red, значение по-умолчанию */
}

Если мы назначим переменную, значение которой будет отличаться от типа, указанного @property, то будет взято значение по-умолчанию:

.box {
  --my-color: 42px; /* Тип не соответствует <color> */
  background-color: var(--my-color); /* Будет использован red, значение по-умолчанию */
}

Большинство разработчиков скорее всего знает о существовании глобальных значений для CSS свойств, таких как inherit, initial и unset, но существуют и другие. Этот список со временем понемногу разрастается.

Расскажу обо всех:

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

initial - сбрасывает значение до того, которое установлено по-умолчанию. Например, для display это будет inline даже если элемент до этого был блочным.

unset - если свойство является наследуемым, то будет вести себя как inherit, если нет, то как initial.

revert - возвращает свойство к значению, которое было бы, если бы никаких стилей не было бы применено вообще. То есть для блочного элемента сбросит display до block, а для строчного до inline.

revert-layer - откатывает значение до того, которое было определено в предыдущем каскадном @layer слое.

Наконец-то появилась возможность удобного анимирования появления и исчезновения элементов в CSS, используя дискретные свойства, такие как display. Делается это при помощи свойства transition-behavior со значением allow-discrete и директивы @starting-style.

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 200px;
      height: 100px;
      background: coral;
      display: block;
      opacity: 1;
      transition: opacity 1s, display 1s allow-discrete;
    }

    .box.hidden {
      opacity: 0;
      display: none;
    }

    @starting-style {
      .box {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <button onclick="document.querySelector('.box').classList.toggle('hidden');">
    Переключить
  </button>

  <div class="box">Элемент с плавным появлением и исчезновением</div>
</body>

</html>

transition-behavior: allow-discrete - откладывает применение display: none до конца перехода. То есть даёт возможность плавного исчезновения. Поддерживается всеми современными браузерами.

@starting-style - указывает стили, которые должны быть уже применены на момент переключения display с none на block. То есть даёт возможность плавного появления. Пока что не поддерживается только в Firefox.

Свойство display в CSS со временем сильно модернизировалось.

Например не все знают, что теперь в него можно передавать двойные значения:

display: inline flex;
display: block flex;
display: inline grid;
display: block grid;

Первое передаваемое значение отвечает за взаимодействие с внешними элементами, а второе с внутренними. Этот синтаксис сильно напоминает старые составные значения по типу inline-block или inline-flex и по сути является полным аналогом, но более гибким.

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

display: inline table;
display: block ruby;  

С тех пор как появились двойные значения, составные по типу inline-block считаются устаревшими и больше не рекомендуются к использованию.

Когда мы используем display: block; или display: inline; то под капотом они преобразуются в display: block flow; и display: inline flow; соответственно. (о flow и flow-root чуть ниже).

Такие же преобразования происходят и для других вариантов отображения:

display: flex; →  display: block flex;
display: inline-flex; →  display: inline flex;
display: grid; →  display: block grid;
display: inline-grid; →  display: inline grid;
display: table; →  display: block table;
display: inline-table; → display: inline table;

flow это стандартное значение для внутреннего позиционирования блочных и строчных элементов, а вот flow-root это более интересный вариант.

Он позволяет нам создать так называемый контекст блочного форматирования или кратко BFC. На практике это позволяет нам пользоваться float вёрсткой без надобности использования неудобных хаков ввиде clear: both; или overlfow: auto;, а также избежать "схлопывания" margin.

Также появился вариант display: contents;
С помощью него мы можем сделать элемент "невидимым" при позиционировании в родителе, тем самым давая дочерним элементам принять выравнивание, которое приходит сверху. Это очень удобная фича, когда мы хотим стилизовать группы элементов внутри flex или grid контейнера, но не хотим чтобы этой обёртке тоже приходилось задавать display: flex; или display: grid; чтобы элементы снова выровнялись так как нам необходимо или приняли нужные отступы.

Мало кто знает, что в ссылки можно вставлять не только mailto или tel, но и кое-что более интересное.
Вот небольшой список возможных вариантов:

  <a href="sms:+1234567890">Отправить SMS</a>
  <a href="tg://resolve?domain=fe_notes">Открыть Telegram-канал</a>
  <a href="https://wa.me/1234567890">Написать в WhatsApp</a>
  <a href="facetime:+1234567890">Позвонить по FaceTime</a>
  <a href="itms-apps://apps.apple.com/app/id123456789">App Store</a>
  <a href="zoommtg://zoom.us/join?confno=123456789">Присоединиться к Zoom конференции</a>
  <a href="steam://store/570">Steam Store</a>
  <a href="webcal://example.com/calendar.ics">Добавить календарь</a>
  <a href="magnet:?xt=urn:btih:HASH&dn=NAME">Скачать торрент</a>
  <a href="bitcoin:ADDRESS?amount=0.001&label=Example">Отправить биткоины</a>
  <a href="ethereum:0x123...?value=0.001">Отправить эфириум</a>
  <a href="geo:55.7558,37.6173">Открыть карты с координатами Москвы</a>
  <a href="maps:q=Красная+площадь,+Москва">Открыть карты с адресом</a>

Полный набор можно найти здесь.

В CSS у <input /> элементов автоматически формируются браузерные подсказки для последующих вводов. Но это не всегда удобно. К счастью мы можем этим управлять при помощи <datalist /> тега.

Рассмотрим следующий пример:

<input type="text" list="cities" placeholder="Выберите город" />

<datalist id="cities">
  <option value="Нижний Новгород" label="Город на слиянии Волги и Оки"></option>

  <option value="Челябинск" label="Город сурового климата"></option>

  <option value="Омск" label="Один из старейших городов Сибири"></option>

  <option value="Самара" label="Космическая столица России"></option>

  <option value="Ростов-на-Дону" label="Южные ворота России"></option>
</datalist>

При помощи list и id атрибута связали набор из подсказок с полем для ввода текста. Сам <datalist /> и вложенные в него <option /> никак не влияют на содержимое DOM и не отрисовываются, а просто являются удобным способом работы с нативными элементами в HTML.

Не так давно появилась широкая поддержка верхнеуровневого await. Это значит, что мы теперь можем его использовать вне функций async.

В браузерах эта фича доступна на текущий момент в ECMAScript модулях, а в Node.js в.mjs файлах и в проектах с "type": "module" в package.json.

<script type="module">
  const result = await fetchSomeData();
  console.log(result);
</script>

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

В последнее время начала расширяться поддержка at-правила @scope, которое позволяет контролировать области распространения стилей и их удобное переопределение.

Разберём пример:

<div class="card">
  <p>text</p>
</div>

@scope (.card) {
  p {
    color: red;
  }
}

По сути это будет работать точно также, как и с таким селектором:

.card p {
  color: red;
}

Но первым главным отличием будет то, что специфичность будет уже другой. Если в примере с обычным селектором она будет 0, 1, 1, то в случае со @scope она будет просто 0, 0, 1. Это одно из преимуществ, которое позволяет применить стиль к необходимому нам элементу, не увеличивая его специфичность, которую в последствии будет всё сложнее переопределить. Как можно понять из примера, мы получим вес только благодаря p, а всё, что указано в @scope просто не будет учитываться.

Идём дальше:

<div class="page">
  <div>
    <a href="/about">about us</a>
  </div>

  <p>
    <a href="/products">products</a>
  </p>
</div>

@scope (.page) to (p) {
  a {
    color: red;
  }
}

Здесь мы используем дополнительную приставку ввиде to (p). Она полезна тем, что позволяет указать внутри селектор, который должен быть исключён при поиске селекторов внутри @scope.

Таким образом, мы отсеиваем теги <a>, которые находятся внутри <p>, но оставляем все остальные. Специфичность по-прежнему остаётся 0, 0, 1, что достаточно удобно для переопределения другими стилями при необходимости.

Разберём ещё 1 пример:

<div class="text">
  text
</div>

@scope (.text) {
  :scope {
    color: red;
  }
}

Здесь при помощи селектора :scope стили применяются к самому элементу, указанному в @scope, то есть к <div>. Специфичность здесь будет 0,1,0, т.к. :scope это - псевдокласс.

Это основные возможности @scope, подходящие для решения большинства задач. Подробнее можно почитать в статье на chrome for developers или посмотреть в видео Кевина Пауэлла.

Синтаксис CSS начал упрощаться

Например, @media теперь не обязательно писать вот таким муторным способом:

@media (min-width: 600px) and (max-width: 800px) {
  .text {
    color: silver;
  }
}

Есть более удобная альтернатива:

@media (600px <= width <= 800px) {
  .text {
    color: silver;
  }
}

Также теперь вместо такого громоздкого и неудобного блока с функциями трансформаций стало возможным писать их по отдельности:

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

.element {
  translate: 50px 100px;
  rotate: 45deg;
  scale: 1.2;
}

Появилась новая функция для объявления градиента в CSS

Ранее нам был доступен linear и radial градиенты, теперь добавили новый — conic. Кто ранее работал с градиентами в Adobe Photoshop наверняка знает как он устроен.

Синтаксис:

conic-gradient([from <angle>] [at <position>], <color-stop>, <color-stop>, ...)

from <angle> — начальный угол (по умолчанию 0deg = вверх).
at <position> — положение центра (по умолчанию центр элемента).
<color-stop> — цвет и его позиция (угол) в градиенте.

Пример:

background: conic-gradient(
  from 0deg at center,
  red 0deg,
  yellow 90deg,
  green 180deg,
  blue 270deg,
  red 360deg
);

Также у него, как и других градиентов, есть repeating вариант:

repeating-conic-gradient([from <angle>] [at <position>], <color-stop>, <color-stop>, ...)

Пример:

background: repeating-conic-gradient(
  from 0deg at center,
  white 0deg 10deg,
  black 10deg 20deg
);

Проблема с перескоком контента решена!

Думаю, что почти все сталкивались с проблемой "перескока" контента при отключении скроллбара. Ранее исправить эту проблему было достаточно сложно, но теперь всё решается в одну строчку при помощи свойства scrollbar-gutter.

Пример:

.element {
  overflow: auto;
  scrollbar-gutter: stable;
}

Работает это так: к элементу со скроллом указываем данное свойство и позднее, когда этот скролл пропадёт, пространство под ним останется прежним.

Возможные значения:
auto (по умолчанию) — место под скроллбар не резервируется.
stable — резервирует пространство даже когда скроллбара нет.
stable both-edges — резервирует место с обеих сторон (для вертикального и горизонтального скроллбаров).

P.S.
stable both-edges, кстати, может показаться бесполезным, но он нужен для работы с языками, которые читаются справа-налево и сайтами, которые поддерживают их наряду с обычными. То есть это случаи, когда скролл может не просто исчезать, а прыгать слева направо и наоборот.

display: block научился выравнивать свой контент по аналогии с display: flex 🤪

Да-да, это не шутки. Теперь для вертикального выравнивания элементов необязательно использовать флекса, гриды или более старые варианты ввиде таблиц, марджинов и прочего. Теперь это можно делать при помощи свойства align-content.

Синтаксис:

align-content: start | center | end;

Свойство поддерживается всеми современными браузерами. Почитать подробнее можно тут.

Теперь можно создавать аккордеоны без боли!

Ранее было дико неудобно делать плавную анимацию открытия-закрытия аккордеона. Проблема заключалась в том, что CSS не умеет делать переход между, скажем, 0px и auto.

Если бы мы попытались каким-либо образом это сделать, то наш переход (transition) просто бы не сработал и произошёл бы резкий перескок.

С недавнего времени появилась функция calc-size(), которая призвана решить эту проблему.

Синтаксис:

calc-size(<size>, <operation>)

<size> — автоматически вычисляемое значение, например auto, min-content, stretch и т. п.

<operation> — арифметическое выражение. В котором size означает текущий размер вычисленный из <size>.
Например: size + 30px. Этот параметр, как и первый, является обязательным и, если вам не нужно как-то изменять вычисленный размер, то нужно передать просто size.

Пример:

.accordion {
  height: 0;
  transition: height 250ms ease;
}

.accordion.open {
  height: calc-size(auto, size + 25px);
}

Поддерживается пока что не всеми основными браузерами.

Библиотеки для работы с поповерами скоро станут ненужны!

Совсем недавно в браузеры начали завозить Anchor Positioning API. Он позволяет работать с поповерами без применения JS кода и различных библиотек вроде Floating UI.

Ниже представлен базовый пример:

<button class="button">Я кнопка</button>
<div class="popover">Я поповер</div>

.button {
  anchor-name: --button-anchor;
}

.button:hover+.popover {
  display: block;
}

.popover {
  display: none;
  position: absolute;
  position-anchor: --button-anchor;
  top: anchor(top);
  left: anchor(right);
  margin-left: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

Хороший разбор технических подробностей можно найти на chrome for developers, а более полный на MDN. Также рекомендую посмотреть практическое применение на канале Кевина Пауэлла.

На данный момент поддерживается только в Chrome и Edge.

Хорошо, Node.js 🤣🤣🤣

min(), max() и clamp() функции стали доступны во всех популярных браузерах

Пример min():

.element {
  width: min(50%, 500px);
}

Функция принимает неограниченное количество аргументов и выбирает из них наименьшее. Очень удобна при использовании с динамическими значениями вроде % / vh / vw / rem и т.д.

Пример max():

.element {
  width: max(50%, 500px);
}

Он по сути аналогичен min(), но в свою очередь выбирает наибольшее значение из переданных.

Пример clamp():

.element {
  width: clamp(200px, 50%, 1000px);
}

clamp() в отличие от предыдущих двух функций принимает только 3 обязательных аргумента: минимальное значение, рекомендованное и максимальное.

Работает это следующим образом: всегда будет применяться рекомендованная единица измерения, но она никогда не выйдет за рамки минимального и максимального значений (1-ый и 3-ий аргументы).

Новые математические функции CSS

Стали доступны функции round(), rem() и mod().

round() округляет переданное значение.

.container {
  height: round(up, 7.1px, 3px); // 9px
}

Первый параметр задаёт тип округления, второй — округляемое значение, а третий указывает чему должно быть кратно итоговое число (чаще всего эта опция вам будет не нужна и вы будете задавать просто 1px, чтобы, скажем, 7.1px округлить вверх до 8px).

rem() и mod() возвращают остаток от деления двух переданных им чисел аналогично оператору % в JavaScript.

.container {
  height: rem(21px, 2px); // 1px
}

Разница между ними лишь в том, что rem() всегда принимает знак делимого, а mod() знак делителя.

.container {
  margin-top: rem(-21px, 2px); // -1px
  margin-bottom: rem(21px, -2px); // 1px
}

.container {
  margin-top: mod(21px, -2px); // -1px
  margin-bottom: mod(-21px, 2px); // 1px
}

⚙️ Функции поддерживаются всеми современными браузерами: round(), rem(), mod().

Нашёл крутейший инспектор node_modules

В нём есть:
— Подробные схемы и графы зависимостей пакета
— Информация об устаревших зависимостях
— Куча разных фильтров для поиска необходимого
— Размер, содержимое и прочая полезная информация отдельно взятого пакета
— Возможность сравнения зависимостей
— И много-многое другое

Спасибо Энтони Фу за его старания.

https://node-modules.dev/

Наконец-то исправлена проблема нативной валидации полей

Как вы знаете, в CSS имеются такие псевдоклассы как :valid и :invalid для того, чтобы можно было стилизовать элементы на основании валидности введённых пользователем данных.

Эти псевдоклассы работают не совсем так, как мы чаще всего ожидаем. Они применяют стили, даже если пользователь ещё ничего не делал с полем ввода.

Для решения этой проблемы были добавлены новые псевдоклассы :user-valid и :user-invalid, которые применяют стили уже после того, как пользователь произвёл какое-то действие над полем ввода.

Скорее всего вы будете пользоваться какой-то библиотекой для создания форм, вроде react-hook-forms, чтобы получить более обширные возможности, но всё же теперь без использования библиотек можно писать такой код.

⚙️ Поддержка браузеров широкая: user-valid, user-invalid.

<select> теперь официально можно стилизовать!

Сообщество Open UI отклонило концепции элементов <selectlist> и <selectmenu> и приняло решение проапгрейдить старый элемент <select>.

Выглядит это следующим образом:

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  <option>
    <div>Яблоко</div>
    <img src="./apple.png" alt="">
  </option>
   
  <option>
    <div>Груша</div>
    <img src="./pear.png" alt="">
  </option>
  
   <option>
     <div>Арбуз</div>
     <img src="./watermelon.png" alt="">
   </option>
</select>

Для того, чтобы элементы можно было стилизовать, используется вот такой селектор:

select,
::picker(select) {
  appearance: base-select;
}

Он сбрасывает дефолтное поведение для самого <select> и для его выпадающего списка.

🔗 Более сложные примеры можно посмотреть в официальной статье Chrome.

⚙️ Поддержка браузерами пока что небольшая, но в Chrome уже работает: customizable select, selectedcontent.

Свойство resize работает не только с textarea 😮

Мало кто знает, но свойство resize можно применять почти ко всем html элементам. Исключением являются только:
— строчные элементы
— блочные элементы, для которых задано свойство overflow со значением visiblе

При применении данного свойства к <img>, <picture>, <video> или <iframe>, оно работать не будет. Нужного эффекта можно добиться всего лишь обернув эти элементы в div, у которого будет задан resize.

⚙️ Свойство не новое и имеет широкую поддержку браузерами