Chrome 125 beta

CSS привязка позиционирования

Наиболее значимая функция в новой версии хрома, это позиционирование к элементу. Ранее уже было анонсировано в экспериментах вместе с нативным popover эта функция. И работает она просто, связываются элементы через атрибуты и в свойствах позиционирования (top, left, bottom, right) указывается функция anchor().

// Пример
<button popovertarget="info" id="btn" class="information">i</button>
<div id="info" anchor="btn" popover>Text</div>

[popover] {
  inset: unset;
  bottom: anchor(top);
  left: anchor(center);
}

CSS функции для чисел round() , mod() и rem()

Коротко о функциях:

• round() — округляет в зависимости от выбранной стратегии округления.
• mod() и rem() — остаток от деления.

// Пример
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

line-height: rem(21, 2); /* 1 */
line-height: rem(14, 5); /* 4 */
line-height: rem(5.5, 2); /* 1.5 */