Au cours des dernières années, nous avons assisté à de nombreux changements dans le monde des technologies Web. En 2020, je veux attirer votre attention sur deux tendances / objectifs principaux de la communauté Web: l'extensibilité et la compatibilité.
Extensibilité
L'extensibilité, c'est quand vous pouvez prendre la technologie et l'étendre pour l'adapter à vos besoins. Depuis plusieurs années, nous utilisons des composants partout, à la fois comme développement d'applications (composants sur React, Vue, Svelte) et comme développement de conception (conception de systèmes).
Pour le moment, nous essayons de rendre ces composants plus uniques et plus pratiques à utiliser. L'extensibilité sur le Web nous permet d'utiliser la plate-forme (navigateurs, moteurs html / css / js) pour nos propres besoins et expériences, bien sûr pour obtenir plus d'avantages.
CSS Houdini
Grâce à CSS Houdini , les développeurs peuvent étendre les capacités du modèle d'objet CSS, changer la façon dont les navigateurs s'affichent et fonctionnent avec les styles.
Cela signifie que maintenant nous pouvons faire quelque chose qui n'était tout simplement pas possible avant cela. Par exemple, les coins obliques d'un bouton ou la disposition arrondie.
( lien vers la démo )
Houdini vous permet d'étendre le style avec CSS et vous permet d'ajouter des règles personnalisées à CSS. Actuellement, Houdini comprend:
À l'aide de ces API, l'utilisateur peut utiliser la sémantique en CSS (modèle d'objet typé), en utilisant l'API Paint dessiner comme sur un canvas et appliquer le résultat en tant que bordure (bordure à gradient élevé) ou créer une animation paramétrée dans une seule ligne de CSS.
.sparkles { background: paint(sparkles) }
Par exemple, vous pouvez prendre des animations dans un flux distinct (Animation Worklet) et utiliser l'API Layout pour organiser les éléments de manière unique sans utiliser de règles telles que la marge, le remplissage, gauche, droite.
Dans l'ensemble, Houdini est l'une de ces choses qui méritent une attention particulière cette année.
Polices variables
Les polices variables sont l'avenir de la typographie Web, qui offrent un certain nombre d'options pour contrôler l'affichage du texte sur les écrans (taille, gras, style). Et tout cela avec une taille de fichier relativement petite. Il est temps de dire au revoir au débat sans fin sur le nombre de polices dont vous avez besoin pour vous connecter et laisser votre contenu vivre une nouvelle et belle vie.
Vous pouvez en savoir plus sur les polices variables dans cet article .
Propriétés personnalisées
Les propriétés personnalisées nous permettent d'écrire des CSS plus structurés et en même temps dynamiques. Il ne s'agit pas seulement de variables, mais également de la possibilité de modifier ces variables à l'aide de JS.
:root { --first-color: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } #secondParagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdParagraph { background-color: var(--first-color); color: var(--second-color); }
Les propriétés personnalisées sont déjà prises en charge ainsi que les polices variables et vous n'avez pas besoin d'utiliser de post / préprocesseur pour elles. Ces «technologies» fonctionnent dans différents navigateurs et sur différents systèmes. De là, nous passons en douceur à la compatibilité.
La compatibilité
Par définition, la compatibilité dans cet article est la capacité des technologies à être interchangeables en fonction des besoins de l'utilisateur. Sur le plan technique, vous pouvez donner un exemple du nombre d'entreprises ayant terminé ou même en cours de migration de l'ancienne pile vers la nouvelle. Par exemple, Backbone -> React, et ils veulent arriver à une vue commune qui ne nécessitera plus de migrations aussi importantes. Composants et composants Web, peut-être l'état actuel des choses, qui convient à beaucoup.
Composants Web
Les composants Web tentent de résoudre le problème de compatibilité des normes Web. La tâche principale consiste à fournir une telle forme unifiée, qui ne nécessitera même pas de cadre ou de bibliothèque pour créer des composants.
Chaque composant Web est encapsulé et fonctionne dans les navigateurs modernes sans aucune dépendance. Cette technologie est toujours en développement, mais nous espérons qu'elle obtiendra encore plus de nouvelles fonctionnalités en 2020.
Propriétés logiques
Les propriétés logiques nous permettent de repenser le modèle que nous utilisons pour organiser les éléments sur la page et le rend plus convivial pour les différentes langues et appareils avec lesquels les utilisateurs accèdent aux sites Web.
Par exemple, en russe, qui se lit de gauche à droite, nous représentons hauteur, largeur, gauche, droite, haut, bas - enfin, comme nous l'imaginons (votre casquette). Mais par exemple, en arabe, où tout va de droite à gauche, les choses sont un peu différentes. padding-left , ne sera plus l'indentation au début du paragraphe, car il ne démarre pas à gauche.
Comme exemple de propriété booléenne, vous pouvez utiliser padding-inline-start au lieu de padding-left . Et puis le padding sera installé sur le côté avec lequel les mots sont généralement lus dans la langue choisie par l'utilisateur. S'il est russe, padding-left sera utilisé, et s'il est arabe, alors padding-right .
Ce sont des canaux multimédias qui nous permettent de connaître les préférences des utilisateurs. Par exemple, un utilisateur aime un thème sombre. Nous pouvons le découvrir en utilisant le prefers-color-scheme :
.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }
Comme toujours, la partie la plus intéressante et la plus amusante n'est pas prise en charge uniquement dans Edge et IE.
Les émissions médiatiques les plus intéressantes:
préfère les couleurs
préfère le contraste
préfère le mouvement réduit
préfère la transparence réduite
La vitesse
Où sans elle dans le nouveau 2020. J'ai déjà évoqué le Animation Worklet, qui vous permet de retirer une logique d'animation dans un thread séparé. Mais il existe d'autres technologies qui nous permettent d'accélérer le Web et qui sont sur le point d'être largement utilisées. Par exemple, Web Assembly , un wrapper qui vous permet d'écrire du code de bas niveau, et pas seulement en JS. WebGL continue de s'améliorer et de nous fournir un composant graphique puissant et rapide directement dans le navigateur. En combinant ces deux technologies, vous pouvez créer des jeux incroyables qui auparavant ne pouvaient pas être imaginés dans un navigateur.
Le Web évolue constamment et sans relâche, c'est peut-être ce qui le rend si intéressant. Et selon vous, quelles technologies deviendront la tendance de 2020?