Новое в Chrome 106

Пит ЛеПейдж
Адриана Хара

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

  • Появились новые международные API , которые дают вам больше контроля над форматированием чисел.
  • Существует исходная пробная версия API всплывающих окон, позволяющая упростить предоставление пользователю критического контента.
  • Мы добавляем несколько функций CSS для улучшения взаимодействия.
  • И есть еще много чего .

Я Пит ЛеПейдж и Адриана Хара . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 106.

Новые международные API

Международные API помогают отображать контент в локализованном формате.

Как и другие международные API, это перекладывает нагрузку на систему, поэтому вам не нужно отправлять или поддерживать сложный код локализации каждому пользователю.

API знает, где находится символ валюты, как форматировать дату и время или составлять список.

В Chrome 106 добавлено множество новых функций числовых форматов.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Нужно отобразить диапазон цен? formatRange поможет вам.

Создайте новый объект numberFormat , укажите style и другие параметры, а также количество отображаемых цифр.

Затем вызовите formatRange() , чтобы получить отформатированную строку.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Хотите округлить число до ближайшего приращения пять с точностью до двух знаков после запятой? Без проблем.

Укажите minimumFractionDigits и roundingIncrement , затем вызовите format() .

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Вы даже можете указать браузеру включать конечные нули с помощью trailingZeroDisplay , что очень полезно для цен.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Дополнительную информацию можно найти в документации по формату международного номера на MDN .

Pop-Up API значительно упрощает создание пользовательских интерфейсов в тех случаях, когда вам просто нужно разместить информацию прямо перед пользователем.

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

Всего лишь с помощью следующего фрагмента API позаботится о рендеринге элемента поверх всего остального контента , а также обработает пользовательский ввод и управление фокусом.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

По умолчанию пользователи могут закрыть всплывающее окно с помощью таких жестов, как клавиша ESC или нажатие на другие элементы.

Разработчики имеют полный контроль над стилем, расположением и размером верхнего слоя, а также возможность изменять поведение по умолчанию. Использование только CSS и HTML.

Прочтите статью Джей, чтобы узнать больше примеров и вариантов API.

Подпишитесь на пробную версию Origin , чтобы легко предоставлять своим пользователям своевременную информацию. Поделитесь с нами вашими мыслями.

Новые возможности CSS

Есть две новые функции CSS, которые улучшают взаимодействие и, надеюсь, сделают вашу жизнь немного проще.

В городе появилась новая единица длины: к вечеринке присоединяется ic . ic похож на ch . Но ic используется специально для текста, написанного на языках, использующих идеограммы. По сути, он измеряет длину на основе ширины или высоты этого символа [точка где-то], что означает воду.

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

Например, если вы установите max-width контейнера, скажем, 10ic, вы знаете , что контейнер будет содержать не более 10 глифов полной ширины, независимо от размера шрифта. Проверьте это на следующем примере:

Поддержка CSS Grid для интерполяции для grid-template-columns и grid-template-rows скоро появится, она была запланирована на 106, но отложена и будет запущена в Chrome 107, вы все еще можете опробовать ее в Chrome Beta. Вот код Брамуса в качестве примера:

И более!

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

  • Мы начинаем пятый этап плана сокращения количества пользовательских агентов.
  • Поддержка HTTP2 Push и постоянного типа квот устарела.
  • А свойство CSS hyphenate-character теперь доступно без префикса.

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

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

Подписаться

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

Меня зовут Адриана Хара, и как только выйдет Chrome 107, я буду здесь, чтобы рассказать вам, что нового в Chrome!