Voici les informations à retenir :
- Il ne reste plus que quelques semaines avant le lancement du compte à rebours jusqu'à la version 100 de Chrome et Firefox.
- Les couches en cascade CSS vous offrent plus de contrôle sur votre CSS et vous aident à éviter les conflits de spécificité de style.
- La méthode
showPicker()
vous permet d'afficher de manière programmatique un sélecteur de navigateur pour des éléments<input>
tels quedate
,color
etdatalist
. - Et ce n'est pas tout : ce n'est pas tout.
Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 99.
Chrome 100 et Firefox 100
Chrome 100 sera disponible fin mars (2022) et Firefox 100 sera disponible peu après début mai. Ces deux versions constituent un jalon de numéro de version majeur et sont reportées à trois chiffres. Toutefois, si votre code attend deux chiffres, le nouveau numéro de version peut vous causer des problèmes.
Tout code qui vérifie les numéros de version ou analyse la chaîne user-agent doit être vérifié pour s'assurer qu'il ne présente aucun problème.
Dans Chrome, l'indicateur #force-major-version-to-100
fait passer le numéro de version actuel à 100.
Dans le menu "Paramètres" de Firefox Nightly, vous pouvez activer l'option "Firefox 100 User-Agent String". Nous vous recommandons de tester votre site afin de vous assurer que tout fonctionne comme prévu.
Pour en savoir plus, consultez Chrome et Firefox bientôt pour atteindre la version majeure 100.
Couches CSS en cascade
La prise en charge des couches CSS en cascade et de la règle CSS @layer
est disponible dans Chrome 99. Ils offrent un contrôle plus explicite de vos fichiers CSS pour éviter les conflits de spécificité de style. Cela est particulièrement utile pour les codebases volumineux, les systèmes de conception et la gestion de styles tiers dans les applications.
Elles introduisent une nouvelle couche dans la cascade CSS. Avec les styles superposés, la priorité d'un calque est toujours prioritaire sur la spécificité d'un sélecteur.
Si vous essayez de styliser un lien, dans un .card
, dans un .post
, vous constaterez que le sélecteur le plus spécifique sera appliqué. En utilisant la règle @layer
, vous pouvez être plus explicite sur la spécificité de style de chacun et vous assurer que le style du lien de votre fiche remplace celui de votre article.
@layer base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
Cela est dû à une priorité en cascade. Les styles multicouches créent de nouveaux plans en cascade.
Les calques en cascade qui utilisent la règle CSS @layer
sont compatibles avec Chrome 99, Firefox 97 et Safari 15.4 bêta. Pour en savoir plus, consultez Les couches en cascade arrivent sur votre navigateur.
showPicker() pour les éléments d'entrée
Pendant longtemps, nous avons dû recourir à des bibliothèques de widgets personnalisés ou à des astuces pour afficher un sélecteur de date. Il existe une nouvelle méthode showPicker()
dans le fichier HTML InputElements
.
C'est la méthode canonique pour afficher un sélecteur de navigateur, non seulement pour date
, mais aussi pour time
, color
et d'autres éléments <input>
avec des sélecteurs.
Pour l'utiliser, appelez showPicker()
sur l'élément <input>
. Dans cet exemple, je l'ai encapsulé dans un bloc try…catch
. Cela me permet de proposer une création de remplacement,
si le navigateur n'est pas compatible avec l'API ou ne peut pas afficher l'outil de sélection. Ainsi, vous vous assurez que les utilisateurs bénéficient toujours d'une bonne expérience.
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use an external library when this fails.
}
});
Consultez Afficher un sélecteur de navigateur pour la date, l'heure, la couleur et les fichiers pour en savoir plus, ainsi que pour connaître les différents types de <input>
que vous pouvez utiliser avec showPicker()
.
Et bien plus !
Bien sûr, ce n’est pas tout.
L'API Canvas2D a été mise à jour et inclut désormais les fonctionnalités suivantes:
- Deux nouveaux événements pour
ContextLost
etContextRestored
- Une option
willReadFrequently
- Meilleure compatibilité avec le modificateur de texte CSS
- et plus encore.
Une nouvelle phase d'évaluation permet aux PWA de fournir d'autres couleurs dans le fichier manifeste d'application Web pour le mode sombre.
L'API de reconnaissance de l'écriture manuscrite est disponible.
Complément d'informations
Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 99.
- Nouveautés des outils pour les développeurs Chrome (99)
- Abandons et suppressions de Chrome 99
- Mises à jour du site ChromeStatus.com pour Chrome 99
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
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 Pete LePage. Dès que Chrome 100 sera disponible, je serai là pour vous dire les nouveautés de Chrome !