Новое в Chrome 133

Рэйчел Эндрю

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

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

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

В следующем примере значение свойства 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!