Nouveautés de Chrome 105

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 105.

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

Les requêtes de conteneur, l'une des fonctionnalités les plus demandées, arrivent dans Chrome 105. Ils permettent aux développeurs d'interroger un sélecteur parent pour connaître sa taille et ses informations de style, ce qui permet à un élément enfant de posséder sa logique de style responsif, quel que soit son emplacement sur la page.

Elles sont semblables aux requêtes @media, sauf qu'elles sont évaluées en fonction de la taille d'un conteneur et non de la taille de la fenêtre d'affichage.

Requête de conteneur ou requête média

Pour utiliser des requêtes de conteneur, vous devez définir le confinement sur un élément parent. Par exemple, vous pouvez avoir une carte avec 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. La définition de container-type sur inline-size interroge la taille inline-direction du parent.

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

Nous pouvons maintenant utiliser ce conteneur pour appliquer des styles à n'importe lequel de ses enfants à l'aide de @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, il passe à une mise en page à colonne unique.

Pseudo-classe CSS :has()

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

Par exemple, p:has(span) indique un sélecteur de paragraphe contenant un segment. Vous pouvez l'utiliser pour styliser le paragraphe parent lui-même ou tout élément qu'il contient. Vous pouvez également utiliser figure:has(figcaption) pour styliser un élément de figure contenant une légende.

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

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

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

API Sanitizer

La plupart des applications Web traitent souvent des chaînes non fiables, mais il peut être difficile d'afficher ce contenu de manière sécurisée. Sans une précaution suffisante, il est facile de créer accidentellement des opportunités de failles de script intersites.

Il existe des bibliothèques telles que DomPurify qui facilitent la tâche, mais imposent une faible charge de maintenance. L'API HTML Sanitizer permet de réduire le nombre de failles liées aux scripts intersites en intégrant un processus de nettoyage sur la plate-forme.

Pour l'utiliser, créez une instance de Sanitizer. Appelez ensuite setHTML() sur l'élément 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. Elle vous permet de spécifier différentes options de configuration, par exemple la suppression de certains éléments ou l'autorisation d'autres éléments.

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

Pour en savoir plus, consultez la section Manipulation du DOM avec l'API Sanitizer.

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. À partir de Chrome 105, Web SQL sera abandonné 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 dès que possible.

Et bien plus !

Bien sûr, ce n’est pas tout.

  • Vous pouvez maintenant mettre à jour 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 précis pour les noms d'écran.
  • L'API de superposition des commandes de fenêtre est désormais disponible. Elle permet aux PWA de créer une apparence d'application 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.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 105.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

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