Nouveautés de Chrome 106

Pete LePage
Adriana Jara

Voici les informations à retenir :

  • De nouvelles API Intl sont disponibles pour vous permettre de mieux contrôler la mise en forme des nombres.
  • Une phase d'évaluation est disponible pour l'API Pop-up afin de faciliter l'affichage de contenus importants auprès des utilisateurs.
  • Pour améliorer l'interopérabilité, nous avons ajouté quelques fonctionnalités CSS.
  • Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Pete LePage et je suis Adriana Jara. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 106.

Nouvelles API Intl

Les API Intl permettent d'afficher du contenu dans un format localisé.

Comme d'autres API Intl, cela permet de décharger le système. Vous n'avez donc pas besoin d'envoyer ni de gérer de code de localisation complexe à chaque utilisateur.

L'API sait où se trouve le symbole de la devise, comment formater les dates et les heures ou compiler une liste.

Chrome 106 ajoute de nombreuses nouvelles fonctionnalités de format numérique.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Vous souhaitez afficher une gamme de prix ? formatRange est là pour vous aider.

Créez un objet numberFormat, fournissez le style et d'autres options, ainsi que le nombre de chiffres à afficher.

Appelez ensuite formatRange() pour obtenir la chaîne mise en forme.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Vous souhaitez arrondir un nombre à la tranche de cinq décimales la plus proche avec une précision de deux décimales ? Aucun problème.

Spécifiez minimumFractionDigits et roundingIncrement, puis appelez format().

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Vous pouvez même indiquer au navigateur d'inclure des zéros à la fin avec trailingZeroDisplay, ce qui est très utile pour les prix.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Pour en savoir plus, consultez la documentation sur le format des nombres internationaux sur MDN.

L'API Pop-Up facilite la création d'interfaces utilisateur, pour les cas où vous devez simplement mettre des informations sous les yeux de l'utilisateur.

L'attribut popup place automatiquement l'élément dans la couche supérieure du site et permet d'activer/de désactiver facilement la visibilité de l'élément. Vous n'avez plus à vous soucier du positionnement, de l'empilement des éléments, de la mise au point ou des interactions avec le clavier. Et cerise sur le gâteau, elle ne nécessite aucun code JavaScript.

Avec l'extrait de code suivant, l'API se charge d'afficher l'élément au-dessus de tous les autres contenus, et gère les entrées utilisateur et la sélection.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Par défaut, les utilisateurs peuvent fermer le pop-up à l'aide de gestes comme appuyer sur la touche ÉCHAP ou cliquer sur d'autres éléments.

Les développeurs contrôlent entièrement le style,le positionnement et la taille de la couche supérieure, mais également la possibilité de modifier les comportements par défaut. Utiliser uniquement des fichiers CSS et HTML.

Consultez l'article de Jhey pour découvrir d'autres exemples et options d'API.

Inscrivez-vous à la phase d'évaluation pour fournir facilement des informations à vos utilisateurs en temps opportun. Donnez-nous votre avis.

Nouvelles fonctionnalités CSS

Il existe deux nouvelles fonctionnalités CSS qui améliorent l'interopérabilité et, je l'espère, vous facilitent la vie.

Une nouvelle unité de longueur a été ajoutée en ville: ic rejoint le groupe. ic est semblable à ch. Cependant, ic est utilisé spécifiquement pour le texte écrit dans des langues qui utilisent des idéogrammes. En fait, il mesure la longueur en fonction de la largeur ou de la hauteur de ce caractère [pointer quelque part], qui signifie "eau".

Il s'agit d'une unité conçue pour dimensionner le texte, ce qui vous permet de limiter la largeur pour améliorer la lisibilité, et offre un contrôle prévisible, quelle que soit la taille du texte.

Par exemple, si vous définissez la valeur max-width d'un conteneur (par exemple, sur 10ic), vous savez que le conteneur contiendra au maximum 10 glyphes pleine largeur, quelle que soit la taille de la police. Découvrez-le dans l'exemple suivant:

La prise en charge de l'interpolation des grilles CSS pour grid-template-columns et grid-template-rows sera bientôt disponible. Elle était prévue pour le 106, mais elle est retardée et sera lancée dans Chrome 107. Vous pouvez toujours l'essayer dans la version bêta de Chrome. Voici un exemple de code Bramus:

Et bien plus !

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

  • Nous avons commencé la phase 5 du plan de réduction des user-agents.
  • Les types de quota "Persistent" et "Push" HTTP2 ne seront bientôt plus pris en charge.
  • De plus, la propriété CSS hyphenate-character est désormais disponible sans préfixe.

Complément d'informations

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

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 Adriana Jara. Dès que Chrome 107 sera disponible, je serai immédiatement là pour vous indiquer les nouveautés de Chrome !