Cette page a été traduite par l'API Cloud Translation.

Nouveaux utilisateurs sur la plate-forme Web en août

Découvrez certaines des fonctionnalités intéressantes disponibles dans les navigateurs Web stables et bêta en août 2022.

Rachel Andrew

Versions stables des navigateurs

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.

De cette façon, Chrome rejoint Firefox et Safari, qui acceptent déjà ces propriétés.

Navigateurs pris en charge

Source

Syntaxe des requêtes multimédias

Chrome 104 inclut également la syntaxe de la plage de requêtes multimédias. Firefox a déjà publié 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.
}

Navigateurs pris en charge

Source

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.

Navigateurs pris en charge

Source

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 l'orientation intégrée 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.

Navigateurs pris en charge

Source

API Sanitizer

Chrome 105 inclut également l'API Sanitizer. Cette API intègre un système de nettoyage de la plate-forme pour éliminer les failles des scripts 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().

Navigateurs pris en charge

Source

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.

Navigateurs pris en charge

Source

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.

Étant donné que les dates de sortie se situaient juste en dehors du mois, la seule nouvelle version bêta disponible en août était Firefox 105, qui n'offre pas de détails pour le moment.

La version bêta de Safari 16 mentionnée en juin est toujours en cours.

Partie de la série Nouveau sur le Web