Nouveautés de Chrome 106

Pete LePage
Adriana Jara

Voici les informations à retenir :

Je m'appelle Pete LePage et je m'appelle Adriana Jara. Allons-y et découvrons les nouveautés de Chrome 106 pour les développeurs.

Nouvelles API internationales

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

Comme pour les autres API Intl, cela transfère la charge au système. Vous n'avez donc pas besoin d'envoyer ni de gérer de code de localisation complexe auprès de chaque utilisateur.

L'API sait où placer le symbole de devise, comment mettre en forme les dates et 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 devez 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 voulez arrondir un nombre à la tranche de 5 la plus proche avec une précision de 2 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 demander 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 de numéro international sur MDN.

L'API Pop-Up facilite grandement la création d'interfaces utilisateur, pour les moments où vous devez simplement présenter des informations à l'utilisateur.

L'attribut popup place automatiquement l'élément dans la couche supérieure du site et fournit des commandes simples pour activer/désactiver la visibilité. Vous n'avez plus à vous soucier du positionnement, de l'empilement des éléments, de la sélection ni des interactions au clavier. Mieux encore, aucun code JavaScript n'est requis.

Avec l'extrait de code suivant uniquement, l'API s'occupe de l'affichage de l'élément au-dessus de tous les autres contenus, et gère les entrées utilisateur et la gestion du focus.

<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 tels que la touche Échap ou en cliquant sur d'autres éléments.

Les développeurs ont un contrôle total sur le style,le positionnement et la taille de la couche supérieure, mais aussi la possibilité de modifier les comportements par défaut. en utilisant uniquement CSS et HTML ;

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

Inscrivez-vous au test de l'origine pour fournir facilement à vos utilisateurs des informations à jour. Faites-nous part de vos impressions

Nouvelles fonctionnalités CSS

Deux nouvelles fonctionnalités CSS améliorent l'interopérabilité et, espérons-le, vous simplifient la vie.

Une nouvelle unité de longueur est disponible: ic rejoint la fête. ic est semblable à ch. Toutefois, ic est utilisé spécifiquement pour le texte écrit dans des langues qui utilisent des idéogrammes. En gros, il mesure la longueur en fonction de la largeur ou de la hauteur de ce caractère [point quelque part] qui signifie "eau".

Il s'agit d'une unité conçue pour dimensionner le texte, vous permettant de limiter la largeur pour améliorer la lisibilité et offrant 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 sur 10ic, vous savez que ce conteneur contiendra au maximum 10 glyphes de largeur complète, quelle que soit la taille de la police. Découvrez-le dans l'exemple suivant:

La compatibilité de la grille CSS avec l'interpolation pour grid-template-columns et grid-template-rows est en cours de développement. Elle était prévue pour la version 106, mais a été retardée et sera lancée dans Chrome 107. Vous pouvez toujours la tester dans Chrome Bêta. Voici un exemple de code de Bramus:

Et bien plus !

Bien sûr, il y a bien d'autres choses.

  • Nous commençons la phase 5 du plan de réduction des user-agents.
  • La prise en charge de HTTP2 Push et du type de quota persistant est en cours d'abandon.
  • La propriété CSS hyphenate-character est désormais disponible sans préfixe.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 106.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Adriana Jara. Dès la sortie de Chrome 107, je serai là pour vous présenter les nouveautés de Chrome.