Вот что вам нужно знать:
- Документ «картинка в картинке» дает вам больше контроля над окнами «картинка в картинке».
- Вложенные объявления CSS исправляют некоторые сложные крайние случаи.
- Вы можете указать поведение украшений на элементах , которые разделены на несколько строк.
- И есть еще много чего .
Я Пит Лепейдж. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 130.
Документ «картинка в картинке»
API «картинка в картинке» отлично подходит, если вы хотите вывести видео из вкладки браузера, чтобы вы могли следить за видео во время взаимодействия с другими сайтами или приложениями. Но это только видео.
API «картинка в картинке» документа устраняет это ограничение, позволяя вам создать окно «картинка в картинке», в котором вы можете контролировать содержимое. Он отлично подходит для таких вещей, как пользовательские видеоплееры, видеоконференции и приложения для повышения производительности. Мне нравится то, что Spotify сделали с этим в своем веб-плеере. Я получаю окно с обложкой текущей песни, элементами управления воспроизведением и могу легко добавить песню в избранное.
Чтобы использовать его, запросите новое окно «картинка в картинке» для документа. Возвращенное promise разрешается с помощью объекта JavaScript окна «Картинка в картинке». Затем используйте это, чтобы добавить свой контент в окно.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
С помощью нового preferInitialWindowPlacement вы можете указать Chrome всегда открывать окно «картинка в картинке» в положении и размере по умолчанию вместо повторного использования положения или размера предыдущего окна.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Более подробную информацию можно найти в посте Франсуа « Картинка в картинке» для любого элемента !
Вложенные объявления CSS
Вложенность CSS позволяет использовать более короткие селекторы, их легче читать и повысить модульность за счет вложения правил в другие. CSS Nesting — это базовая версия, доступная недавно , и она доступна уже почти год.
Было несколько крайних случаев, которые работали не так, как ожидалось. Например, в следующем блоке CSS можно было бы ожидать, что цвет фона будет зеленым, поскольку он идет последним, но он красный!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Чтобы исправить подобные крайние случаи, рабочая группа CSS представила правило вложенных объявлений, которое реализовано в Chrome 130. Теперь тот же блок CSS, как и ожидалось, приводит к зеленому фону. Если вы чередовали простые объявления с вложенными правилами, вам следует дважды проверить свой код.
Прочтите статью Брамуса, где вложение CSS улучшается с помощью CSSNestedDeclarations , чтобы получить более подробное объяснение.
box-decoration-break
CSS-свойство box-decoration-break позволяет указать, как должны отображаться фрагменты элемента, разбитые на несколько строк, столбцов или страниц.
Например, этот элемент отлично смотрится, когда все находится на одной линии.
Когда контент разбивается на несколько строк, такие украшения, как фон, тень блока, граница и т. д., разрезаются, создавая довольно радикальный вид.
Добавляя box-decoration-break: clone , каждый фрагмент визуализируется независимо, создавая гораздо более приятный вид.
Хотя это и не совсем базовый вариант, он доступен в Chrome и Firefox, а в Safari имеет префикс поставщика.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Для получения более подробной информации ознакомьтесь с документацией box-decoration-break на MDN и публикацией Рэйчел Свойство box-decoration-break в Chrome 130 .
И многое другое!
Конечно, есть еще много всего.
- После нескольких фальстартов наконец-то появились контейнеры прокрутки с фокусировкой на клавиатуре .
- WebGPU получает смешивание с двумя исходными кодами.
- А веб-сериал получает связанный атрибут.
Дальнейшее чтение
Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 130.
- Примечания к выпуску Chrome 130 .
- Что нового в Chrome DevTools (130)
- Обновления ChromeStatus.com для Chrome 130
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 131, мы будем здесь, чтобы рассказать вам, что нового в Chrome!
,
Вот что вам нужно знать:
- Документ «картинка в картинке» дает вам больше контроля над окнами «картинка в картинке».
- Вложенные объявления CSS исправляют некоторые сложные крайние случаи.
- Вы можете указать поведение украшений на элементах , которые разделены на несколько строк.
- И есть еще много чего .
Я Пит Лепейдж. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 130.
Документ «картинка в картинке»
API «картинка в картинке» отлично подходит, если вы хотите вывести видео из вкладки браузера, чтобы вы могли следить за видео во время взаимодействия с другими сайтами или приложениями. Но это только видео.
API «картинка в картинке» документа устраняет это ограничение, позволяя вам создать окно «картинка в картинке», в котором вы можете контролировать содержимое. Он отлично подходит для таких вещей, как пользовательские видеоплееры, видеоконференции и приложения для повышения производительности. Мне нравится то, что Spotify сделали с этим в своем веб-плеере. Я получаю окно с обложкой текущей песни, элементами управления воспроизведением и могу легко добавить песню в избранное.
Чтобы использовать его, запросите новое окно «картинка в картинке» для документа. Возвращенное promise разрешается с помощью объекта JavaScript окна «Картинка в картинке». Затем используйте это, чтобы добавить свой контент в окно.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
С помощью нового preferInitialWindowPlacement вы можете указать Chrome всегда открывать окно «картинка в картинке» в положении и размере по умолчанию вместо повторного использования положения или размера предыдущего окна.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Прочтите пост Франсуа « Картинка в картинке» для любого элемента, чтобы получить более подробную информацию!
Вложенные объявления CSS
Вложенность CSS обеспечивает более короткие селекторы, более легкое чтение и большую модульность за счет вложения правил в другие. CSS Nesting — это базовая версия, доступная недавно , и она доступна уже почти год.
Было несколько крайних случаев, которые работали не так, как ожидалось. Например, в следующем блоке CSS можно было бы ожидать, что цвет фона будет зеленым, поскольку он идет последним, но он красный!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Чтобы исправить подобные крайние случаи, рабочая группа CSS представила правило вложенных объявлений, которое реализовано в Chrome 130. Теперь тот же блок CSS, как и ожидалось, приводит к зеленому фону. Если вы чередовали простые объявления с вложенными правилами, вам следует дважды проверить свой код.
Более подробное объяснение можно найти в статье Брамуса « Улучшение вложенности CSS с помощью CSSNestedDeclarations .
box-decoration-break
CSS-свойство box-decoration-break позволяет указать, как должны отображаться фрагменты элемента, разбитые на несколько строк, столбцов или страниц.
Например, этот элемент отлично смотрится, когда все находится на одной линии.
Когда контент разбивается на несколько строк, такие элементы оформления, как фон, тень блока, граница и т. д., разрезаются, создавая довольно радикальный вид.
Добавляя box-decoration-break: clone , каждый фрагмент визуализируется независимо, создавая гораздо более приятный вид.
Хотя это и не совсем Baseline, он доступен в Chrome и Firefox, а в Safari имеет префикс поставщика.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Для получения более подробной информации ознакомьтесь с документацией box-decoration-break на MDN и публикацией Рэйчел Свойство box-decoration-break в Chrome 130 .
И многое другое!
Конечно, есть еще много чего.
- После нескольких фальстартов наконец-то появились контейнеры прокрутки с возможностью фокусировки на клавиатуре .
- WebGPU получает смешивание с двумя исходными кодами.
- А веб-сериал получает связанный атрибут.
Дальнейшее чтение
Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 130.
- Примечания к выпуску Chrome 130 .
- Что нового в Chrome DevTools (130)
- Обновления ChromeStatus.com для Chrome 130
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 131, мы будем здесь, чтобы рассказать вам, что нового в Chrome!