5 tendances front-end à suivre en 2021

Publié: 2020-12-17

Il y a une tonne d'articles sur les «tendances du design à suivre» qui circulent sur le Web. Nous avons également mis notre spin sur l'un d'eux dans Hot Web Design Trends to Follow in 2021. 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 celui-ci n'est cependant généralement pas pertinent pour la plupart des utilisateurs.

Mais bien que cela ne semble pas pertinent, 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 le client veut.

Ainsi, afin de donner le respect dû à tous les développeurs front-end ainsi que quelques idées et idées aux concepteurs, nous avons compilé cette liste de «Tendances front-end à suivre en 2021».

1. Propriétés personnalisées CSS

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

Pourquoi est-ce 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 juste rouge.

Les propriétés personnalisées sont bien prises en charge partout, sauf pour Internet Explorer

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

Une astuce intéressante pour les utiliser est la création de thèmes personnalisés. Vous pouvez définir les valeurs HSL via des variables, puis autoriser les utilisateurs à 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 techniques pour être adoptés par les développeurs ainsi que les polices elles-mêmes nécessaires. Vous ne pouvez pas simplement choisir n'importe quelle police et y appliquer des modifications.

Les polices variables sont l'un des sites Web incontournables que vous pouvez utiliser pour parcourir et expérimenter. Cela 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 ...

Source: Introduction aux polices variables sur le Web

Pourquoi est-ce cool?

Eh bien, il est clair que cela nous donne, aux développeurs (et aux concepteurs), une liberté presque infinie sur 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 nombres comme 100 (léger) ou 900 (très épais) et n'importe quoi entre les deux comme 300, 400, 600, 700, etc. Mais peut-être que vous avez besoin de 750 Et ce n'est pas disponible? Maintenant, avec les polices variables, c'est le cas!

Les polices variables présentent un autre avantage considérable. Comme vous le savez probablement, 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 variations. 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 le tour des yeux, mais c'est vrai! Les développeurs front-end ne sont pas seulement des «développeurs JS», mais également 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 "Oui, et de nos jours, vous ne pouvez même pas ouvrir un site Web si vous n'avez pas activé JS" ou "Merci chargement de curseurs et d'annonces de 5 Mo pour votre page À propos ».

Mais quel que soit le nombre de côtés positifs et négatifs dont il dispose, son utilisation augmente. Alors, quelle technologie / approche / quel outillage basé sur JS devrait-il davantage évoluer?

React / Vue en tant que front aux CMS comme WordPress (headless)
Graphiques 3D WebGL (Three.js), simulations, interactivité
Contenu VR et AR
Flux de travail de construction plus optimisés (webpack, gulp)
API de navigateur pour plus de contrôle / fonctionnalité

Et pour ajouter une autre excellente raison de vous y plonger plus profondément: avec seulement JS, vous pouvez techniquement créer presque tous les projets 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 une meilleure expérience utilisateur et déployer votre projet en direct. Tout ajustement des paramètres peut être effectué facilement dans la configuration.

4. Style basé sur l'utilité

Le style basé sur les utilitaires 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 .card pas une .card avec une ombre, un arrière-plan, etc. Vous .shadow un élément HTML avec .shadow et .bg-light et .br-5 (comme border-radius).

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

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

Page d'accueil de Tailwind

Certains pourraient prétendre qu'il s'agit plutôt d '«écrire du CSS en HTML» où vous ne pouvez pas vraiment changer un composant du CSS et le mettre à jour partout. Techniquement, cela est vrai, mais quand vos composants sont des fichiers JS dans un React / app Vue par exemple, vous ne les mettez à jour en un seul endroit.

L'un des inconvénients est peut-être que vous devez apprendre un autre cadre. 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 ait toujours des gens qui l'aiment (et le détestent), c'est une excellente solution à de nombreux problèmes. De plus, vous ne saurez jamais si cela fonctionne pour vous tant que vous ne l'aurez pas vraiment essayé.

5. Nouvelles fonctionnalités CSS

L'utilisation de nouvelles fonctionnalités CSS peut être une tendance en soi. Bien qu'il ne s'agisse pas d'un changement dans une fonctionnalité ou une approche spécifique, cela remet en question la façon dont nous codons jusqu'à présent. Les avantages? Cela 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.

CSS Shadow Parts comme une autre fonctionnalité à venir

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

Modes d'écriture

Bien qu'ils ne soient pas utilisés trop souvent, comme de nombreux développeurs ont rarement besoin de prendre en charge les langages de droite à gauche, des 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 telles que margin-inline-start par exemple, vous n'avez pas à écraser la marge gauche à margin droite pour RTL.

Sous-grille CSS

Nous avions du flex, puis des grilles. Maintenant, nous avons des grilles à l'intérieur des grilles . Les sous-réseaux sont quelque chose que les développeurs s'attendaient à ce que les développeurs soient 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 la Flexbox (car elles font aussi partie des grilles). Il fait ce qu'il dit. Malheureusement, ce n'est pas encore bien pris en charge.

`:is`

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

 / * Sélectionne n'importe quel paragraphe dans un en-tête, principal
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: survol,
main p: survol,
pied de page p: hover {
La couleur rouge;
curseur: pointeur;
}