Nouveautés de Chrome 105

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Entrons dans le vif du sujet et découvrez les nouveautés de Chrome 105 pour les développeurs.

Requêtes de conteneur et propriété CSS :has()

Les requêtes sur des conteneurs, l'une des fonctionnalités les plus demandées Chrome 105. Ils permettent aux développeurs d'interroger un sélecteur parent pour sa taille et des informations de style, ce qui permet à un élément enfant de posséder son propre grâce à une logique de style réactif, quel que soit son emplacement sur la page.

Ils sont semblables aux requêtes @media, sauf qu'ils sont évalués par rapport à la taille un conteneur plutôt que la taille de la fenêtre d'affichage.

Requête du conteneur ou requête média.

Pour utiliser des requêtes de conteneur, vous devez définir le confinement d'un élément parent. Par exemple, vous pouvez avoir une fiche contenant une image et du texte.

Fiche unique à deux colonnes.

Pour créer une requête de conteneur, définissez container-type sur le conteneur de la carte. Définir container-type sur inline-size interroge inline-direction la taille du parent.

.card-container {
  container-type: inline-size;
}

Nous pouvons maintenant utiliser ce conteneur pour appliquer des styles à n'importe lequel de ses enfants en utilisant @container

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Dans ce cas, lorsque la taille du conteneur est inférieure à 400 pixels, mise en page à une seule colonne.

Pseudo-classe CSS :has()

Nous pouvons aller un peu plus loin avec la pseudo-classe CSS :has(). Il vous permet de vérifier si un élément parent contient des enfants ayant paramètres.

Par exemple, p:has(span) indique un sélecteur de paragraphe contenant un espace. du projet. Vous pouvez l'utiliser pour appliquer un style au paragraphe parent lui-même, ou à tout autre élément qu'il contient. Vous pouvez également utiliser figure:has(figcaption) pour styliser un élément de type figure. contenant une légende.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Lisez l'article d'Una @container et :has(): deux nouvelles API responsives performantes pour une explication plus détaillée et des démonstrations amusantes.

API Sanitizer

La plupart des applications Web gèrent souvent des chaînes non fiables, mais elles s'affichent en toute sécurité le contenu peut être délicat. Sans soins suffisants, il est facile d'avoir peuvent créer des failles de script intersites.

Il existe des bibliothèques telles que DomPurify qui peuvent vous aider, mais ajoutez une petite de la maintenance. L'API HTML Sanitizer permet de réduire le nombre les failles de script intersites en intégrant le nettoyage de la plateforme.

Pour l'utiliser, créez une instance de Sanitizer. Appelez ensuite setHTML() au niveau de la dans lequel vous souhaitez insérer le contenu désinfecté.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

L'API Sanitizer est conçue pour être sûre par défaut et personnalisable. vous permettant de spécifier différentes options de configuration, par exemple en abandonnant certains éléments, ou autoriser d'autres.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Découvrez Manipulation sécurisée du DOM avec l'API Sanitizer pour en savoir plus.

Abandon de Web SQL pour les contextes non sécurisés

Il y a quelque temps, nous avons annoncé notre intention d'abandonner Web SQL. Début dans Chrome 105 et Web SQL seront abandonnés dans les contextes non sécurisés.

Si vous utilisez Web SQL dans des contextes non sécurisés, vous devez migrer vers IndexDB. ou un autre conteneur de stockage local.

Et bien plus !

Bien sûr, il y en a bien d'autres.

  • Vous pouvez désormais modifier le nom d'une PWA installée sur ordinateur et sur mobile en mettant à jour le fichier manifeste de l'application Web.
  • L'API de placement des fenêtres multi-écrans obtient des libellés de nom d'écran précis.
  • L'API de superposition des commandes de fenêtre est désormais disponible. Il permet aux PWA de fournir en remplaçant la barre de titre pleine largeur existante par une petite superposition. Cela vous permet de placer du contenu personnalisé dans la zone de la barre de titre.

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour modifications supplémentaires dans Chrome 105.

S'abonner

Pour vous tenir informé, abonnez-vous à la Chaîne YouTube des développeurs Chrome, et vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 106 sera disponible, nous serons là pour vous informer des nouveautés de Chrome !