Découvrez certaines des fonctionnalités intéressantes 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
, que vous pouvez utiliser pour définir individuellement ces parties d'une transformation.
Chrome rejoint ainsi Firefox et Safari, qui sont déjà compatibles avec ces propriétés.
Syntaxe des requêtes multimédias
Chrome 104 inclut également la syntaxe de la plage de requêtes multimédias. Firefox a déjà déployé cette fonctionnalité, qui permet de simplifier les requêtes multimédias. Par exemple, la requête multimé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 apporte la fonctionnalité tant attendue des requêtes de conteneur à la plate-forme Web. Les requêtes multimédias vous permettent de créer des requêtes en fonction de la taille de la fenêtre d'affichage, tandis que les requêtes de conteneur vous permettent de créer des requêtes en fonction de la taille d'un conteneur.
Pour utiliser des requêtes de conteneur, activez la structuration à l'aide de la propriété container-type
.
.card-container {
container-type: inline-size;
}
Définir container-type
sur inline-size
interroge la taille de la direction en ligne du parent. Dans les langues latines comme l'anglais, il s'agit de la largeur de la fiche, car le texte s'affiche en ligne 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 l'article @container et :has(): deux nouvelles API responsives puissantes disponibles dans Chromium 105.
La 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
Chrome 105 inclut également l'API Sanitizer. Cette API intègre la purification à la plate-forme pour aider à supprimer les failles de script intersites.
Chrome 105 inclut également la pseudo-classe CSS :modal. Cette valeur correspond à un élément qui est dans un état qui exclut toute interaction avec les éléments en dehors de lui. Par exemple, un <dialog>
ouvert avec l'API showModal()
.
Les méthodes findLast() et findLastIndex()
Firefox 104 ajoute une prise en charge derrière un indicateur pour les méthodes Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() et TypedArray.prototype.findLastIndex(). Elles permettent de trouver la valeur et l'indice (respectivement) du dernier élément d'un Array ou d'un TypedArray qui correspond à une fonction de test fournie.
Versions bêta du navigateur
Les versions bêta du navigateur vous donnent un aperçu des éléments qui seront disponibles dans la prochaine version stable du navigateur. C'est le moment idéal pour tester les nouvelles fonctionnalités ou les suppressions qui pourraient avoir un impact sur votre site avant que tout le monde ne les ait.
En raison de dates de sortie qui ne correspondent pas tout à fait au mois, la seule nouvelle version bêta d'août est Firefox 105, qui ne contient actuellement que peu de détails.
La version bêta de Safari 16 mentionnée en juin est toujours en cours.
Partie de la série Nouveau sur le Web