Je suis allé au Chrome Web Dev Summit à quelques reprises (en
2016 et
2018 ), et j'ai toujours aimé écrire un tel article de synthèse avec les idées et les projets les plus intéressants de la conférence. Essayons de le faire en fonction des résultats du dernier forum!
Enfin attiré l'attention sur HTML
Il semble que la conception et la fonctionnalité de presque tous les contrôles n'aient pas changé depuis l'invention des navigateurs, bien qu'ils aient commencé à l'utiliser très différemment, par exemple, avec la transition vers les appareils mobiles. Maintenant, c'est enfin remarqué! Dans leur présentation,
«HTML n'est pas encore terminé», Nicole et Greg ont discuté de plusieurs innovations qui apparaîtront bientôt dans Chrome.
Éléments <form> recyclés
Enfin changez l'apparence de certaines formes! Non seulement ils sont devenus plus modernes, mais ils ont été optimisés pour les appareils mobiles et l'accès sans obstacle. Par exemple, fait des valeurs plus grandes lors du choix d'une date.
Extensibilité des éléments <form>
Les formulaires deviennent également plus flexibles! Prenez l'élément
<select> . Beaucoup de gens doivent utiliser des composants personnalisés pour les choses les plus simples, telles que l'ajout d'une icône à une option, ou pour quelque chose de compliqué, comme la recherche d'options. Dans les futures versions de Chrome, tout cela peut être fait en
<select> natif!
De nouveaux articles?
Dans un avenir plus lointain, les développeurs Chrome souhaitent implémenter de nouveaux éléments en HTML. Les plans incluent une vue tabulaire, comme UITableView d'iOS, et un interrupteur à bascule.
CSS s'améliore aussi!
CSS recevra ces raffinements nécessaires. Dans une riche conférence
sur l'avenir des styles, Una et Adam ont parlé d'une douzaine de nouvelles fonctionnalités CSS. Bien qu'il existe de nombreuses fonctionnalités complètement nouvelles comme Houdini, ce qui m'a vraiment excité, ce sont les améliorations apportées pour rendre CSS plus simple et plus efficace.
Sélecteur: is ()
Le sélecteur
:is() vous permet de regrouper plusieurs sélecteurs identiques. Ceci est mieux expliqué par l'exemple.
En règle générale, si nous voulons appliquer le même style à plusieurs éléments qui partagent une partie du sélecteur, nous devons toujours saisir le sélecteur entier à chaque fois.
body.theme--light button, body.theme--light a, body.theme--light p, body.theme--light h1 { }
Avec
:is () vous pouvez regrouper différentes parties des sélecteurs.
body.theme--light :is(button, a, p, h1) { }
Super, non?!
Propriétés logiques
Les propriétés logiques sont une transition de l'écriture de gauche à droite vers une approche plus agnostique. Au lieu des concepts de gauche, à droite, le haut et le bas du modèle de bloc utiliseront les caractéristiques début de bloc, fin de ligne, fin de bloc, début de ligne.
Figure: Una KravetsCela peut être difficile à comprendre au début, mais si vous y réfléchissez un peu, alors tout a un sens. Souvent, lorsque nous spécifions de mettre en retrait à gauche, en fait, nous voulons mettre en retrait non pas à gauche, mais au début du bloc intégré. À l'aide de nouvelles propriétés logiques, les styles seront adaptés à la langue de l'utilisateur. Eh bien, si gauche signifie gauche, cette option restera également.
Web chassant des applications natives
Dans le nouveau projet
Fugu , l'équipe Chromium s'efforce de combler l'écart entre les applications natives et Web. Deux discours lors de la conférence ont discuté des détails des nouvelles API Web.
Dans son
discours sur les innovations d'
enregistrement et d'autorisation , Eldjay a parlé des nouvelles API de récepteur SMS, qui donnent au navigateur l'accès aux messages texte sur l'appareil pour entrer automatiquement le code lors de l'authentification.
Il a également parlé des API d'authentification Web via lesquelles le navigateur accède aux mécanismes de stockage d'informations d'identification locales tels que FaceID. Ce qui suit montre comment la disponibilité des mécanismes d'authentification sur le périphérique est vérifiée (c'est peut-être le nom de méthode le plus long que j'ai rencontré):
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() .then((available) => {
Dans un discours,
«Rattraper les applications natives», Sam a discuté de plusieurs autres API qui seront bientôt disponibles sur le Web, notamment:
- API de partage Web
- API cible de partage Web
- Contacter l'API Picker
- API du système de fichiers natif
Dans la zone de démonstration, j'ai pu voir des présentations d'API incroyables telles que WebXR, Web Bluetooth et Web NFC.
La démo vidéo WebAR.
Téléchargement adaptatif
J'ai toujours été intéressé par le sujet de l'adaptation du contenu aux capacités du terminal. Eddie Osmani a introduit le
concept de "téléchargement adaptatif" : adaptation pour l'utilisateur en fonction des capacités de son appareil / réseau / navigateur.
Il existe plusieurs API pour cela, à travers lesquelles vous pouvez trouver le type d'appareil, de réseau et de navigateur auprès de l'utilisateur.
Par exemple, en utilisant l'API d'informations réseau, nous pouvons déterminer si un utilisateur est connecté via 4G et si les paramètres d'enregistrement du trafic sont activés.
const network = navigator.connection.effectiveType;
Il convient de noter que la prise en charge de ces fonctions n'est pas encore généralisée. Cependant, ils peuvent toujours être utilisés pour obtenir des informations supplémentaires là où elles sont disponibles.
Ceci termine ma petite critique! Toutes les vidéos de la conférence peuvent être consultées sur YouTube dans la
liste de lecture Chrome Dev Summit 2019 . Quelles performances avez-vous le plus appréciées?