Ça fait longtemps ! La vidéo "Nouveautés dans Chrome" est de retour avec des informations sur les éléments suivants:
- Zone de texte CSS, qui vous permet de contrôler précisément l'espacement vertical à l'aide des métriques de police.
- L'API d'accès au système de fichiers, désormais compatible avec Android et la vue Web.
- Méthode permettant de déplacer un élément DOM en préservant l'état avec
moveBefore. - La fermeture de la lumière s'applique à l'élément
<dialog>. - Et de nombreuses nouveautés sont disponibles dans Prérequis et plus !
Je m'appelle Mariko. Voyons les nouveautés de Chrome pour les trois dernières versions.
Boîte de texte CSS
La propriété CSS text-box vous permet de contrôler précisément l'espacement vertical à l'aide des métriques de police.
Chaque police produit une quantité d'espace différente au-dessus et en dessous des caractères, ce qui détermine la taille de l'élément.
Jusqu'à présent, il était impossible de contrôler la taille de ces espaces.
La nouvelle propriété text-box-trim spécifie les côtés à couper, au-dessus ou en dessous, et la propriété text-box-edge spécifie comment elle doit être coupée.
Par exemple, utilisez la hauteur de la casse majuscule, qui correspond au sommet des caractères majuscules.
Vous pouvez également écrire cela à l'aide de la propriété text-box abrégée.
Pour en savoir plus sur l'utilisation de ces nouvelles propriétés, consultez l'article text-box-trim CSS.
API File System Access
Ajoutée dans Chrome 133, une primitive DOM Node.prototype.moveBefore vous permet de déplacer des éléments dans un arbre DOM, sans réinitialiser leur état.
Lorsque vous supprimez puis réinsérez un élément pour déplacer un élément DOM, l'état de cet élément est réinitialisé. Grâce à cette nouvelle primitive, l'état d'un nœud est conservé.
Les iFrames restent donc chargées, les éléments actifs restent sélectionnés, les éléments tels que les popovers et les boîtes de dialogue restent ouverts, et les transitions ou animations CSS continuent.
Méthode permettant de déplacer un élément DOM en conservant l'état
L'API File System Access est disponible sur Chrome Desktop depuis un certain temps. Cette API permet aux applications Web d'interagir avec les fichiers du système de fichiers local de l'utilisateur. À partir de Chrome 132, l'API est également disponible sur Android et dans WebViews.
Pour lire un fichier, appelez showOpenFilePicker(). Cette méthode affiche un sélecteur de fichiers, puis renvoie un descripteur de fichier que vous pouvez utiliser pour lire le fichier.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Pour enregistrer un fichier sur un disque, vous pouvez utiliser le même descripteur de fichier que vous avez obtenu précédemment ou appeler showSaveFilePicker() pour obtenir un nouveau descripteur de fichier.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
La fermeture légère s'applique à l'élément <dialog>.
Si vous avez utilisé l'API Popover pour créer un popover, vous savez que l'une des fonctionnalités intéressantes de l'API Popover est le comportement de fermeture léger. Les utilisateurs peuvent cliquer sur l'arrière-plan, et l'élément popover se ferme sans qu'ils aient à appuyer sur le bouton de fermeture.
Cette fonctionnalité de fermeture de la lumière est désormais également disponible dans l'élément <dialog>.
Lorsque vous définissez l'attribut closedby sur any, vous pouvez fermer la boîte de dialogue en cliquant en dehors de celle-ci ou en appuyant sur la touche Échap.
<dialog closedby="any">...</dialog>
Il s'agit du même comportement que lorsque le popover est défini sur "auto".
Mises à jour dans Baseline
Voici les actualités concernant Baseline.
Référence Redisponible
Tout d'abord, les fonctionnalités de référence récemment disponibles sont celles qui ont été récemment intégrées aux quatre principaux navigateurs.
scrollbar-gutter et scrollbar-width
Avec la propriété CSS scrollbar-gutter, vous pouvez réserver un espace pour la barre de défilement afin d'éviter les modifications de mise en page indésirables lorsque la barre de défilement apparaît ou disparaît. Avec scrollbar-width, vous pouvez créer une barre de défilement plus étroite ou même la masquer complètement sans affecter la possibilité de faire défiler la page.
ruby-align
La propriété CSS ruby-align vous permet de spécifier l'alignement du texte de base et du texte d'annotation Ruby.
Promise.try
Promise.try est une méthode pratique pour gérer les erreurs des requêtes synchrones. Vous pouvez ainsi supprimer les fonctions de rappel lorsque vous essayez d'effectuer une requête avec Promise.resolve.
Récupération de mémoire Wasm et optimisations des appels de fin de pile
WebAssembly est désormais compatible avec la récupération de mémoire et les optimisations de la fonction tail call.
Disponible à grande échelle
Tableaux findLast() et findLastIndex()
Les méthodes findLast() et findLastIndex() du tableau sont très pratiques pour obtenir des éléments à partir de la fin d'un tableau. Cette fonctionnalité est compatible avec tous les principaux navigateurs depuis 30 mois, ce qui signifie qu'elle est désormais largement disponible en tant que référence.
Propriétés de transformation individuelles
Les propriétés de transformation individuelles, qui vous permettent de contrôler plus précisément les transformations CSS, sont désormais disponibles dans la version de référence .
En savoir plus sur Baseline
Pour en savoir plus sur la référence et la différence entre "Nouveau" et "Disponible dans le monde entier", regardez la courte vidéo que j'ai réalisée.
Vous pouvez également en savoir plus sur l'état de référence d'une fonctionnalité dans le tableau de bord d'état de la plate-forme Web.
Le projet d'interopérabilité est de retour pour 2025
Enfin, le projet Interop reviendra en 2025 avec une liste de domaines d'intérêt, y compris les transitions de vue, le positionnement des ancres CSS et l'API Navigation. N'oubliez pas de consulter l'annonce du projet.
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 Mariko Kosaka. Je reviendrai dans trois mois pour vous parler des nouveautés de Chrome.