5 Front-End-Trends, die 2022 folgen werden

Es gibt eine Unmenge von Artikeln zum Thema „Designtrends, denen man folgen sollte“ im Internet. Wir haben auch einen in Hot Web Design Trends to Follow in 2022 aufgegriffen. 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 die Benutzer wollen, Skalierbarkeit ist das, was der Kunde will.

Um also allen Front-End-Entwicklern gebührenden Respekt zu zollen und den Designern einige Einblicke und Ideen zu geben, haben wir diese Liste mit „Front-End-Trends, die 2022 folgen sollen“ zusammengestellt.

1. Benutzerdefinierte CSS-Eigenschaften

Dies ist etwas, was sich Entwickler seit Jahren gewünscht haben, obwohl benutzerdefinierte CSS-Eigenschaften (oder auch bekannt als CSS-Variablen) schon seit einiger Zeit auf dem Markt sind. W3C Module Level 1 zum Beispiel stammt aus dem Jahr 2015. Aber wie bei jeder neuen Technologie dauert es eine Weile, bis sie sich durchsetzt. Und wir glauben, dass wir im Jahr 2021 einige der größten Akzeptanzraten seit seiner Einführung erleben werden.

Warum ist es cool?

Benutzerdefinierte Eigenschaften sind eigentlich 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 einfach rot.

Bei benutzerdefinierten Eigenschaften haben Sie jedoch --primary: red . Und dann können Sie --primary zum Beispiel in Blau umdefinieren. Direkt im Browser, es ist kein Kompilieren erforderlich. Um mehr über diese CSS-Tricks zu erfahren, lesen Sie diesen Artikel: Was ist der Unterschied zwischen CSS-Variablen und Präprozessorvariablen?

Ein netter Trick, um sie zu verwenden, ist das benutzerdefinierte Thematisieren. Sie können HSL-Werte über Variablen definieren und den Benutzern dann erlauben, den Farbton über einen Schieberegler am Frontend zu ändern. Verbinden Sie den Schiebereglerwert mit der CSS-Variablen mit JS und BAM mit der Funktion „Set your color scheme“.

2. Variable Schriftarten

Variable Schriftarten, genau wie benutzerdefinierte CSS-Eigenschaften, gibt es schon seit einiger Zeit, sind aber immer noch nicht weit verbreitet. Ein Grund wäre die Zeit, die sie benötigen, um populärer zu werden, die Anzahl der Tutorials/Anleitungen und Techniken, um von Entwicklern übernommen zu werden, sowie die benötigten Schriftarten selbst. Sie können nicht einfach eine Schriftart auswählen und Änderungen daran vornehmen.

Eine der wichtigsten Websites, die Sie zum Durchsuchen und Experimentieren verwenden können, ist Variable Fonts. Es dient auch als gute Demo, falls Sie diesen Begriff zum ersten Mal hören. Variable Schriftarten ermöglichen es Ihnen, eine einzige Datei zu verwenden und Eigenschaften wie "font-weight" oder "font-style" anzuwenden, mit vollständiger Kontrolle über die Stärke oder Neigung …

Quelle

Warum ist es cool?

Nun, es ist klar, dass es uns, den Entwicklern (und Designern), fast unendliche Freiheit gibt, wie eine Schrift aussieht. Haben Sie schon einmal 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 oft mittlere Eigenschaften an. Sie kennzeichnen 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 tun Sie es mit variablen Schriftarten!

Variable Schriftarten haben noch einen weiteren großen Vorteil. Wie Sie wahrscheinlich wissen, tragen Schriftarten stark zu den Ladezeiten bei . Sowohl in Bezug auf die Bandbreite als auch auf die Wiedergabe auf dem Bildschirm. Eine eher standardmäßige Anfrage könnte so 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 finden Sie unter Variable Schriftarten: Einführung in variable Schriftarten im Web.

3. Mehr JavaScript!

Dies ist ein Titel, der die Augen verdreht, aber er 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 „Danke dafür 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. Also, welche JS-basierte Technologie/Ansatz/Tooling sollte mehr im Trend liegen?

• React/Vue als Front zu CMS wie WordPress (headless).
• WebGL (Three.js) 3D-Grafiken, Simulationen und Interaktivität.
• VR- und AR-Inhalte.
• Optimiertere Build-Workflows (Webpack, Gulp).
• Browser-APIs für mehr Kontrolle/Funktionalität.

Und um einen weiteren guten Grund hinzuzufügen, tiefer einzutauchen – nur mit JS können Sie technisch fast jedes Projekt erstellen, das Sie wollen. Mit nur JS können Sie ein reaktives Frontend erstellen, es mit einem Datenspeicher verbinden, die APIs des Browsers für die beste Benutzererfahrung nutzen und Ihr Projekt live bereitstellen. Eventuelle Anpassungen der Einstellungen können einfach im Setup vorgenommen werden.

4. Utility-basiertes Styling

Utility-basiertes Styling konzentriert sich auf das Anwenden von Styles durch vordefinierte Klassen. Das bedeutet im Allgemeinen das Gestalten einer Webseite. Allerdings ist es hier etwas anders als beim Standardansatz. Sehen Sie, Sie gestalten eine .card nicht mit Schatten, Hintergrund usw. Sie gestalten ein HTML-Element mit .shadow und .bg-light und .br-5 (wie border-radius).

Es ist ein Ansatz, der erstaunlich gut für JS-Entwickler funktioniert, die nur schnell etwas ausgeben müssen und sich keine Sorgen um CSS machen.

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

Quelle

Einige könnten argumentieren, dass es so ziemlich das „Schreiben von CSS in HTML“ ist, bei dem Sie eine Komponente nicht wirklich von CSS ändern und überall aktualisieren können. Technisch gesehen stimmt das, aber wenn Ihre Komponenten beispielsweise JS-Dateien in einer React/Vue-App sind, dann aktualisieren Sie sie an einem Ort.

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 so aussehen könnten:

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

Obwohl es immer Leute 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 Frontend-Technologietrend für sich sein. Es handelt sich zwar nicht um eine Änderung an einer bestimmten Funktion oder einem bestimmten Ansatz, aber es stellt die Art und Weise in Frage, wie wir bisher codiert haben. Die Profis? Es löst viele Probleme. Das Schlechte? Rückwärtskompatibilität.

Aber dank der Fortschritte der Browser-Anbieter in den letzten ein oder zwei Jahren (wenn Sie mich an Microsoft denken) kann die Mehrheit der Benutzer auf der ganzen Welt effizienter als je zuvor auf das Internet zugreifen.

Quelle

Benutzerdefinierte CSS-Eigenschaften sind eine dieser Funktionen, aber da sie etwa 6 Jahre alt (und ziemlich umfangreich) sind, hat sie einen eigenen Abschnitt.

Schreibmodi

Obwohl nicht allzu oft verwendet, 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 direktionalen Schreibeigenschaften wie beispielsweise margin-inline-start müssen Sie bei RTL nicht margin-left mit margin-right überschreiben.

CSS-Unterraster

Wir hatten Flex, dann hatten wir Grids. Jetzt haben wir Grids in Grids . Subgrids sind etwas, von dem Entwickler erwarteten, dass es sofort verfügbar sein würde, 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 Grids ist). Es tut, was es sagt.

:is

Eine Kurzschrift-Auswahl, die am besten mit einem Code-Snippet erklärt wird , das wir von MDN übernommen haben:

 /* Wählt einen beliebigen Absatz innerhalb einer Kopfzeile aus, main
oder Fußzeilenelement, das mit der Maus bewegt wird */
:is(Kopfzeile, Hauptzeile, Fußzeile) p:hover {
Farbe Rot;
Cursor: Zeiger;
}

 /* Das Obige entspricht dem Folgenden */
Kopfzeile p:schweben,
Hauptp:schweben,
Fußzeile p:hover {
Farbe Rot;
Cursor: Zeiger;
}

Einpacken

Mit den Front-End-Trends hat sich im Laufe der Jahre viel geändert, und die Verbesserungen werden immer weiter kommen. Wenn Sie eine Website wünschen, die Ihnen die gewünschten Conversions und Einnahmen liefert, sollten Sie bereits jetzt mit der Arbeit an Ihrer Front-End-Codierung beginnen. Ihre Kunden sollten Ihre Webseite problemlos verwenden können, damit sie ermutigt werden, mit Ihrem Unternehmen zu interagieren.

Versuchen Sie, die oben erwähnten Front-End-Trends zu implementieren, und lassen Sie uns wissen, wie dies Ihrem Unternehmen zum Wachstum verholfen hat.