Découvrez certaines fonctionnalités intéressantes qui ont été disponibles dans les navigateurs Web stables et bêta en août 2022.
Versions stables du navigateur
En août, Firefox 104, Chrome 104 et Chrome 105 sont devenus stables.
Transformations individuelles
Chrome 104 inclut des propriétés individuelles pour les transformations CSS. Les propriétés sont scale, rotate et translate. Elles vous permettent de définir individuellement ces parties d'une transformation.
De cette façon, Chrome rejoint Firefox et Safari, qui acceptent déjà ces propriétés.
Syntaxe de la nouvelle requête média
Chrome 104 inclut également la syntaxe de la plage de requêtes média. Cette version a déjà été envoyée par Firefox et permet de simplifier les requêtes média. Par exemple, la requête média suivante:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Peut être écrit à l'aide d'un opérateur de comparaison:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Requêtes de conteneur
Chrome 105 est une version passionnante qui introduit la fonctionnalité tant attendue des requêtes de conteneur sur la plate-forme Web. Les requêtes média vous permettent d'interroger la taille de la fenêtre d'affichage, tandis que les requêtes de conteneur vous permettent d'interroger la taille d'un conteneur.
Pour utiliser des requêtes de conteneur, activez le confinement à l'aide de la propriété container-type.
.card-container {
container-type: inline-size;
}
La définition de container-type sur inline-size interroge la taille de direction intégrée du parent. Pour les langues latines comme l'anglais, cette valeur correspond à la largeur de la carte, car le texte s'affiche de gauche à droite.
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;
}
}
Pour en savoir plus sur les requêtes de conteneur, consultez le post @container and :has(): deux nouvelles API responsives performantes dans Chromium 105.
Pseudo-classe parente :has()
Le post mentionné ci-dessus mentionne également :has(). Cette nouvelle pseudo-classe La pseudo-classe CSS :has() vous permet de cibler l'élément parent et les frères et sœurs en fonction de conditions. Pour en savoir plus, consultez :has() le sélecteur de famille.
API Sanitizer
Dans Chrome 105, vous trouverez également l'API Sanitizer. Cette API intègre un processus de nettoyage sur la plate-forme pour aider à supprimer les failles de script intersites.
Également dans Chrome 105, il y a la pseudo-classe CSS :modal. Cela correspond à un élément dans un état où il exclut toute interaction avec des éléments extérieurs. Par exemple, un <dialog> ouvert avec l'API showModal().
Méthodes findLast() et findLastIndex()
Firefox 104 est compatible avec un indicateur pour les méthodes Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() et TypedArray.prototype.findLastIndex(). Ces éléments permettent de trouver la valeur et l'index (respectivement) du dernier élément d'une fonction Array ou TypedArray correspondant à une fonction Array ou TypedArray fournie.
Versions bêta des navigateurs
Les versions bêta vous donnent un aperçu de ce qui sera disponible dans la prochaine version stable du navigateur. C'est le moment idéal pour tester de nouvelles fonctionnalités, ou des suppressions, qui pourraient avoir un impact sur votre site, avant qu'elles soient publiées.
Comme les dates de sortie se trouvaient en dehors du mois, la seule nouvelle version bêta en août était Firefox 105, qui présente actuellement peu de détails.
La version bêta de Safari 16 mentionnée en juin est également toujours en cours.
Fait partie de la série Web "New to the Web Series"