Вот что вам нужно знать:
- Контейнерные запросы и :has() — это соответствие, созданное на небесах отзывчивости.
- Новый API-интерфейс Sanitizer обеспечивает надежный процессор для произвольных строк, что помогает уменьшить уязвимости межсайтового скриптинга.
- Мы делаем еще один шаг к отказу от поддержки Web SQL .
- И есть еще много чего .
Я Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 105.
Контейнерные запросы и свойство CSS :has()
Контейнерные запросы, одна из наиболее востребованных функций, появляются в Chrome 105. Они позволяют разработчикам запрашивать у родительского селектора информацию о его размере и стиле, что позволяет дочернему элементу владеть своей адаптивной логикой стиля, независимо от того, где он находится. на странице.
Они похожи на запрос @media, за исключением того, что оцениваются по размеру контейнера, а не по размеру области просмотра.
![Контейнерный запрос против медиа-запроса.](https://developer.chrome.google.cn/static/blog/new-in-chrome-105/image/container-query-vs-media-f263d60a5e21b.png?authuser=3&hl=ru)
Чтобы использовать контейнерные запросы, вам необходимо установить включение родительского элемента. Например, у вас может быть карточка с изображением и текстом.
Чтобы создать запрос к контейнеру, установите container-type
для контейнера карты. Установка для container-type
значения inline-size
запрашивает размер родительского элемента inline-direction
.
.card-container {
container-type: inline-size;
}
Теперь мы можем использовать этот контейнер для применения стилей к любому из его дочерних элементов с помощью @container
.
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
В этом случае, когда размер контейнера меньше 400 пикселей, он переключается на макет с одним столбцом.
CSS :has()
псевдокласс
Мы можем пойти еще дальше с помощью псевдокласса CSS :has()
. Это позволяет вам проверить, содержит ли родительский элемент дочерние элементы с определенными параметрами.
Например, p:has(span)
указывает на селектор абзацев с интервалом внутри него. Вы можете использовать это для стилизации самого родительского абзаца или чего-либо внутри него. Или вы можете использовать figure:has(figcaption)
для стилизации элемента рисунка, содержащего подпись.
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
Прочтите статью Уны @container и :has(): два мощных новых адаптивных API, где вы найдете более подробное объяснение и несколько забавных демонстраций.
API дезинфицирующего средства
Большинство веб-приложений часто имеют дело с ненадежными строками, но безопасная обработка этого контента может быть сложной задачей. Без должного внимания легко случайно создать возможности для уязвимостей межсайтового скриптинга.
Существуют библиотеки, такие как DomPurify , которые помогают, но добавляют небольшую нагрузку на обслуживание. API HTML Sanitizer помогает сократить количество уязвимостей межсайтового скриптинга за счет встроенной в платформу функции очистки.
Чтобы использовать его, создайте новый экземпляр Sanitizer. Затем вызовите setHTML()
для элемента, в который вы хотите вставить очищенное содержимое.
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
API-интерфейс Sanitizer по умолчанию спроектирован безопасным и настраиваемым, что позволяет вам указывать различные параметры конфигурации, например удалять определенные элементы или разрешать другие.
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
Дополнительные сведения см. в разделе Безопасные манипуляции с DOM с помощью Sanitizer API .
Устаревший Web SQL для незащищенных контекстов
Некоторое время назад мы объявили о наших планах отказаться от поддержки Web SQL. Начиная с Chrome 105, Web SQL станет устаревшим в незащищенных контекстах.
Если вы используете Web SQL в незащищенном контексте, вам следует как можно скорее перейти на IndexDB или другой локальный контейнер хранения.
И более!
Конечно, есть еще много чего.
- Теперь вы можете обновить имя установленного PWA как на настольном компьютере, так и на мобильном устройстве, обновив манифест веб-приложения.
- API размещения многоэкранных окон получает точные метки имен экранов.
- API наложения элементов управления окнами теперь доступен. Это позволяет PWA создавать ощущение приложения, заменяя существующую полноразмерную строку заголовка небольшим наложением. Это позволяет вам размещать пользовательский контент в области строки заголовка.
дальнейшее чтение
Это касается только некоторых ключевых моментов. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 105.
- Что нового в Chrome DevTools (105)
- Устаревание и удаление Chrome 105
- Обновления ChromeStatus.com для Chrome 105
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 106, мы будем здесь, чтобы рассказать вам, что нового в Chrome!