In den letzten Jahren haben wir viele Veränderungen und Abweichungen in Bezug auf Webtechnologien erlebt. Im Jahr 2020 sehe ich uns als Web-Community auf zwei Haupttrends/Ziele zusteuern: **Erweiterbarkeit** und **Interoperabilität**. Lassen Sie uns diese aufschlüsseln.
Erweiterbarkeit
Erweiterbarkeit beschreibt, inwieweit jemand eine bestimmte Technologie nehmen und sie an seine eigenen Bedürfnisse anpassen kann. Wir haben in den letzten Jahren ein komponentenbasiertes Web sowohl in Bezug auf die Entwicklung (React-Komponenten! Vue-Komponenten! Svelte-Komponenten! Web-Komponenten!) als auch auf das Design (Design-Systeme!) aufgebaut. Interessant, wie die Form der Funktion folgt, nicht wahr?
Jetzt versuchen wir, diesem Komponentensystem ein einzigartigeres Aussehen und Gefühl zu verleihen. Erweiterbarkeit im Web ermöglicht es uns, die Plattform an unsere eigenen Bedürfnisse anzupassen und mit Ergebnissen zu experimentieren.
CSS selbst wird immer erweiterbarer...
CSS Houdini
Mit CSS Houdini können Entwickler das, was im CSS Object Model derzeit möglich ist, erweitern und dem Browser beibringen, wie er sein CSS lesen und rendern soll.
Das bedeutet, dass Dinge, die bisher im Web nicht möglich waren, wie abgewinkelte Ecken oder Layouts mit runden Ecken, nun möglich werden.
Wenn Sie mit Houdini noch nicht vertraut sind, ist dies ein Oberbegriff, der eine Reihe verschiedener Browser-APIs beschreibt, die die Browserleistung verbessern sollen. Es macht das Styling erweiterbarer und lässt Benutzer ihre eigenen CSS-Funktionen definieren. Houdinis aktuelle APIs umfassen:
Mit diesen APIs können Benutzer aussagekräftige semantische CSS-Elemente nutzen (dank des Typed Object Model) und sogar ihren CSS-Variablen Semantik verleihen (Properties and Values). Mit der Paint API können Sie eine Leinwand zeichnen und diese als Rahmenbild verwenden (Hallo, Farbverlauf-Rahmen) oder animierte Funken erstellen, die dynamische Argumente akzeptieren und mit einer einzigen CSS-Zeile implementiert werden.
.sparkles {
background: paint(sparkles)
}Sie können runde Menüs erstellen, ohne die Elemente manuell mit Margins zu platzieren (über die Layout API), und Sie können eigene Interaktionen integrieren, die außerhalb des Haupt-Threads ablaufen (mit dem Animation Worklet).
Houdini ist definitiv etwas, das man im neuen Jahr im Auge behalten sollte, und jetzt ist ein guter Zeitpunkt, um damit zu experimentieren, falls Sie es noch nicht getan haben.
Variable Fonts
Eine weitere Technologie, die dem Ziel, Webseiten performanter zu machen und gleichzeitig mehr Benutzererweiterbarkeit zu bieten, entspricht, sind variable Fonts. Da immer mehr neue variable Fonts auftauchen – und Googles Fonts kürzlich seinen Beta-Launch hatte –, sind variable Fonts jetzt verfügbarer und einfacher zu verwenden als je zuvor.
Variable Fonts sind vektorbasiert und erlauben eine breite Palette von Werten für verschiedene Schriftachsen wie Dickte und Neigung. Die Interpolation dieser Achsen ermöglicht es den Schriften, reibungslos zwischen Punkten zu wechseln.
Hier ist ein Beispiel:
Variable Fonts ermöglichen auch neue Achsen, die Designern und Entwicklern helfen, noch kreativer zu arbeiten. Hier ist ein Beispiel für einige davon aus einer ausgezeichneten Ressource namens v-fonts.
Variable Fonts werden relativ gut unterstützt, wobei 87 % der modernen Browser das erforderliche Schriftformat unterstützen.
Custom Properties
Custom Properties werden, ähnlich wie variable Fonts, ebenfalls gut unterstützt. Auch wenn sie nicht neu sind, entdecken wir immer noch all die Dinge, die wir mit Custom Properties machen können.
Custom Properties ermöglichen wirklich dynamische CSS-Variablen, was bedeutet, dass wir sie in JavaScript anpassen können, wodurch Logik und Stil getrennt werden. Ein großartiges Beispiel dafür stammt von David Khourshid, der uns zeigt, wie man reaktive Animationen erstellt und das Styling synchronisiert, ohne sich darum kümmern zu müssen.
Wir beginnen auch, mehr Logik in unseren Stylesheets zu experimentieren. Ich habe kürzlich einen Blogbeitrag veröffentlicht, der erklärt, wie man dynamische Farbthemen mit der nativen CSS-Funktion calc() und Custom Properties erstellt.
Dies eliminiert die Notwendigkeit zusätzlicher Tools zur Verarbeitung unseres CSS und stellt sicher, dass diese Technik für Theming über jeden Technologie-Stack hinweg funktioniert – was mich zu meiner nächsten Vision für 2020 bringt: Interoperabilität.
Interoperabilität
Interoperabilität bedeutet in meiner Definition in diesem Beitrag die Fähigkeit, zwischen Technologien und menschlichen Bedürfnissen zu arbeiten. Aus technischer Sicht, angesichts des fragmentierten Webs, haben viele Unternehmen in der Vergangenheit ihre Technologie-Stacks migriert oder haben mehrere interne Stacks und sind nun wahrscheinlich daran interessiert, ihre Technologie-Stacks gegen zukünftige Änderungen abzusichern, um einen gewissen Grad an Einheitlichkeit zu wahren.
Web-Komponenten
Web-Komponenten versuchen, dieses Problem zu lösen, indem sie das Problem der komponentenbasierten Architektur aus der Perspektive von Webstandards angehen. Die Vision ist die Einführung eines Standardformats, das mit oder ohne Bibliothek verwendet werden kann, was die Entwicklererfahrung verbessert und die Einheitlichkeit zwischen den Komponenten herstellt.
Jede Web-Komponente ist gekapselt und funktioniert in modernen Browsern ohne Abhängigkeiten. Diese Technologie entwickelt sich noch weiter und ich denke, wir werden 2020 ein starkes Wachstum sehen.
Logische Eigenschaften
Logische Eigenschaften fordern uns heraus, unser mentales Modell der Anwendung von Layoutgrößen auf einer Seite anzupassen, um unsere Seiten sprach- und lesemodusübergreifend benutzerfreundlicher zu gestalten. Sie ermöglichen es, dass unsere Layouts mit Benutzererfahrungen interoperabel sind.
Im Englischen und anderen von links nach rechts geschriebenen Sprachen denken wir über die Layoutwelt in Bezug auf Höhe und Breite und verwenden eine kompassartige Ausdrucksweise für Ränder, Rahmen und Abstände (oben, links, unten, rechts). Wenn wir jedoch auf diese Weise stylen und dann die Sprache in eine von rechts nach links geschriebene Sprache wie Arabisch ändern, bedeutet der `padding-left` unserer Absätze nicht mehr einen Abstand vom Anfang des Lesebereichs. Dies bricht das Layout.
Wenn Sie `padding-inline-start` anstelle von `padding-left` schreiben würden, würde der Abstand beim Wechseln zu einer von rechts nach links geschriebenen Sprache korrekt auf die andere Seite der Seite (den Beginn des Lesebereichs) verschoben und die Layoutintegrität beibehalten.
Präferenz-Media-Abfragen
Präferenz-Media-Abfragen sind ebenfalls auf dem Vormarsch und bieten 2020 mehr Möglichkeiten. Sie ermöglichen es uns, unsere Seiten so anzupassen, dass sie für Menschen mit hoher Kontrast- oder Dunkelmodus-Präferenz sowie für Menschen, die eine weniger animationsintensive Erfahrung bevorzugen, funktionieren.
Die kommenden Präferenz-Media-Abfragen umfassen:
In diesem Video erkläre ich, wie man eine Präferenz-Media-Abfrage für den Dunkelmodus erstellt, indem man Custom Properties für das Styling verwendet.
Zweitplatzierter: Geschwindigkeit
Geschwindigkeit ist ebenfalls ein Thema, das ich als einen großen Fokus der Web-Welt im Jahr 2020 sehe. Mehrere der oben genannten Technologien haben den Vorteil, die Web-Performance zu verbessern, auch wenn dies nicht der Hauptfokus ist (z.B. wie variable Fonts das Gesamtgewicht heruntergeladener Fonts reduzieren können). Leistung wird immer wichtiger, wenn wir an die nächsten Milliarden Nutzer denken, die online gehen, in Regionen, in denen die Netzwerkgeschwindigkeiten möglicherweise mangelhaft sind.
Darüber hinaus gewinnt Web Assembly, ein Wrapper, der es Benutzern ermöglicht, näher an der Browser-Hardware zu schreiben, an Popularität. Ich sehe auch für das kommende Jahr viel mehr Arbeit mit WebGL, das ähnliche Techniken für fortgeschrittene und schnelle Grafikdarstellung verwendet. Das Schreiben von Low-Level-Code ermöglicht schnellere Erlebnisse und kann in einigen Fällen von WebGL erforderlich sein, um zu verhindern, dass fortgeschrittene Visualisierungen unsere Browser zum Absturz bringen. Ich denke, wir werden sehen, wie diese beiden Technologien wachsen und 2020 mehr WebGL-Demos auftauchen.
Das Web entwickelt sich ständig weiter, und das macht es so spannend, Teil davon zu sein. Was sehen Sie als Ziel oder Technologie, auf die man 2020 achten sollte? Erzählen Sie es uns in den Kommentaren!