Новое в Chrome в первом квартале 2025 года: текстовое поле CSS, доступ к файловой системе для Android, базовые обновления и многое другое! Новое в Chrome в первом квартале 2025 года: текстовое поле CSS, доступ к файловой системе для Android, базовые обновления и многое другое! Новое в Chrome в первом квартале 2025 года: текстовое поле CSS, доступ к файловой системе для Android, базовые обновления и многое другое! Новое в Chrome в первом квартале 2025 года: текстовое поле CSS, доступ к файловой системе для Android, базовые обновления и многое другое!

Mariko Kosaka
X

Прошло много времени! Видео «Новинки в Chrome» возвращается с информацией о:

Я Марико. Давайте углубимся и посмотрим, что нового в Chrome за последние три выпуска.

Текстовое поле CSS

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

Каждый шрифт создает разное количество пространства над и под символами, что определяет размер элемента.

До сих пор контролировать размер этих пространств было невозможно.

Заголовок показан с лишним пространством над ним, которое выглядит как обрезанное ножницами и удаленное.

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

Вы также можете написать это, используя сокращенное свойство text-box .

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

API доступа к файловой системе

Добавленный в Chrome 133 примитив DOM Node.prototype.moveBefore позволяет перемещать элементы по дереву DOM без сброса состояния элемента.

Когда вы удаляете, а затем повторно вставляете элемент для перемещения элемента DOM, состояние этого элемента сбрасывается. Используя этот новый примитив, состояние узла сохраняется.

Таким образом, iframe остаются загруженными, активные элементы остаются в фокусе, всплывающие окна и диалоговые окна остаются открытыми, а CSS-переходы или анимация продолжаются.

Сохраняющий состояние способ перемещения элемента DOM

API доступа к файловой системе уже некоторое время доступен на Chrome Desktop. Этот API позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API доступен на Android, а также в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() . Этот метод показывает средство выбора файлов, а затем возвращает дескриптор файла, который можно использовать для чтения файла.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Чтобы сохранить файл на диск, вы можете использовать тот же дескриптор файла, который вы получили ранее, или вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Световое отклонение приходит к элементу <dialog>

Если вы использовали Popover API для создания поповера, вы знаете, что одной из приятных особенностей Popover API является возможность легкого закрытия. Пользователи могут щелкнуть фон, и элемент всплывающего окна закроется, не нажимая специально кнопку закрытия.

Возможность легкого отклонения теперь поддерживается и в элементе <dialog> !

Если для атрибута closedby установлено any , диалоговое окно можно закрыть, щелкнув за пределами диалогового окна или нажав клавиши Escape.


<dialog closedby="any">...</dialog>

Это то же самое поведение, что и в случае, когда для всплывающего окна установлено значение «авто».

Обновления в базовой версии

А вот новости о Baseline

Базовый уровень Недавно доступно

Во-первых, это новые базовые функции, которые недавно появились во всех четырех основных браузерах.

scrollbar-gutter и scrollbar-width

С помощью свойства CSS Scrollbar-Gutter вы можете зарезервировать место для полосы прокрутки, чтобы избежать нежелательных изменений макета при появлении или исчезновении полосы прокрутки. С помощью ширины полосы прокрутки вы можете создать более узкую полосу прокрутки или даже полностью скрыть полосу прокрутки, не влияя на прокрутку.

ruby-align

С помощью CSS-свойства Ruby-align вы можете указать выравнивание базового текста Ruby и текста аннотаций Ruby.

Promise.try

Promise.try — это удобный метод обработки ошибок синхронных запросов. Используя это, вы можете исключить функции обратного вызова при попытке запроса с помощью Promise.resolve.

Сборка мусора Wasm и оптимизация хвостовых вызовов

WebAssembly теперь поддерживает сборку мусора и оптимизацию хвостовых вызовов.

Базовый уровень Широко доступен

Массив findLast() и findLastIndex()

Array findLast() и findLastIndex() — очень удобные методы для получения элементов из конца массива. Эта функция поддерживается всеми основными браузерами в течение 30 месяцев, а это означает, что теперь она широко доступна в Baseline.

Отдельные свойства преобразования

Отдельные свойства преобразования , которые дают вам более детальный контроль над преобразованиями CSS, теперь также широко доступны в Baseline Widely.

Подробнее о базовом уровне

Если вы хотите узнать больше о Baseline и о разнице между Newly и Widely Available, посмотрите короткое видео, которое я снял.

Вы также можете узнать больше о базовом статусе функции на информационной панели состояния веб-платформы !

Проект Interop возвращается в 2025 году

И, наконец, проект Interop возвращается в 2025 году со списком приоритетных областей, включая переходы представлений, позиционирование привязки CSS и API навигации. Обязательно ознакомьтесь с анонсом проекта !

Подписаться

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

Меня зовут Марико Косака, и я вернусь через три месяца, чтобы рассказать вам больше о том, что нового в Chrome!

,

Mariko Kosaka
X

Прошло много времени! Видео «Новинки в Chrome» возвращается с информацией о:

Я Марико. Давайте углубимся и посмотрим, что нового в Chrome за последние три выпуска.

Текстовое поле CSS

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

Каждый шрифт создает разное количество пространства над и под символами, что определяет размер элемента.

До сих пор контролировать размер этих пространств было невозможно.

Заголовок показан с лишним пространством над ним, которое выглядит как обрезанное ножницами и удаленное.

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

Вы также можете написать это, используя сокращенное свойство text-box .

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

API доступа к файловой системе

Добавленный в Chrome 133 примитив DOM Node.prototype.moveBefore позволяет перемещать элементы по дереву DOM без сброса состояния элемента.

Когда вы удаляете, а затем повторно вставляете элемент для перемещения элемента DOM, состояние этого элемента сбрасывается. Используя этот новый примитив, состояние узла сохраняется.

Таким образом, iframe остаются загруженными, активные элементы остаются в фокусе, всплывающие окна и диалоговые окна остаются открытыми, а CSS-переходы или анимация продолжаются.

Сохраняющий состояние способ перемещения элемента DOM

API доступа к файловой системе уже некоторое время доступен на Chrome Desktop. Этот API позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API доступен на Android, а также в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() . Этот метод показывает средство выбора файлов, а затем возвращает дескриптор файла, который можно использовать для чтения файла.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Чтобы сохранить файл на диск, вы можете использовать тот же дескриптор файла, который вы получили ранее, или вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Световое отклонение приходит к элементу <dialog>

Если вы использовали Popover API для создания поповера, вы знаете, что одной из приятных особенностей Popover API является возможность легкого закрытия. Пользователи могут щелкнуть фон, и элемент всплывающего окна закроется, не нажимая специально кнопку закрытия.

Возможность легкого отклонения теперь поддерживается и в элементе <dialog> !

Если для атрибута closedby установлено any , диалоговое окно можно закрыть, щелкнув за пределами диалогового окна или нажав клавиши Escape.


<dialog closedby="any">...</dialog>

Это то же самое поведение, что и в случае, когда для всплывающего окна установлено значение «авто».

Обновления в базовой версии

А вот новости о Baseline

Базовый уровень Недавно доступно

Во-первых, это новые базовые функции, которые недавно появились во всех четырех основных браузерах.

scrollbar-gutter и scrollbar-width

С помощью свойства CSS Scrollbar-Gutter вы можете зарезервировать место для полосы прокрутки, чтобы избежать нежелательных изменений макета при появлении или исчезновении полосы прокрутки. С помощью ширины полосы прокрутки вы можете создать более узкую полосу прокрутки или даже полностью скрыть полосу прокрутки, не влияя на прокрутку.

ruby-align

С помощью CSS-свойства Ruby-align вы можете указать выравнивание базового текста Ruby и текста аннотаций Ruby.

Promise.try

Promise.try — это удобный метод обработки ошибок синхронных запросов. Используя это, вы можете исключить функции обратного вызова при попытке запроса с помощью Promise.resolve.

Сборка мусора Wasm и оптимизация хвостовых вызовов

WebAssembly теперь поддерживает сборку мусора и оптимизацию хвостовых вызовов.

Базовый уровень Широко доступен

Массив findLast() и findLastIndex()

Array findLast() и findLastIndex() — очень удобные методы для получения элементов из конца массива. Эта функция поддерживается всеми основными браузерами в течение 30 месяцев, а это означает, что теперь она широко доступна в Baseline.

Отдельные свойства преобразования

Отдельные свойства преобразования , которые дают вам более детальный контроль над преобразованиями CSS, теперь также широко доступны в Baseline Widely.

Подробнее о базовом уровне

Если вы хотите узнать больше о Baseline и о разнице между Newly и Widely Available, посмотрите короткое видео, которое я снял.

Вы также можете узнать больше о базовом статусе функции на информационной панели состояния веб-платформы !

Проект Interop возвращается в 2025 году

И, наконец, проект Interop возвращается в 2025 году со списком приоритетных областей, включая переходы представлений, позиционирование привязки CSS и API навигации. Обязательно ознакомьтесь с анонсом проекта !

Подписаться

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

Меня зовут Марико Косака, и я вернусь через три месяца, чтобы рассказать вам больше о том, что нового в Chrome!

,

Mariko Kosaka
X

Прошло много времени! Видео «Новинки в Chrome» возвращается с информацией о:

Я Марико. Давайте углубимся и посмотрим, что нового в Chrome за последние три выпуска.

Текстовое поле CSS

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

Каждый шрифт создает разное количество пространства над и под символами, что определяет размер элемента.

До сих пор контролировать размер этих пространств было невозможно.

Заголовок показан с лишним пространством над ним, которое выглядит как обрезанное ножницами и удаленное.

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

Вы также можете написать это, используя сокращенное свойство text-box .

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

API доступа к файловой системе

Добавленный в Chrome 133 примитив DOM Node.prototype.moveBefore позволяет перемещать элементы по дереву DOM без сброса состояния элемента.

Когда вы удаляете, а затем повторно вставляете элемент для перемещения элемента DOM, состояние этого элемента сбрасывается. Используя этот новый примитив, состояние узла сохраняется.

Таким образом, iframe остаются загруженными, активные элементы остаются в фокусе, всплывающие окна и диалоговые окна остаются открытыми, а CSS-переходы или анимация продолжаются.

Сохраняющий состояние способ перемещения элемента DOM

API доступа к файловой системе уже некоторое время доступен на Chrome Desktop. Этот API позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API доступен на Android, а также в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() . Этот метод показывает средство выбора файлов, а затем возвращает дескриптор файла, который можно использовать для чтения файла.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Чтобы сохранить файл на диск, вы можете использовать тот же дескриптор файла, который вы получили ранее, или вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Световое отклонение приходит к элементу <dialog>

Если вы использовали Popover API для создания поповера, вы знаете, что одной из приятных особенностей Popover API является возможность легкого закрытия. Пользователи могут щелкнуть фон, и элемент всплывающего окна закроется, не нажимая специально кнопку закрытия.

Возможность легкого отклонения теперь поддерживается и в элементе <dialog> !

Если для атрибута closedby установлено any , диалоговое окно можно закрыть, щелкнув за пределами диалогового окна или нажав клавиши Escape.


<dialog closedby="any">...</dialog>

Это то же самое поведение, что и в случае, когда для всплывающего окна установлено значение «авто».

Обновления в базовой версии

А вот новости о Baseline

Базовый уровень Недавно доступно

Во-первых, это новые базовые функции, которые недавно появились во всех четырех основных браузерах.

scrollbar-gutter и scrollbar-width

С помощью свойства CSS Scrollbar-Gutter вы можете зарезервировать место для полосы прокрутки, чтобы избежать нежелательных изменений макета при появлении или исчезновении полосы прокрутки. С помощью ширины полосы прокрутки вы можете создать более узкую полосу прокрутки или даже полностью скрыть полосу прокрутки, не влияя на прокрутку.

ruby-align

С помощью CSS-свойства Ruby-align вы можете указать выравнивание базового текста Ruby и текста аннотаций Ruby.

Promise.try

Promise.try — это удобный метод обработки ошибок синхронных запросов. Используя это, вы можете исключить функции обратного вызова при попытке запроса с помощью Promise.resolve.

Сборка мусора Wasm и оптимизация хвостовых вызовов

WebAssembly теперь поддерживает сборку мусора и оптимизацию хвостовых вызовов.

Базовый уровень Широко доступен

Массив findLast() и findLastIndex()

Array findLast() и findLastIndex() — очень удобные методы для получения элементов из конца массива. Эта функция поддерживается всеми основными браузерами в течение 30 месяцев, а это означает, что теперь она широко доступна в Baseline.

Отдельные свойства преобразования

Отдельные свойства преобразования , которые дают вам более детальный контроль над преобразованиями CSS, теперь также широко доступны в Baseline Widely.

Подробнее о базовом уровне

Если вы хотите узнать больше о Baseline и о разнице между Newly и Widely Available, посмотрите короткое видео, которое я снял.

Вы также можете узнать больше о базовом статусе функции на информационной панели состояния веб-платформы !

Проект Interop возвращается в 2025 году

И, наконец, проект Interop возвращается в 2025 году со списком приоритетных областей, включая переходы представлений, позиционирование привязки CSS и API навигации. Обязательно ознакомьтесь с анонсом проекта !

Подписаться

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

Меня зовут Марико Косака, и я вернусь через три месяца, чтобы рассказать вам больше о том, что нового в Chrome!

,

Mariko Kosaka
X

Прошло много времени! Видео «Новинки в Chrome» возвращается с информацией о:

Я Марико. Давайте углубимся и посмотрим, что нового в Chrome за последние три выпуска.

Текстовое поле CSS

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

Каждый шрифт создает разное количество пространства над и под символами, что определяет размер элемента.

До сих пор контролировать размер этих пространств было невозможно.

Заголовок показан с лишним пространством над ним, которое выглядит как обрезанное ножницами и удаленное.

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

Вы также можете написать это, используя сокращенное свойство text-box .

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

API доступа к файловой системе

Добавленный в Chrome 133 примитив DOM Node.prototype.moveBefore позволяет перемещать элементы по дереву DOM без сброса состояния элемента.

Когда вы удаляете, а затем повторно вставляете элемент для перемещения элемента DOM, состояние этого элемента сбрасывается. Используя этот новый примитив, состояние узла сохраняется.

Таким образом, iframe остаются загруженными, активные элементы остаются в фокусе, всплывающие окна и диалоговые окна остаются открытыми, а CSS-переходы или анимация продолжаются.

Сохраняющий состояние способ перемещения элемента DOM

API доступа к файловой системе уже некоторое время доступен на Chrome Desktop. Этот API позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API доступен на Android, а также в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() . Этот метод показывает средство выбора файлов, а затем возвращает дескриптор файла, который можно использовать для чтения файла.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Чтобы сохранить файл на диск, вы можете использовать тот же дескриптор файла, который вы получили ранее, или вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Световое отклонение приходит к элементу <dialog>

Если вы использовали Popover API для создания поповера, вы знаете, что одной из приятных особенностей Popover API является возможность легкого закрытия. Пользователи могут щелкнуть фон, и элемент всплывающего окна закроется, не нажимая специально кнопку закрытия.

Возможность легкого отклонения теперь поддерживается и в элементе <dialog> !

Если для атрибута closedby установлено any , диалоговое окно можно закрыть, щелкнув за пределами диалогового окна или нажав клавиши Escape.


<dialog closedby="any">...</dialog>

Это то же самое поведение, что и в случае, когда для всплывающего окна установлено значение «авто».

Обновления в базовой версии

А вот новости о Baseline

Базовый уровень Недавно доступно

Во-первых, это новые базовые функции, которые недавно появились во всех четырех основных браузерах.

scrollbar-gutter и scrollbar-width

С помощью свойства CSS Scrollbar-Gutter вы можете зарезервировать место для полосы прокрутки, чтобы избежать нежелательных изменений макета при появлении или исчезновении полосы прокрутки. С помощью ширины полосы прокрутки вы можете создать более узкую полосу прокрутки или даже полностью скрыть полосу прокрутки, не влияя на прокрутку.

ruby-align

С помощью CSS-свойства Ruby-align вы можете указать выравнивание базового текста Ruby и текста аннотаций Ruby.

Promise.try

Promise.try — это удобный метод обработки ошибок синхронных запросов. Используя это, вы можете исключить функции обратного вызова при попытке запроса с помощью Promise.resolve.

Сборка мусора Wasm и оптимизация хвостовых вызовов

WebAssembly теперь поддерживает сборку мусора и оптимизацию хвостовых вызовов.

Базовый уровень Широко доступен

Массив findLast() и findLastIndex()

Array findLast() и findLastIndex() — очень удобные методы для получения элементов из конца массива. Эта функция поддерживается всеми основными браузерами в течение 30 месяцев, а это означает, что теперь она широко доступна в Baseline.

Отдельные свойства преобразования

Отдельные свойства преобразования , которые дают вам более детальный контроль над преобразованиями CSS, теперь также широко доступны в Baseline Widely.

Подробнее о базовом уровне

Если вы хотите узнать больше о Baseline и о разнице между Newly и Widely Available, посмотрите короткое видео, которое я снял.

Вы также можете узнать больше о базовом статусе функции на информационной панели состояния веб-платформы !

Проект Interop возвращается в 2025 году

И, наконец, проект Interop возвращается в 2025 году со списком основных областей, включая переходы представлений, позиционирование привязки CSS и API навигации. Обязательно ознакомьтесь с анонсом проекта !

Подписаться

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

Меня зовут Марико Косака, и я вернусь через три месяца, чтобы рассказать вам больше о том, что нового в Chrome!