Новое в Chrome 105

Пит ЛеПейдж

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

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

Контейнерные запросы и свойство CSS :has()

Контейнерные запросы, одна из наиболее востребованных функций, появляются в Chrome 105. Они позволяют разработчикам запрашивать у родительского селектора информацию о его размере и стиле, что позволяет дочернему элементу владеть своей адаптивной логикой стиля, независимо от того, где он находится. на странице.

Они похожи на запрос @media, за исключением того, что оцениваются по размеру контейнера, а не по размеру области просмотра.

Контейнерный запрос против медиа-запроса.

Чтобы использовать контейнерные запросы, вам необходимо установить включение родительского элемента. Например, у вас может быть карточка с изображением и текстом.

Одиночная двухколоночная карточка.

Чтобы создать запрос к контейнеру, установите 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.

Подписаться

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

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 106, мы будем здесь, чтобы рассказать вам, что нового в Chrome!