5 Front-End-Trends für 2021

Veröffentlicht: 2020-12-17

Es gibt eine Menge Artikel über „Designtrends, denen man folgen muss“, die im Internet schweben. Wir haben uns auch mit einem der Hot Web Design-Trends befasst, die 2021 folgen sollen. Der Fokus auf solche Artikel ist sehr verständlich - das Design selbst ist das, was sowohl ein Kunde als auch ein Besucher sehen. Der Code dahinter ist jedoch für die meisten Benutzer meist irrelevant.

Aber obwohl es irrelevant erscheint, ist es natürlich sehr wichtig. Sauberer Code, optimierte Ansätze und neue Techniken ermöglichen es Entwicklern, schöne Designs skalierbar zu präsentieren. Leistung ist das, was Benutzer wollen, Skalierbarkeit ist das, was der Client will.

Um allen Front-End-Entwicklern gebührenden Respekt zu zollen sowie den Designern einige Einblicke und Ideen zu geben, haben wir diese Liste der „Front-End-Trends, denen wir 2021 folgen sollten“ zusammengestellt.

1. Benutzerdefinierte CSS-Eigenschaften

Dies ist etwas, was Entwickler seit Jahren wollten, obwohl es CSS Custom-Eigenschaften (oder auch als CSS-Variablen bezeichnet) schon seit einiger Zeit gibt. Zum Beispiel stammt das W3C-Modul Level 1 aus dem Jahr 2015. Wie bei jeder neuen Technologie dauert es jedoch eine Weile, bis die Traktion erreicht ist. Und wir glauben, dass wir im Jahr 2021 einige der größten Adoptionsraten seit seiner Gründung sehen werden.

Warum ist es cool?

Benutzerdefinierte Eigenschaften sind tatsächlich Variablen in CSS. Sie könnten sagen: "Aber wir haben Variablen in Sass, nicht wahr?" Ja, machen wir! Aber wenn Sie Sass zu CSS kompilieren, erhalten Sie CSS. Und es gibt keine Variablen. Sie können den Wert dieser Variablen nicht mehr ändern. $primary: red ist nur rot.

Unterstützung für benutzerdefinierte Eigenschaften

Benutzerdefinierte Eigenschaften werden überall gut unterstützt, außer im Internet Explorer

Bei benutzerdefinierten Eigenschaften haben Sie jedoch --primary: red . Und dann können Sie neu definieren --primary zum Beispiel --primary zu blau. Direkt im Browser ist keine Kompilierung erforderlich. Um mehr über diese CSS-Tricks zu erfahren Was ist der Unterschied zwischen CSS-Variablen und Präprozessorvariablen?

Ein guter Hack, um sie zu verwenden, ist das benutzerdefinierte Theming. Sie können HSL-Werte über Variablen definieren und den Benutzern dann erlauben, den Farbton über einen Schieberegler im Frontend zu ändern. Verbinden Sie den Schiebereglerwert mit JS und BAM mit der Funktion "Farbschema festlegen" mit der CSS-Variablen.

2. Variable Schriftarten

Variable Schriftarten, genau wie CSS Custom Properties, gibt es schon seit einiger Zeit, sie werden jedoch immer noch nicht häufig verwendet. Ein Grund wäre die Zeit, die sie benötigen, um populärer zu werden, die Anzahl der Tutorials / Anleitungen und Techniken, die von Entwicklern übernommen werden sollen, sowie die benötigten Schriftarten. Sie können nicht einfach eine Schriftart auswählen und Änderungen daran vornehmen.

Eine der Websites, auf denen Sie surfen und experimentieren können, sind variable Schriftarten. Es dient auch als gute Demo, falls Sie diesen Begriff zum ersten Mal hören. Mit variablen Schriftarten können Sie eine einzelne Datei verwenden und Eigenschaften wie "font-weight" oder "font-style" anwenden, wobei Sie die Dicke oder Neigung vollständig steuern können.

variable-fonts-gif

Quelle: Einführung in variable Schriftarten im Web

Warum ist es cool?

Nun, es ist klar, dass es uns Entwicklern (und Designern) nahezu unendliche Freiheit gibt , wie eine Schrift aussieht. Haben Sie jemals gedacht, dass "font-weight: bold" etwas zu viel ist, aber "normal" zu dünn ist und Sie nichts dazwischen haben?

Schriftdesigner sind sich dessen sehr wohl bewusst und bieten häufig mittlere Eigenschaften. Sie beschriften sie mit Zahlen wie 100 (leicht) oder 900 (sehr dick) und irgendetwas dazwischen wie 300, 400, 600, 700 usw. Aber vielleicht brauchen Sie 750 und es ist nicht verfügbar? Jetzt mit variablen Schriftarten!

Variable Schriftarten bieten einen weiteren großen Vorteil. Wie Sie wahrscheinlich wissen, tragen Schriftarten wesentlich zu den Ladezeiten bei . Sowohl in Bezug auf die Bandbreite als auch auf das Rendern auf dem Bildschirm. Eine eher standardmäßige Anfrage könnte folgendermaßen aussehen:

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

Mit all dieser Güte können Sie leicht über 500 KB hinausgehen. Bei einer variablen Schriftart benötigen Sie nur eine Schriftart und erhalten alle anderen Variationen. Eine Bitte.

Weitere Informationen zu variablen Schriftarten: Einführung in variable Schriftarten im Web.

3. Mehr JavaScript!

Dies ist ein "augenfälliger" Titel, aber es ist wahr! Front-End-Entwickler sind nicht nur "JS-Entwickler", sondern auch nur "CSS / HTML" -Entwickler. Und diese Überschrift ist für sie.

JavaScript ist nicht nur ein Trend, obwohl je nachdem, wen Sie fragen, einige sehr hitzige Gespräche mit Kommentaren wie "Ja, und heutzutage können Sie nicht einmal eine Website öffnen, wenn Sie JS nicht aktiviert haben" oder "Hanks for" auftreten Laden von 5-MB-Schiebereglern und Anzeigen für Ihre Info-Seite “.

Aber egal wie viele positive und negative Seiten es hat, seine Verwendung wächst. Welche JS-basierten Technologien / Ansätze / Werkzeuge sollten also mehr im Trend liegen?

  • Reagieren / Vue als Front zu CMSs wie WordPress (kopflos)
  • WebGL (Three.js) 3D-Grafiken, Simulationen, Interaktivität
  • VR- und AR-Inhalte
  • Optimierte Build-Workflows (Webpack, Schlucken)
  • Browser-APIs für mehr Kontrolle / Funktionalität

Und um einen weiteren guten Grund hinzuzufügen, tiefer in das Thema einzutauchen: Mit nur JS können Sie technisch fast jedes gewünschte Projekt erstellen. Mit nur JS können Sie ein reaktives Frontend erstellen, es mit einem Datenspeicher verbinden, die APIs des Browsers für die beste Benutzererfahrung verwenden und Ihr Projekt live bereitstellen. Alle Anpassungen an den Einstellungen können einfach im Setup vorgenommen werden.

4. Utility-basiertes Styling

Das Utility-basierte Styling konzentriert sich auf das Anwenden von Stilen durch vordefinierte Klassen. Das ist es, was das Stylen einer Webseite im Allgemeinen bedeutet. Hier ist es jedoch etwas anders als beim Standardansatz. Sie .card keine .card mit Schatten, Hintergrund usw. Sie .shadow ein HTML-Element mit .shadow und .bg-light und .br-5 (wie .shadow ).

Dieser Ansatz eignet sich hervorragend für JS-Entwickler, die nur schnell etwas ausgeben müssen und sich keine Sorgen um das CSS machen.

Dies ist überhaupt nicht neu, aber die Popularität von Tailwind hat Entwickler dazu gebracht, den Ansatz zu überdenken.

Rückenwind-Homepage

Rückenwind-Homepage

Einige könnten argumentieren, dass es so ziemlich „CSS in HTML schreiben“ ist, bei dem man eine Komponente nicht wirklich von CSS ändern und überall aktualisieren kann. Technisch gesehen , das ist wahr, aber wenn Ihre Komponenten sind JS - Dateien in einem Reagieren / Vue App zum Beispiel, dann musst du sie in einem Ort aktualisieren.

Vielleicht ist einer der Nachteile, dass Sie ein anderes Framework lernen müssen. Es ist nicht so, als wäre es nur CSS. Sie müssen sich die Eigenschaften merken, da einige Elemente möglicherweise so aussehen:

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

Obwohl es immer Menschen geben wird, die es lieben (und hassen), ist es eine großartige Lösung für viele Probleme. Außerdem werden Sie nie wissen, ob es für Sie funktioniert, bis Sie es wirklich versuchen.

5. Neue CSS-Funktionen

Die Verwendung neuer CSS-Funktionen kann ein Trend für sich sein. Es handelt sich zwar nicht um eine Änderung eines bestimmten Features oder Ansatzes, es stellt jedoch die Art und Weise in Frage, wie wir bisher codiert haben. Die Profis? Es löst viele Probleme. Das Schlechte? Rückwärtskompatibilität.

Dank der Fortschritte der Browser-Anbieter in den letzten ein oder zwei Jahren (Sie, Microsoft) kann die Mehrheit der Benutzer auf der ganzen Welt effizienter als je zuvor auf das Web zugreifen.

ccs Schatten Teile

CSS Shadow Parts als weiteres bevorstehendes Feature

Benutzerdefinierte CSS-Eigenschaften sind eine dieser Funktionen, aber da sie ungefähr 5 Jahre alt (und ziemlich wichtig) sind, verfügt sie über einen eigenen Bereich.

Schreibmodi

Obwohl dies nicht zu oft verwendet wird, da viele Entwickler selten die Sprachen von rechts nach links unterstützen müssen, gibt es Schreibmodi. Sie sind ein Muss für Dashboards / Frameworks und mehrsprachige Websites. Dank der verstärkten Unterstützung von Eigenschaften für direktionales Schreiben, wie z. B. Rand-Inline-Start, müssen Sie für RTL nicht Rand-links nach Rand-rechts überschreiben.

CSS-Subgrid

Wir hatten Flex, dann hatten wir Gitter. Jetzt haben wir Gitter in Gittern . Subgrids ist etwas, von dem Entwickler erwartet haben, dass es sofort verfügbar ist, als Grid zum ersten Mal unterstützt wurde. Nun, jetzt haben wir es und es ist so cool und nützlich, wie es sich anhört. Lobende Erwähnung: Flexbox-Lücken (da es auch Teil von Gittern ist). Es macht was es sagt. Leider wird es noch nicht gut unterstützt.

:is

Eine Kurzauswahl, die am besten mit einem Code-Snippet aus MDN erklärt werden kann:

 / * Wählt einen beliebigen Absatz in einer Kopfzeile aus
oder Fußzeilenelement, das schwebt * /
: is (Kopf-, Haupt- und Fußzeile) p: hover {
Farbe Rot;
Cursor: Zeiger;
}}
 / * Das Obige entspricht dem Folgenden * /
Header p: Hover,
Haupt p: Schwebeflug,
Fußzeile p: hover {
Farbe Rot;
Cursor: Zeiger;
}}