Share
In diesem Artikel werden Sie vorgestellt
Sich anpassendes Webdesign (RWD) hat Webentwickler und -designer im Sturm erobert und ihre Herangehensweise an die Entwicklung einer Website geändert. Wenn man darüber spricht RWD, Ich mache gerne eine Analogie. Wir als Softwareentwickler sind immer wieder von neuen Tools begeistert, genauso wie ein Kind von einem neuen Spielzeug begeistert ist (Sie haben von den jüngsten Auseinandersetzungen mit Front-End-Automatisierungswerkzeugen gehört, nicht wahr?). Wir sind so fasziniert von neuen Spielzeugen, dass wir manchmal Werkzeuge einsetzen und sogar entwickeln, die ein echtes Problem nicht lösen. Gut, RWD ist nicht wie ein neues Spielzeug, mit dem jeder gerne spielt, ohne einen triftigen Grund. Diese Methode hilft uns, echte Probleme zu lösen: Eine Website für eine Vielzahl von Bildschirmen anzupassen. Wie viele (alle?) Dinge im Leben ist es jedoch nicht perfekt und hat einige Einschränkungen.
Eines der wichtigsten offenen Probleme ist das Bereitstellen von Inhaltsbildern für eine nahezu unendliche Anzahl von Geräten, wobei versucht wird, die Version bereitzustellen, die besser zu dem jeweiligen Gerät passt, das derzeit unsere Website besucht. Für diejenigen von Ihnen, die nicht wissen, um welche Inhalte es sich bei Bildern handelt, sind diese Bilder Bestandteil des Inhalts. Daher sollten sie mit der angezeigt werden Hintergrundbild. Bisher wurden drei Hauptvorschläge gemacht, diskutiert, abgelehnt und sogar wiederbelebt Bild Element). Die Vorschläge sind: die srcset Attribut, das Bild Element und die src-n Attribut. Alle haben versucht, die breitere Palette möglicher Anwendungsfälle abzudecken, aber leider wurde keiner von ihnen von allen beteiligten Akteuren vollständig begrüßt. Zum Zeitpunkt dieses Schreibens scheint es so zu sein src-n Attributvorschlag.
Wenn man bedenkt, dass Bilder auf der Grundlage der neuesten Statistiken von HTTPArchive.org etwa 62% des Gesamtgewichts der Webseite ausmachen, kann man leicht verstehen, dass das Lösen des Problems von Inhaltsbildern ein Hauptproblem ist und je früher wir zu einer Lösung gelangen desto besser. Tatsächlich führt eine Verbesserung der Art und Weise, wie und welche Bilder geliefert werden, zu einem schnelleren Laden von Websites, was wiederum zu einer Verbesserung der Erfahrung der Benutzer der Websites führt.
Bevor wir weitermachen, möchte ich betonen, dass dies immer noch ein Vorschlag ist. Daher sind die Spezifikationen in Bewegung, und niemand kann Ihnen das versichern
Accentsconagua
Unter Berufung auf die Spezifikationen "soll das Bildelement den Autoren eine Möglichkeit geben, auf der Grundlage einer Medienabfrage und / oder Unterstützung eines bestimmten Bildformats zu steuern, welche Bildressource ein Benutzeragent einem Benutzer präsentiert." Es sollte "verwendet werden, wenn eine Bildquelle in mehreren Dichten vorhanden ist oder wenn ein responsives Design auf einigen Bildschirmtypen ein etwas anderes Bild diktiert (" Kunstrichtung ")..
Das vorgeschlagene Element besteht aus mehreren Teilen, die wir im Detail analysieren werden. Die erste Tatsache, die Sie wissen müssen, ist, dass es sich lediglich um einen Container für andere Elemente handelt, in dem wir die verschiedenen Versionen des Bildes angeben, die wir anzeigen möchten. In einem Bildelement können Sie zwei Tags finden: Quelle Element hat drei Attribute zur Verfügung:
srcset: Hier geben wir die URL des Bildes an, das wir anzeigen möchten. Das Attribut ermöglicht mehrere durch Kommas getrennte URLs. Darüber hinaus Stichwort aus dem srcset Attributvorschlag, wir können jede URL mit einer Bildschirmauflösung oder einer Breite (als a min-Breite Regel) Spezifikation. Letzteres ist durch ein Leerzeichen von der URL getrennt.Medien: Hier schreiben wir eine Medienabfrage, die, wenn sie als wahr ausgewertet wird, dem vorschlagen wird UA um das in der Datei angegebene Bild anzuzeigen srcset Attribut.Größen: Das Attribut, in dem wir die Menge der intrinsischen Größen für die in beschriebenen Quellen angeben srcset Attribut. Es akzeptiert mehrere durch Komma getrennte Größen.Bis jetzt haben wir zu viel geredet und nichts Konkretes gesehen. Beheben wir dies, indem wir etwas Code sehen!
Nehmen wir als erstes Beispiel an, dass wir eine Website mit Mobile-First-Ansatz entwickelt haben. Jetzt möchten wir ein Inhaltsbild zeigen und das Bild rendern "mobile.png"standardmäßig das Bild"images_15 / besser-responsive-images-with-the-picture-element.png"wenn der Benutzerbildschirm mindestens ist 480px, und "desktop.png"wenn der Benutzerbildschirm mindestens ist 1024px. Weil wir intelligente Entwickler sind, möchten wir auch das Bild rendern "images_15 / besser-responsive-images-with-the-picture-element.png"für die Browser, die das nicht verstehen Bild Element. Um dieses Ziel zu erreichen, müssen wir den folgenden Code schreiben:
Im obigen Code haben wir Pixel als Einheit für die Medienabfragen übernommen, Sie können jedoch auch em verwenden, wenn Sie dies vorziehen.
Das erste gezeigte Beispiel war recht einfach. Mal sehen, wie wir es mit Hilfe der Ausdruckskraft des Wahnsinns verfeinern können srcset Attribut. Stellen Sie sich für das Beispiel vor, dass wir zusätzlich zu den vorherigen Anforderungen die Bilder anhand der Auflösung des Bildschirms differenzieren möchten. Der resultierende Code ist unten aufgeführt:
Wie Sie sehen, für jeden srcset Attribut. Die zweite URL ist mit der Zeichenfolge gekoppelt 2x, getrennt durch ein Leerzeichen, das Benutzer mit einer hochauflösenden Anzeige anspricht (Pixeldichte 2x, wie die Netzhaut). In diesem Fall suchen die Browser zunächst nach der Quelle Element, das den Benutzerbildschirm basierend auf der angegebenen Medienabfrage (falls vorhanden) am besten anpasst. Dann wird die Bildschirmauflösung betrachtet und die beste Anpassung unter den im Feld angegebenen Bildern ausgewählt srcset Attribut.
Als letztes Beispiel werden wir sehen, wie wir das einsetzen können Größen Attribut. Angenommen, wir möchten, dass unser Bild die gesamte Breite des Geräts (100% der Breite) abdeckt, unabhängig von seiner tatsächlichen Größe und Pixeldichte. Um dieses Ziel zu erreichen, können wir die Größe, die wir abdecken möchten, und die Größe jedes Bildes im festlegen srcset Attribut wie unten gezeigt:
In diesem Fall berechnet der Benutzeragent automatisch die effektive Pixeldichte des Bildes und wählt entsprechend aus, welche heruntergeladen werden soll.
Keiner. "Hey Aurelio, was meinst du mit keiner? Ich habe gerade angefangen, meine Website zu aktualisieren!" Wenn Sie sich in diesem Satz wiedererkennen, muss ich Sie leider enttäuschen. Wie ich schon mehrfach in diesem Artikel gesagt habe Bild Element ist noch ein Vorschlag und befindet sich in einem sehr frühen Stadium. Sie müssen also eine Weile warten, bevor Sie die Möglichkeit haben, es einzusetzen. Aber nicht alles ist verloren. Scott Jehl hat für diesen Vorschlag eine Polyfill mit dem Namen picturefill erstellt. Letzteres wurde vor einigen Monaten entwickelt, wurde jedoch mehrmals aktualisiert, um den Spezifikationen zu entsprechen. Derzeit wird es nicht auf die neuesten Spezifikationen aktualisiert, daher unterscheidet sich die Syntax von der in diesem Artikel beschriebenen. Sie können sich jedoch immer noch einen Blick darauf werfen und möglicherweise eine Pull-Anfrage stellen, um das Projekt zu unterstützen.
In diesem Artikel haben wir das Problem der Bereitstellung von Inhaltsbildern erörtert, die für das Gerät geeignet sind, das gerade eine Website besucht. Dann haben wir uns eingehend mit den Spezifikationen des beschäftigt Bild Element, der Vorschlag, der Browseranbieter, Entwickler und alle an dem Prozess beteiligten Akteure in Einklang zu bringen scheint. Leider für uns ist es noch sehr früh, daher können wir es nicht in unseren nächsten Projekten einsetzen. Ich bin jedoch zuversichtlich, dass Browseranbieter bald mit der Implementierung beginnen werden. Als letzte Anmerkung möchte ich Sie dringend bitten, die Spezifikationen zu lesen und zu befolgen.
