Voici les informations à retenir :
- Les requêtes de conteneur et :has() font correspondre les résultats. dans un environnement paradisiaque.
- La nouvelle API Sanitizer fournit un processeur robuste pour les chaînes arbitraires pour aider à réduire les failles de script intersites.
- Nous faisons un pas de plus vers l'abandon de Web SQL.
- Et ce n'est pas tout !
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.
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.
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.
- Nouveautés des outils pour les développeurs Chrome (105)
- Abandons et suppressions de Chrome 105
- Mises à jour de ChromeStatus.com pour Chrome 105
- Liste des modifications du dépôt source Chromium
- Calendrier des mises à jour de Chrome
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 !