Новое в Chrome 133

Рэйчел Эндрю

Вот что вам нужно знать:

Расширенная функция CSS attr()

Эта функция добавляет к существующей функции attr() функции, указанные в CSS Level 5. Это позволяет использовать типы помимо <string> во всех свойствах CSS (в дополнение к существующей поддержке содержимого псевдоэлементов).

В следующем примере значение свойства color для div использует значение атрибута data-color . Значение этого атрибута преобразуется в <color> с помощью attr() и type() . Резервное значение установлено на red .

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Узнайте больше об обновлении CSS attr() .

Запросы контейнера состояния прокрутки CSS

Используйте контейнерные запросы для стилизации потомков контейнеров на основе их состояния прокрутки.

Контейнер запроса — это либо контейнер прокрутки, либо элемент, на который влияет положение прокрутки контейнера прокрутки. Могут быть запрошены следующие состояния:

  • stuck : контейнер с липким расположением приклеен к одному из краев ползунка прокрутки.
  • snapped : контейнер, выровненный по привязке к прокрутке, в настоящее время привязан горизонтально или вертикально.
  • scrollable : можно ли прокручивать контейнер прокрутки в запрошенном направлении.

Новый тип контейнера: scroll-state позволяет запрашивать контейнеры. Например:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Узнайте больше и посмотрите несколько демонстраций запросов состояния прокрутки CSS .

CSS text-box , text-box-trim и text-box-edge

Свойство text-box-trim определяет стороны, которые необходимо обрезать (сверху или снизу), а свойство text-box-edge указывает, как следует обрезать край.

Эти свойства позволяют точно контролировать вертикальный интервал с помощью показателей шрифта.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Узнайте, как использовать эти новые свойства в CSS text-box-trim .

И многое другое!

Конечно, есть еще много чего.

  • Animation.overallProgress дает вам удобное и последовательное представление о том, как далеко продвинулась анимация на протяжении ее итераций, независимо от характера ее временной шкалы.
  • Node.prototype.moveBefore позволяет перемещать элементы по дереву DOM без сброса состояния элемента.
  • Интерфейс FileSystemObserver уведомляет веб-сайты об изменениях в файловой системе.
  • Метод PublicKeyCredential getClientCapabilities() позволяет определить, какие функции WebAuthn поддерживаются клиентом пользователя.

Подробную информацию об этих и многих других функциях Chrome см. в полных примечаниях к выпуску Chrome 133 !

Дальнейшее чтение

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 133.

Подписаться

Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Как только выйдет Chrome 133, мы будем здесь, чтобы рассказать вам, что нового в Chrome!