Вот что вам нужно знать:
- Появились новые международные 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 .
Всплывающий API
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.
- Что нового в Chrome DevTools (106)
- Устаревание и удаление Chrome 106
- Обновления ChromeStatus.com для Chrome 106
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Меня зовут Адриана Хара, и как только выйдет Chrome 107, я буду здесь, чтобы рассказать вам, что нового в Chrome!
,
Вот что вам нужно знать:
- Появились новые международные 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 .
Всплывающий API
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.
- Что нового в Chrome DevTools (106)
- Устаревание и удаление Chrome 106
- Обновления ChromeStatus.com для Chrome 106
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Меня зовут Адриана Хара, и как только выйдет Chrome 107, я буду здесь, чтобы рассказать вам, что нового в Chrome!