Reduzierte Motiv -Bild -Technik, nehmen Sie zwei

Haben Sie diese nette Technik für die Verwendung des -Elements mit gesehen, um ein animiertes Bild (oder nicht) basierend auf einer Medienabfrage mit vorgefertigten Motion zu servieren?

Nachdem wir das in unserem Newsletter mitgeteilt hatten, bekamen wir eine interessante Antwort von Michael Gale:

Was ist mit Leuten, die ihre animierten GIFs lieben, aber nur nicht, dass die Benutzeroberfläche überall zoomen? Sind sie jetzt gezwungen, eine Wahl zwischen Inhalt und Benutzeroberfläche zu treffen?

Ich fand das eine ziemlich interessante Frage.

Auch wenn ich in diesen Tagen sehe, wird mein Gehirn in gut ausgelöst. Was ist mit MP4?! Territorium, da ich richtig davon überzeugt war, dass Videos im Internet besser sind als GIFs. Es stellt sich heraus, dass einige Browser Videos direkt innerhalb des -Element unterstützen und ob Sie es glauben oder nicht, Sie können Fallbacks dafür schreiben, mit - Drumroll, bitte - auch für das -Element!

Lassen Sie uns einen Spalt machen, um all dieses Zeug zu kombinieren.

Hinzufügen einer MP4 -Quelle

Das einfache fügt ein zusätzliches mit dem Video hinzu. Das heißt, wir benötigen drei Quell -Mediendateien:

1. Eine nicht animierte Grafik bei Vorlieben reduzierter Bewegung wird reduziert.
2. Ein animiertes GIF als Standard.
3. Ein MP4 -Video, um das GIF zu ersetzen, wenn der Fallback unterstützt wird.

Zum Beispiel:

 <bild>
  <source srcset="static.png" media="(bevorzugt-reduzierte Bewegung: Reduzierung)"> </source>
  <source srcset="animated.mp4" type="Video/mp4">
  <img srcset="animated.gif" alt="Animated Image">
</source></bild>

Unter Standardbedingungen in Chrome wird nur das GIF heruntergeladen und gezeigt:

Unter Standardbedingungen in Safari wird nur der MP4 heruntergeladen und gezeigt:

Wenn Sie Vorläufe aktiviert haben, reduzierte Motion: Reduzieren Sie entweder in Chrome oder Safari (auf meinem Mac gehe ich zu Systemeinstellungen → Zugänglichkeit → Anzeige → Bewegung reduzieren ). Beide Browser laden nur die statische PNG-Datei herunter.

Ich habe Firefox getestet und es scheint nicht zu funktionieren, sondern die GIF -Version weiter herunterzuladen. Firefox scheint die vorläufige Motion zu unterstützen, aber vielleicht wird es nur noch nicht von Elementen unterstützt? Ich bin mir nicht sicher, was dort oben ist.

Wäre es nicht ein bisschen cool, eine einzelne animierte Quelle bereitzustellen und ein Tool die anderen daraus zu generieren? Ich wette, Sie könnten das mit so etwas wie Wolkinär verdrahten.

Hinzufügen eines Umschusses, um die animierte Version anzuzeigen

Wie Michael Gale erwähnte, scheint es schade, dass Sie die animierte Version völlig ausgeschlossen haben, nur weil Sie einen reduzierten Bewegungsschalter geworfen haben.

Es sollte einfach genug sein, eine zu haben, mit der JavaScript die Medienabfrage herausgeschleudert und den Browser dazu zwingt, die animierte Version anzuzeigen.

Ich bin mir ziemlich sicher, dass es in HTML keine praktische Möglichkeit gibt, dies deklarativ zu tun. Wir können diese Schaltfläche auch nicht in das -Tag einfügen. Auch wenn kein ersetzter Element ist, wird der Browser immer noch verwirrt und mag es nicht. Stattdessen macht es es überhaupt nicht. Keine große Sache, wir können einen Wrapper verwenden.

 <div>
  
  <bild>
     
  </bild>

  <butth> Animate 

</butth>
</div>

Wir können die Schaltfläche irgendwo oben auf dem Bild positionieren. Dies ist nur eine willkürliche Wahl - Sie könnten sie überall hinstellen, wo immer Sie möchten, oder sogar das gesamte Bild tappbar sein lassen, solange Sie glauben, dass Sie dies den Benutzern erklären könnten. Denken Sie daran, nur die Schaltfläche anzuzeigen, wenn dieselbe Medienabfrage übereinstimmt:

 .picture-wrap .animate-button {
  Anzeige: Keine;
}

@media (bevorzugt-reduzierte Bewegung: reduzieren) {
  .picture-wrap .animate-button {
     Anzeige: Block;
  }
}

Wenn auf die Schaltfläche klickt (oder angegeben), müssen wir die Medienabfrage entfernen, um die Animation durch das Herunterladen einer animierten Quelle zu starten.

 lass button = document.querySelector (". Animate-Button");

Button.AdDeVentListener ("Click", () => {
  const parent = button.closest (". Bildwrap");
  const picture = parent.querySelector ("Bild");
  picture.querySelector ("Quelle [Media]"). REMET ();
});

Hier ist das in Aktion:

Vielleicht ist das eine gute Komponente?

Wir könnten automatisch die Schaltfläche, das Button -Styling und die Schaltflächenfunktion mit einer Webkomponente eingeben. Hey, warum nicht?

Das obige ist der detaillierte Inhalt vonReduzierte Motiv -Bild -Technik, nehmen Sie zwei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!