In den letzten Jahren haben wir in der Welt der Webtechnologien viele Veränderungen erlebt. Im Jahr 2020 möchte ich Ihre Aufmerksamkeit auf zwei Haupttrends / -ziele lenken, die die Web-Community verfolgt: Erweiterbarkeit und Kompatibilität.
Erweiterbarkeit
Erweiterbarkeit ist, wenn Sie Technologie nutzen und erweitern können, um sie an Ihre Bedürfnisse anzupassen. Seit mehreren Jahren setzen wir Komponenten überall ein, sowohl als Anwendungsentwicklung (Komponenten auf React, Vue, Svelte) als auch als Designentwicklung (Systemdesign).
Im Moment versuchen wir, diese Komponenten einzigartiger und benutzerfreundlicher zu gestalten. Die Erweiterbarkeit im Web ermöglicht es uns, die Plattform (Browser, HTML / CSS / JS-Engines) für unsere eigenen Bedürfnisse und Experimente zu verwenden, um natürlich weitere Vorteile zu erzielen.
CSS Houdini
Dank CSS Houdini können Entwickler die Funktionen des CSS-Objektmodells erweitern, die Darstellung von Browsern ändern und mit Stilen arbeiten.
Dies bedeutet, dass wir jetzt etwas tun können, was vorher einfach nicht möglich war. Zum Beispiel schräge Ecken einer Schaltfläche oder ein abgerundetes Layout.
( Link zur Demo )
Mit Houdini können Sie das Design mit CSS erweitern und CSS benutzerdefinierte Regeln hinzufügen. Derzeit umfasst Houdini:
Mit diesen APIs kann der Benutzer die Semantik in CSS (Typed Object Model) verwenden, indem er die Paint-API wie auf canvas zeichnet und das Ergebnis als Rahmen (hi gradient border) anwendet oder eine parametrisierte Animation in nur einer Zeile von CSS erstellt.
.sparkles { background: paint(sparkles) }
Beispielsweise können Sie Animationen in einen separaten Stream (Animations-Worklet) übertragen und die Layout-API verwenden, um Elemente eindeutig anzuordnen, ohne Regeln wie Rand, Abstand, Links, Rechts zu verwenden.
Alles in allem ist Houdini eines dieser Dinge, die es wert sind, in diesem Jahr beachtet zu werden.
Variable Schriftarten
Variable Schriftarten sind die Zukunft der Web-Typografie. Sie bieten eine Reihe von Optionen zur Steuerung der Anzeige von Text auf Bildschirmen (Größe, Fettdruck, Stil). Und das bei einer relativ kleinen Dateigröße. Es ist Zeit, sich von der endlosen Debatte darüber zu verabschieden, wie viele Schriftarten Sie verbinden müssen, um Ihren Inhalten ein neues, schönes Leben zu ermöglichen.
Weitere Informationen zu variablen Schriftarten finden Sie in diesem Artikel .
Benutzerdefinierte Eigenschaften
Mit benutzerdefinierten Eigenschaften können wir strukturierteres und gleichzeitig dynamischeres CSS schreiben. Hier geht es nicht nur um Variablen, sondern auch um die Möglichkeit, diese Variablen mit JS zu ändern.
: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); }
Es werden bereits benutzerdefinierte Eigenschaften sowie variable Schriftarten unterstützt, und Sie müssen für diese keine Post- / Pre-Prozessoren verwenden. Diese "Technologien" funktionieren in verschiedenen Browsern und auf verschiedenen Systemen. Von hier aus gehen wir reibungslos zur Kompatibilität über.
Kompatibilität
Die Kompatibilität in diesem Artikel ist per Definition die Fähigkeit von Technologien, je nach den Anforderungen des Benutzers austauschbar zu sein. Auf der technischen Seite können Sie ein Beispiel dafür geben, wie viele Unternehmen den Umstieg vom alten auf den neuen Stack abgeschlossen haben oder gerade durchführen. Zum Beispiel Backbone -> Reagieren, und sie möchten zu einer gemeinsamen Ansicht gelangen, die keine so großen Migrationen mehr erfordert. Komponenten und Webkomponenten, vielleicht der aktuelle Stand der Dinge, der vielen zusagt.
Webkomponenten
Webkomponenten versuchen, das Kompatibilitätsproblem von Webstandards zu lösen. Die Hauptaufgabe besteht darin, ein solches einheitliches Formular bereitzustellen, für dessen Erstellung nicht einmal ein Framework oder eine Bibliothek erforderlich ist.
Jede Webkomponente ist gekapselt und funktioniert in modernen Browsern ohne Abhängigkeiten. Diese Technologie befindet sich noch in der Entwicklung, wird aber hoffentlich im Jahr 2020 noch mehr neue Funktionen erhalten.
Logische Eigenschaften
Durch logische Eigenschaften können wir das Modell, mit dem wir Elemente auf der Seite anordnen, überdenken und es für verschiedene Sprachen und Geräte, mit denen Benutzer auf Websites zugreifen, benutzerfreundlicher gestalten.
Zum Beispiel stellen wir auf Russisch, das von links nach rechts gelesen wird, Höhe, Breite, links, rechts, oben und unten dar - genau so, wie wir es uns vorstellen (Ihre Kappe). Aber zum Beispiel auf Arabisch, wo alles von rechts nach links ist, sind die Dinge etwas anders. padding-left wird nicht länger der Einzug am Anfang des Absatzes sein, da er nicht links beginnt.
Als Beispiel für eine boolesche Eigenschaft können Sie padding-inline-start anstelle von padding-left . Und dann wird auf der Seite, mit der Wörter normalerweise in der vom Benutzer gewählten Sprache gelesen werden, eine padding installiert. Wenn es russisch ist, wird padding-left aufgefüllt, und wenn es arabisch ist, wird padding-right .
Dies sind Medienkanäle, über die wir uns über Benutzerpräferenzen informieren können. Beispielsweise mag ein Benutzer ein dunkles Thema. Das können wir mit dem prefers-color-scheme herausfinden:
.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; }
Wie immer wird der interessanteste und unterhaltsamste Teil nicht nur in Edge und IE unterstützt.
Die interessantesten Medienshows:
Präferiert-Farbschema
bevorzugt Kontrast
bevorzugt-reduzierte-bewegung
bevorzugt-reduzierte-transparenz
Geschwindigkeit
Wo ohne im neuen 2020. Ich habe das Animations-Worklet bereits beiläufig erwähnt, mit dem Sie einige Animationslogiken in einem separaten Thread ausführen können. Es gibt jedoch auch andere Technologien, die es uns ermöglichen, das Web zu beschleunigen, und die bald weit verbreitet sein werden. Zum Beispiel Web Assembly , ein Wrapper, mit dem Sie einfachen Code schreiben können, und nicht nur in JS. WebGL verbessert sich weiter und bietet uns eine leistungsstarke und schnelle grafische Komponente direkt im Browser. Durch die Kombination dieser beiden Technologien können Sie unglaubliche Spiele erstellen, die in einem Browser bisher nicht vorstellbar waren.
Das Web entwickelt sich ständig und unerbittlich weiter, vielleicht ist es das, was es so interessant macht. Und welche Technologien werden Ihrer Meinung nach zum Trend des Jahres 2020?