5 tendances front-end à suivre en 2022

Il y a une tonne d'articles sur les "tendances de design à suivre" qui circulent sur le Web. Nous avons également mis notre spin sur un dans Hot Web Design Trends to Follow en 2022. L'accent mis sur ces articles est très compréhensible - la conception elle-même est ce que voient à la fois un client et un visiteur. Le code derrière, cependant, n'est généralement pas pertinent pour la plupart des utilisateurs.

Mais même si cela semble hors de propos, bien sûr, c'est très important. Un code propre, des approches optimisées et de nouvelles techniques permettent aux développeurs de présenter de belles conceptions d'une manière évolutive. La performance est ce que veulent les utilisateurs, l' évolutivité est ce que veut le client.

Ainsi, afin de donner un peu de respect à tous les développeurs front-end ainsi que des idées et des idées aux concepteurs, nous avons compilé cette liste de "Tendances front-end à suivre en 2022".

1. Propriétés personnalisées CSS

C'est quelque chose que les développeurs souhaitent depuis des années, même si les propriétés personnalisées CSS (ou également appelées variables CSS) existent depuis un certain temps maintenant. Par exemple, le niveau 1 du module W3C date de 2015. Mais comme pour toute nouvelle technologie, il faut un certain temps pour obtenir une traction. Et nous pensons qu'en 2021, nous verrons certains des taux d'adoption les plus élevés depuis sa création.

Pourquoi c'est cool ?

Les propriétés personnalisées sont en fait des variables en CSS. Vous pourriez dire "Mais nous avons des variables dans Sass, n'est-ce pas?" Oui! Mais lorsque vous compilez Sass en CSS, vous obtenez, eh bien, CSS. Et il n'y a pas de variables. Vous ne pouvez plus modifier la valeur de cette variable. $primary: red est simplement rouge.

Cependant, avec les propriétés personnalisées, vous avez --primary: red . Et puis vous pouvez redéfinir --primary en bleu par exemple. Directement dans le navigateur, aucune compilation n'est nécessaire. Pour en savoir plus sur ces astuces CSS, consultez cet article : Quelle est la différence entre les variables CSS et les variables de préprocesseur ?

Un hack soigné pour les utiliser est pour les thèmes personnalisés. Vous pouvez définir des valeurs HSL via des variables, puis permettre aux utilisateurs de modifier la teinte via un curseur sur le frontend. Connectez la valeur du curseur à la variable CSS avec JS et BAM avec la fonctionnalité "Définissez votre jeu de couleurs".

2. Polices variables

Les polices variables, tout comme les propriétés personnalisées CSS, existent depuis un certain temps, mais ne sont toujours pas largement utilisées. Une des raisons serait le temps dont ils ont besoin pour devenir plus populaires, le nombre de tutoriels/guides et de techniques à adopter par les développeurs ainsi que les polices elles-mêmes nécessaires. Vous ne pouvez pas simplement choisir n'importe quelle police et lui appliquer des modifications.

L'un des sites Web incontournables que vous pouvez utiliser pour parcourir et expérimenter est Variable Fonts. Il sert également de bonne démo au cas où vous entendriez ce terme pour la première fois. Les polices variables vous permettent d'utiliser un seul fichier et d'appliquer des propriétés telles que "font-weight" ou "font-style" avec un contrôle complet sur la quantité d'épaisseur ou d'inclinaison…

La source

Pourquoi c'est cool ?

Eh bien, il est clair que cela nous donne, à nous les développeurs (et concepteurs), une liberté presque infinie quant à l'apparence d'une police. Avez-vous déjà pensé que "font-weight: bold" est un peu trop, mais que "normal" est trop mince et que vous n'avez rien entre les deux ?

Les concepteurs de polices en sont très conscients et fournissent souvent des propriétés intermédiaires. Ils les étiquettent avec des chiffres comme 100 (léger) ou 900 (très épais) et n'importe quoi entre 300, 400, 600, 700, etc. Mais peut-être avez-vous besoin de 750 Et ce n'est pas disponible ? Maintenant, avec les polices variables, vous le faites !

Les polices variables présentent un autre avantage considérable. Comme vous le savez probablement bien, les polices contribuent largement aux temps de chargement . Tant au niveau de la bande passante que du rendu à l'écran. Une requête plutôt standard pourrait ressembler à ceci :

• headings-font-normal.woff2
• headings-font-bold.woff2
• body-normal.woff2
• body-italic.woff2
• body-bold.woff2

Avec toute cette bonté, vous pouvez facilement dépasser 500 Ko. Avec une police variable, vous n'avez besoin que d'une police et vous recevez toutes les autres variantes. Une requête.

Vous pouvez en savoir plus sur les polices variables : introduction aux polices variables sur le Web.

3. Plus de Javascript !

C'est un titre « qui fait rouler les yeux », mais c'est vrai ! Les développeurs front-end ne sont pas seulement des "développeurs JS", mais aussi des développeurs "CSS/HTML". Et cette rubrique est pour eux.

JavaScript n'est pas seulement une tendance, bien que selon la personne à qui vous demandez, des conversations très animées peuvent avoir lieu avec des commentaires tels que "Ouais, et de nos jours, vous ne pouvez même pas ouvrir un site Web si vous n'avez pas activé JS" ou "merci pour chargement de curseurs et de publicités de 5 Mo pour votre page À propos ».

Mais peu importe le nombre de côtés positifs et négatifs qu'il a, son utilisation se développe. Alors, quelle technologie/approche/outil basé sur JS devrait être le plus tendance ?

• React/Vue comme façade à un CMS comme WordPress (headless).
• WebGL (Three.js) Graphiques 3D, simulations et interactivité.
• Contenu VR et AR.
• Workflows de construction plus optimisés (webpack, gulp).
• API de navigateur pour plus de contrôle/fonctionnalité.

Et pour ajouter une autre bonne raison de plonger plus profondément dans cela - avec seulement JS, vous pouvez techniquement construire presque n'importe quel projet de taille que vous voulez. Avec juste JS, vous pouvez créer une interface réactive, la connecter à un stockage de données, utiliser les API du navigateur pour la meilleure expérience utilisateur et déployer votre projet en direct. Tous les ajustements aux paramètres peuvent être effectués facilement dans la configuration.

4. Style basé sur l'utilitaire

Le style basé sur l'utilitaire se concentre sur l'application de styles via des classes prédéfinies. C'est ce que signifie généralement le style d'une page Web. Cependant, ici, c'est un peu différent de l'approche standard. Vous voyez, vous ne stylisez pas un .card avec une ombre, un arrière-plan, etc. Vous stylisez un élément HTML avec .shadow et .bg-light et .br-5 (comme border-radius).

C'est une approche qui fonctionne étonnamment bien pour les développeurs JS qui ont juste besoin de sortir quelque chose rapidement et qui ne se soucient pas du CSS.

Ce n'est pas nouveau du tout, mais la popularité de Tailwind a poussé les développeurs à reconsidérer l'approche.

La source

Certains pourraient dire qu'il s'agit à peu près d'« écrire du CSS en HTML » où vous ne pouvez pas vraiment modifier un composant de CSS et le mettre à jour partout. Techniquement, c'est vrai, mais lorsque vos composants sont des fichiers JS dans une application React/Vue par exemple, vous les mettez à jour en un seul endroit.

Peut-être que l'un des inconvénients est que vous devez apprendre un autre framework. Ce n'est pas comme si c'était juste du CSS, vous devez mémoriser les propriétés car certains éléments peuvent ressembler à ceci :

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

Bien qu'il y aura toujours des gens qui l'aimeront (et le détesteront), c'est une excellente solution à de nombreux problèmes. De plus, vous ne saurez jamais si cela fonctionne pour vous jusqu'à ce que vous l'essayiez vraiment.

5. Nouvelles fonctionnalités CSS

L'utilisation de nouvelles fonctionnalités CSS peut être une tendance technologique frontale en soi. Bien qu'il ne s'agisse pas d'une modification d'une fonctionnalité ou d'une approche spécifique, cela remet en question la façon dont nous avons codé jusqu'à présent. Les avantages? Il résout beaucoup de problèmes. Le mauvais? Rétrocompatibilité.

Mais grâce aux progrès des fournisseurs de navigateurs au cours des deux dernières années (en vous regardant, Microsoft), la majorité des utilisateurs du monde entier peuvent accéder au Web plus efficacement que jamais.

La source

Les propriétés personnalisées CSS sont l'une de ces fonctionnalités, mais ayant environ 6 ans (et assez importantes), elles ont leur propre section.

Modes d'écriture

Bien qu'ils ne soient pas utilisés trop souvent, car de nombreux développeurs ont rarement besoin de prendre en charge les langues de droite à gauche, les modes d'écriture existent. Ils sont indispensables pour les tableaux de bord/frameworks et les sites multilingues. Grâce à la prise en charge accrue des propriétés d'écriture directionnelle comme margin-inline-start par exemple, vous n'avez pas à remplacer margin-left par margin-right pour RTL.

Sous-grille CSS

Nous avons eu du flex, puis nous avons eu des grilles. Maintenant, nous avons des grilles à l'intérieur des grilles . Les sous-grilles sont quelque chose que les développeurs s'attendaient à être disponibles dès la première prise en charge de Grid. Eh bien, maintenant nous l'avons et c'est aussi cool et utile que cela puisse paraître. Mention honorable : les lacunes de Flexbox (car elles font également partie des grilles). Il fait ce qu'il dit.

:is

Un sélecteur abrégé mieux expliqué avec un extrait de code que nous avons tiré de MDN :

 /* Sélectionne n'importe quel paragraphe dans un en-tête, main
ou élément de pied de page qui est survolé */
:is(header, main, footer) p:hover {
La couleur rouge;
curseur : pointeur ;
}

 /* Ce qui précède est équivalent à ce qui suit */
en-tête p : survolez,
p principal : survoler,
pied de page p:hover {
La couleur rouge;
curseur : pointeur ;
}

Emballer

Beaucoup de choses ont changé avec les tendances frontales au fil des ans, et les améliorations continueront à venir. Si vous voulez un site Web qui vous apportera les conversions et les revenus que vous désirez, vous devriez commencer à travailler sur votre codage frontal dès maintenant. Vos clients doivent pouvoir utiliser facilement votre page Web afin d'être encouragés à interagir avec votre entreprise.

Essayez de mettre en œuvre les tendances frontales que nous avons mentionnées ci-dessus et faites-nous savoir comment cela a aidé votre entreprise à se développer.