Vor etwa 15 Jahren arbeitete ich in einem Unternehmen, in dem wir Apps für Reisebüros, Flughafenmitarbeiter und Fluggesellschaften entwickelten. Wir haben auch unser eigenes internes Framework für UI-Komponenten und Single-Page-App-Funktionen erstellt. Wir hatten Komponenten für alles: Felder, Schaltflächen, Registerkarten, Bereiche, Datentabellen, Menüs, Datumsauswahl, Auswahlmöglichkeiten und Mehrfachauswahlmöglichkeiten. Wir hatten sogar eine div-Komponente. Unsere div-Komponente war übrigens großartig, sie erlaubte uns, abgerundete Ecken in allen Browsern zu erstellen, was, ob Sie es glauben oder nicht, damals keine einfache Sache war.
Unsere Arbeit fand zu einem Zeitpunkt in unserer Geschichte statt, als JS, Ajax und dynamisches HTML als Revolution angesehen wurden, die uns in die Zukunft führte. Plötzlich konnten wir eine Seite dynamisch aktualisieren, Daten von einem Server abrufen und mussten nicht zu anderen Seiten navigieren, was als langsam empfunden wurde und zwischen den beiden Seiten ein großes weißes Rechteck auf dem Bildschirm blinkte. Es gab einen von Jeff Atwood (dem Gründer von StackOverflow) populär gemachten Satz, der lautete: „Jede Anwendung, die in JavaScript geschrieben werden kann, wird irgendwann auch in JavaScript geschrieben.“ – Jeff Atwood
Für uns fühlte es sich damals wie eine Herausforderung an, diese Apps tatsächlich zu entwickeln. Es fühlte sich wie eine pauschale Zustimmung an, alles mit JS zu machen. Wir haben also alles mit JS gemacht und uns nicht wirklich die Zeit genommen, andere Vorgehensweisen zu erforschen. Wir verspürten nicht wirklich den Anreiz, richtig zu lernen, was HTML und CSS leisten können. Wir haben das Web nicht wirklich als sich entwickelnde App-Plattform in seiner Gesamtheit wahrgenommen. Meistens sahen wir darin etwas, das wir umgehen mussten, insbesondere was die Browserunterstützung betraf. Wir könnten einfach mehr JS einsetzen, um die Dinge zu erledigen. Hätte es mir geholfen, mehr darüber zu erfahren, wie das Web funktioniert und was auf der Plattform verfügbar ist? Klar, ich hätte wahrscheinlich eine Menge Code weglassen können, der nicht wirklich benötigt wurde. Aber damals vielleicht nicht so sehr. Sie sehen, die Browserunterschiede waren damals ziemlich groß. Dies war eine Zeit, in der der Internet Explorer noch der dominierende Browser war, dicht gefolgt von Firefox, der jedoch aufgrund der rasch wachsenden Beliebtheit von Chrome begann, Marktanteile zu verlieren. Obwohl Chrome und Firefox sich recht gut auf Webstandards einigen konnten, mussten wir aufgrund der Umgebungen, in denen unsere Apps ausgeführt wurden, IE6 lange Zeit unterstützen. Selbst als wir IE8 unterstützen durften, mussten wir uns mit vielen Unterschieden zwischen den Browsern auseinandersetzen. Darüber hinaus verfügte das damalige Web nicht über so viele direkt in die Plattform integrierte Funktionen.
Schneller Vorlauf bis heute. Die Dinge haben sich enorm verändert. Wir verfügen nicht nur über mehr dieser Fähigkeiten als je zuvor, sondern auch die Geschwindigkeit, mit der sie verfügbar werden, ist gestiegen. Lassen Sie mich die Frage noch einmal stellen: Würde es Ihnen heute helfen, sich die Zeit zu nehmen, mehr darüber zu erfahren, wie das Web funktioniert und was auf der Plattform verfügbar ist? Absolut ja. Wenn Sie heute lernen, die Webplattform zu verstehen und zu nutzen, haben Sie einen großen Vorteil gegenüber anderen Entwicklern. Egal, ob Sie an Leistung, Zugänglichkeit, Reaktionsfähigkeit oder einfach nur an der Bereitstellung von UI-Funktionen arbeiten: Wenn Sie dies als verantwortungsbewusster Ingenieur tun möchten, können Sie Ihre Ziele schneller und besser erreichen, wenn Sie die Tools kennen, die Ihnen zur Verfügung stehen. Für einige Dinge benötigen Sie möglicherweise keine Bibliothek mehr Wenn wir wissen, was Browser heute unterstützen, stellt sich die Frage: Worauf können wir verzichten? Brauchen wir im Jahr 2025 eine Div-Komponente, um abgerundete Ecken zu erstellen? Natürlich tun wir das nicht. Die Eigenschaft border-radius wird zu diesem Zeitpunkt seit mehr als 15 Jahren von allen derzeit verwendeten Browsern unterstützt. Und bald kommt auch Corner-Shape für noch ausgefallenere Ecken. Werfen wir einen Blick auf relativ neue Funktionen, die mittlerweile in allen gängigen Browsern verfügbar sind und mit denen Sie bestehende Abhängigkeiten in Ihrer Codebasis ersetzen können. Es geht nicht darum, sofort alle Ihre geliebten Bibliotheken aufzugeben und Ihre Codebasis neu zu schreiben. Was alles andere angeht, müssen Sie zunächst die Browserunterstützung berücksichtigen und Ihre Entscheidung auf der Grundlage anderer projektspezifischer Faktoren treffen. Die folgenden Funktionen sind in den drei Hauptbrowser-Engines (Chromium, WebKit und Gecko) implementiert. Möglicherweise haben Sie jedoch unterschiedliche Anforderungen an die Browserunterstützung, die Sie daran hindern, sie sofort zu verwenden. Jetzt ist jedoch immer noch ein guter Zeitpunkt, sich mit diesen Funktionen vertraut zu machen und vielleicht zu planen, sie irgendwann einmal zu nutzen. Popovers und Dialoge Die Popover-API, das HTML-Element
Sicherlich hat sich wahrscheinlich auch die Geschwindigkeit Ihrer Internetverbindung erhöht, aber das ist nicht bei jedem der Fall. Und auch nicht jeder verfügt über die gleichen Gerätefunktionen. Wenn Sie stattdessen Code von Drittanbietern für Dinge einbeziehen, die Sie mit der Plattform tun können, bedeutet dies höchstwahrscheinlich, dass Sie mehr Code versenden und daher weniger Kunden erreichen, als Sie es normalerweise tun würden. Im Web führt eine schlechte Ladeleistung zu hohen Abbruchraten und schadet dem Ruf der Marke. Weniger Code auf Geräten ausführen Darüber hinaus läuft der Code, den Sie auf den Geräten Ihrer Kunden bereitstellen, wahrscheinlich schneller, wenn er weniger JavaScript-Abstraktionen auf der Plattform verwendet. Es ist wahrscheinlich auch standardmäßig reaktionsschneller und zugänglicher. All dies führt zu mehr und zufriedeneren Kunden. Schauen Sie sich den jährlichen Blog zur Leistungsungleichheitslücke meines Kollegen Alex Russell an, der zeigt, dass Premium-Geräte aufgrund der Vermögensungleichheit in Märkten mit Milliarden von Nutzern weitgehend fehlen. Und diese Kluft wird mit der Zeit immer größer.
Eingebauter Mauerwerksplan Eine Funktion der Webplattform, die bald verfügbar sein wird und auf die ich mich sehr freue, ist CSS Masonry.
Lassen Sie mich zunächst erklären, was Freimaurerei ist. Was ist Mauerwerk? Mauerwerk ist ein Layouttyp, der vor Jahren durch Pinterest populär wurde. Es werden unabhängige Inhaltsspuren erstellt, in denen sich die Elemente so nah wie möglich am Anfang der Spur anordnen.
Viele Menschen sehen in Masonry eine großartige Option für Portfolios und Fotogalerien, und das ist durchaus möglich. Aber Masonry ist flexibler als das, was Sie auf Pinterest sehen, und es beschränkt sich nicht nur auf wasserfallartige Layouts. In einem Mauerwerkslayout:
Spuren können Spalten oder Zeilen sein:
Inhaltsspuren müssen nicht alle die gleiche Größe haben:
Elemente können sich über mehrere Spuren erstrecken:
Gegenstände können auf bestimmten Spuren platziert werden; Sie müssen nicht immer dem automatischen Platzierungsalgorithmus folgen:
Demos Hier sind ein paar einfache Demos, die ich mit der kommenden Implementierung von CSS Masonry in Chromium erstellt habe. Eine Fotogalerie-Demo, die zeigt, wie Elemente (in diesem Fall der Titel) mehrere Titel umfassen können:
Eine weitere Fotogalerie mit Gleisen unterschiedlicher Größe:
Ein Nachrichtenseiten-Layout, bei dem einige Titel breiter sind als andere und einige Elemente die gesamte Breite des Layouts umfassen:
Eine Kanban-Tafel, die zeigt, dass Artikel auf bestimmten Spuren platziert werden können:
Hinweis: DieFrühere Demos wurden mit einer Version von Chromium erstellt, die für die meisten Webbenutzer noch nicht verfügbar ist, da CSS Masonry gerade erst mit der Implementierung in Browsern begonnen wird. Allerdings nutzen Webentwickler bereits seit Jahren gerne Bibliotheken, um Masonry-Layouts zu erstellen. Websites, die heute Mauerwerk verwenden Tatsächlich ist Freimaurerei heutzutage im Internet ziemlich verbreitet. Hier sind ein paar Beispiele, die ich neben Pinterest gefunden habe:
Und noch ein paar weitere, weniger offensichtliche Beispiele:
Wie wurden diese Layouts erstellt? Problemumgehungen Ein Trick, den ich gesehen habe, besteht darin, stattdessen ein Flexbox-Layout zu verwenden, dessen Richtung in „Spalte“ zu ändern und es auf „Umbruch“ einzustellen. Auf diese Weise können Sie Elemente unterschiedlicher Höhe in mehreren unabhängigen Spalten platzieren und so den Eindruck eines Mauerwerks-Layouts erwecken:
Bei dieser Problemumgehung gibt es jedoch zwei Einschränkungen:
Die Reihenfolge der Elemente ist anders als bei einem echten Mauerwerkslayout. Bei Flexbox füllen die Elemente zuerst die erste Spalte und wechseln dann zur nächsten Spalte, wenn diese voll ist. Bei Masonry würden Gegenstände in der Spur (oder in diesem Fall in der Spalte) gestapelt, in der mehr Platz verfügbar ist. Aber auch, und vielleicht noch wichtiger, erfordert diese Problemumgehung, dass Sie eine feste Höhe für den Flexbox-Container festlegen; andernfalls würde kein Umbruch stattfinden.
Maurerbibliotheken von Drittanbietern Für fortgeschrittenere Fälle haben Entwickler Bibliotheken verwendet. Die bekannteste und beliebteste Bibliothek hierfür heißt einfach Masonry und wird laut NPM etwa 200.000 Mal pro Woche heruntergeladen. Squarespace bietet außerdem eine Layout-Komponente, die als Alternative ohne Code ein Masonry-Layout rendert und von vielen Websites verwendet wird. Beide Optionen verwenden JavaScript-Code, um Elemente im Layout zu platzieren. Eingebautes Mauerwerk Ich freue mich wirklich, dass Masonry jetzt als integrierte CSS-Funktion in Browsern erscheint. Mit der Zeit werden Sie Masonry genauso verwenden können wie Grid oder Flexbox, das heißt, ohne dass Workarounds oder Code von Drittanbietern erforderlich sind. Mein Team bei Microsoft hat die integrierte Masonry-Unterstützung im Chromium-Open-Source-Projekt implementiert, auf dem Edge, Chrome und viele andere Browser basieren. Mozilla war tatsächlich der erste Browser-Anbieter, der im Jahr 2020 eine experimentelle Implementierung von Masonry vorschlug. Und Apple war auch sehr daran interessiert, dieses neue Web-Layout-Primitiv umzusetzen. Die Arbeit zur Standardisierung der Funktion schreitet ebenfalls voran, wobei sich die CSS-Arbeitsgruppe über die allgemeine Richtung und sogar über einen neuen Anzeigetyp geeinigt hat: Gitterspuren. Wenn Sie mehr über Masonry erfahren und den Fortschritt verfolgen möchten, schauen Sie sich meine Seite mit CSS Masonry-Ressourcen an. Wenn Masonry mit der Zeit zu einer Basisfunktion wird, genau wie Grid oder Flexbox, können wir es einfach verwenden und profitieren von:
Bessere Leistung, Bessere Reaktionsfähigkeit, Benutzerfreundlichkeit und einfacherer Code.
Schauen wir uns diese genauer an. Bessere Leistung Wenn Sie Ihr eigenes Masonry-ähnliches Layoutsystem erstellen oder stattdessen eine Bibliothek eines Drittanbieters verwenden, müssen Sie JavaScript-Code ausführen, um Elemente auf dem Bildschirm zu platzieren. Dies bedeutet auch, dass dieser Code das Rendern blockiert. Tatsächlich wird entweder nichts angezeigt oder die Dinge werden nicht an den richtigen Stellen oder in der richtigen Größe sein, bis der JavaScript-Code ausgeführt wurde. Das Masonry-Layout wird oft für den Hauptteil einer Webseite verwendet, was bedeutet, dass der Code Ihren Hauptinhalt später erscheinen lässt, als er es sonst hätte tun können, was Ihre LCP- oder Largest Contentful Paint-Metrik beeinträchtigt, die eine große Rolle bei der wahrgenommenen Leistung und Suchmaschinenoptimierung spielt. Ich habe die Masonry JS-Bibliothek mit einem einfachen Layout und durch die Simulation einer langsamen 4G-Verbindung in DevTools getestet. Die Bibliothek ist nicht sehr groß (24 KB, 7,8 KB gzip), aber unter meinen Testbedingungen dauerte das Laden 600 ms. Hier ist eine Leistungsaufzeichnung, die die lange Ladezeit der Masonry-Bibliothek von 600 ms zeigt und zeigt, dass währenddessen keine andere Rendering-Aktivität stattgefunden hat:
Darüber hinaus musste das heruntergeladene Skript nach der anfänglichen Ladezeit analysiert, kompiliert und dann ausgeführt werden. All dies blockierte, wie bereits erwähnt, die Darstellung der Seite. Mit einer integrierten Masonry-Implementierung im Browser müssen wir kein Skript laden und ausführen. Die Browser-Engine erledigt einfach ihre Aufgabe während des ersten Schritts beim Rendern der Seite. Bessere Reaktionsfähigkeit Ähnlich wie beim ersten Laden einer Seite führt die Größenänderung des Browserfensters dazu, dass das Layout auf dieser Seite erneut gerendert wird. Wenn die Seite jedoch die Masonry JS-Bibliothek verwendet, ist es zu diesem Zeitpunkt nicht erforderlich, das Skript erneut zu laden, da dies bereits der Fall istHier. Allerdings muss der Code ausgeführt werden, der Elemente an die richtigen Stellen verschiebt. Nun scheint diese spezielle Bibliothek dies beim Laden der Seite ziemlich schnell zu tun. Allerdings werden die Elemente animiert, wenn sie bei der Größenänderung des Fensters an eine andere Stelle verschoben werden müssen, und das macht einen großen Unterschied. Natürlich verbringen Benutzer nicht so viel Zeit damit, die Größe ihrer Browserfenster zu ändern wie wir Entwickler. Diese animierte Größenänderung kann jedoch ziemlich verwirrend sein und verlängert die gefühlte Zeit, die die Seite benötigt, um sich an ihre neue Größe anzupassen. Benutzerfreundlichkeit und einfacherer Code Wie einfach die Nutzung einer Webfunktion ist und wie einfach der Code aussieht, sind wichtige Faktoren, die für Ihr Team einen großen Unterschied machen können. Sie können natürlich nie so wichtig sein wie die endgültige Benutzererfahrung, aber die Erfahrung der Entwickler wirkt sich auf die Wartbarkeit aus. Die Verwendung einer integrierten Webfunktion bietet in dieser Hinsicht wichtige Vorteile:
Entwickler, die sich bereits mit HTML, CSS und JS auskennen, werden diese Funktion höchstwahrscheinlich problemlos nutzen können, da sie so konzipiert ist, dass sie sich gut integrieren lässt und mit dem Rest der Webplattform konsistent ist. Es besteht kein Risiko, dass wichtige Änderungen bei der Verwendung der Funktion vorgenommen werden. Es besteht nahezu kein Risiko, dass diese Funktion veraltet ist oder nicht mehr gewartet wird.
Da es sich bei integriertem Masonry um ein Layout-Grundelement handelt, verwenden Sie es über CSS, genau wie Grid oder Flexbox, ohne dass JS beteiligt ist. Auch andere CSS-Eigenschaften, die sich auf das Layout beziehen, wie z. B. Gap, funktionieren wie erwartet. Es gibt keine Tricks oder Problemumgehungen, die Sie kennen müssen, und die Dinge, die Sie lernen, werden auf MDN dokumentiert. Für die Masonry JS-Bibliothek ist die Initialisierung etwas komplex: Sie erfordert ein Datenattribut mit einer bestimmten Syntax sowie versteckte HTML-Elemente zum Festlegen der Spalten- und Lückengrößen. Wenn Sie außerdem spaltenübergreifend arbeiten möchten, müssen Sie die Lückengröße selbst einbeziehen, um Probleme zu vermeiden:
Vergleichen wir dies damit, wie eine integrierte Masonry-Implementierung aussehen würde:
Einfacherer, kompakterer Code, der einfach Dinge wie Lücken verwenden kann und bei dem das Überspannen von Spuren mit Spanne 2 erfolgt, genau wie im Raster, und nicht erfordert, dass Sie die richtige Breite einschließlich der Lückengröße berechnen. Woher wissen, was verfügbar ist und wann es verfügbar ist? Insgesamt stellt sich nicht wirklich die Frage, ob Sie integriertes Masonry anstelle einer JS-Bibliothek verwenden sollten, sondern vielmehr, wann. Die Masonry JS-Bibliothek ist großartig und füllt seit vielen Jahren und für viele zufriedene Entwickler und Benutzer eine Lücke in der Webplattform. Wenn man es mit einer integrierten Masonry-Implementierung vergleicht, hat es natürlich ein paar Nachteile, aber diese sind nicht wichtig, wenn diese Implementierung noch nicht fertig ist. Es fällt mir leicht, diese coolen neuen Webplattformfunktionen aufzulisten, da ich bei einem Browser-Anbieter arbeite und daher tendenziell weiß, was kommt. Aber Entwickler teilen in Umfragen immer wieder mit, dass es schwierig ist, den Überblick über neue Dinge zu behalten. Es ist schwierig, auf dem Laufenden zu bleiben, und Unternehmen legen ohnehin nicht immer Wert auf Lernen. Um Ihnen dabei zu helfen, finden Sie hier einige Ressourcen, die Aktualisierungen auf einfache und kompakte Weise bereitstellen, damit Sie schnell an die benötigten Informationen gelangen:
Die Webplattform verfügt über eine Explorer-Site: Die Seite mit den Versionshinweisen könnte Sie interessieren. Und wenn Sie RSS mögen, sehen Sie sich den Feed mit den Versionshinweisen sowie die Feeds „Baseline Newly Available“ und „Widely Available“ an.
Das WebPlattformstatus-Dashboard: Vielleicht gefallen Ihnen die verschiedenen Seiten zum Basisjahr.
Roadmap-Seite zum Status der Chrome-Plattform.
Wenn Sie etwas mehr Zeit haben, könnten Sie auch an den Versionshinweisen der Browser-Anbieter interessiert sein:
Chrom Kante Firefox Safari
Weitere Ressourcen finden Sie in meinem Cheatsheet zum Navigieren auf der Webplattform. Mein Ding ist immer noch nicht umgesetzt Das ist die andere Seite des Problems. Selbst wenn Sie die Zeit, Energie und Möglichkeiten finden, den Überblick zu behalten, ist es immer noch frustrierend, Ihrer Stimme Gehör zu verschaffen und Ihre Lieblingsfunktionen zu implementieren. Vielleicht warten Sie schon seit Jahren auf die Behebung eines bestimmten Fehlers oder auf die Bereitstellung einer bestimmten Funktion in einem Browser, in der sie noch fehlt. Was ich sagen möchte ist, dass Browser-Anbieter zuhören. Ich bin Teil mehrerer organisationsübergreifender Teams, in denen wir ständig Entwicklersignale und Feedback besprechen. Wir prüfen viele verschiedene Feedbackquellen, sowohl intern bei jedem Browser-Anbieter als auch extern/öffentlich in Foren, Open-Source-Projekten, Blogs und Umfragen. Und wir versuchen immer, bessere Möglichkeiten für Entwickler zu schaffen, ihre spezifischen Bedürfnisse und Anwendungsfälle zu teilen. Wenn Sie können, fordern Sie bitte mehr von den Browser-Anbietern und setzen Sie uns unter Druck, die von Ihnen benötigten Funktionen zu implementieren. Ich verstehe, dass es Zeit braucht und auch einschüchternd sein kann (ganz zu schweigen von der hohen Eintrittsbarriere), aber es funktioniert auch. Hier sind einige Möglichkeiten, wie Sie Ihrer Stimme (oder der Ihres Unternehmens) Gehör verschaffen können: Nehmen Sie an den jährlichen Umfragen zum Stand von JS, zum Stand von CSS und zum Stand von HTML teil. Sie spielen eine große Rolle dabei, wie Browser-Anbieter ihre Arbeit priorisieren. Wenn Sie eine bestimmte standardbasierte API benötigen, die konsistent in allen Browsern implementiert werden soll, sollten Sie erwägen, bei der nächsten Iteration des Interop-Projekts einen Vorschlag einzureichen. Es erfordert mehr Zeit, aber bedenken Sie, wie Shopify und RUMvision ihre Wunschlisten für Interop 2026 geteilt haben. Detaillierte Informationen wie diese können für Browser-Anbieter sehr nützlich sein, um Prioritäten zu setzen. Weitere nützliche Links zur Einflussnahme auf Browser-Anbieter finden Sie in meinem Cheatsheet „Navigating the Web Platform“. Fazit Abschließend hoffe ich, dass dieser Artikel Ihnen einige Dinge zum Nachdenken gebracht hat:
Spannung für Masonry und andere kommende Web-Features. Einige Webfunktionen, die Sie möglicherweise nutzen möchten. Einige Teile benutzerdefinierten Codes oder Codes von Drittanbietern können Sie möglicherweise zugunsten integrierter Funktionen entfernen. Ein paar Möglichkeiten, den Überblick über die Zukunft zu behalten und Einfluss auf Browser-Anbieter zu nehmen.
Noch wichtiger ist, dass ich Sie hoffentlich von den Vorteilen überzeugt habe, die sich aus der vollen Nutzung der Webplattform ergeben.
