Техника уменьшенного кино, дубль два

          
                    
                    
          

Видели ли вы, что аккуратная техника для использования элемента с для обслуживания анимированного изображения (или нет) на основе предпочитает-сокращается -motion медиа-запрос?

После того, как мы поделились этим в нашей рассылке, мы получили интересный ответ от Майкла Гейла:

Как насчет людей, которые любят свои анимированные GIF-файлы, но просто не хотят, чтобы пользовательский интерфейс масштабировался повсюду? Теперь они вынуждены делать выбор между контентом и пользовательским интерфейсом ?

Я подумал, что это довольно интересный вопрос.

Кроме того, всякий раз, когда я вижу в эти дни, мой мозг срабатывает на ХОРОШО, ЧТО О MP4?! так как я был должным образом убежден, что видео лучше в Интернете, чем GIF. Оказывается, некоторые браузеры поддерживают видео прямо в элементе и, хотите верьте, хотите нет, вы можете написать запасные варианты для этого, с — drumroll, пожалуйста — для элемент также!

Давайте попробуем объединить все это.

Добавление источника MP4

Легче всего добавить дополнительный с видео. Это означает, что нам понадобятся три исходных медиа-файла:

1. Резервная неанимированная графика, когда предпочитает уменьшенное движение это уменьшение .
2. Анимированный GIF по умолчанию.
3. Видео MP4 для замены GIF, если резервный вариант поддерживается.

Например:

В условиях Chrome по умолчанию загружается и отображается только GIF:

При стандартных условиях в Safari загружается и отображается только MP4 :

Если вы активировали предпочтения-уменьшенное движение: уменьшить в Chrome или Safari (на моем Mac, я перейдите к Системные настройки → Специальные возможности → Дисплей → Reduce Motion ), оба браузера загружают только статический PNG файл.

Я тестировал Firefox, и он, похоже, не работает, вместо этого продолжая скачивать версию GIF. Похоже, что Firefox поддерживает предпочтения - уменьшенное движение но, возможно, он еще не поддерживается элементами ? Я не уверен, что там наверху.

Разве не было бы круто предоставить один анимированный источник и иметь инструмент, генерирующий другие из него? Могу поспорить, что вы можете связать это с чем-то вроде Cloudinary.

Добавление переключателя для отображения анимированной версии

Как упоминал Майкл Гейл, жаль, что вы совершенно не видите анимированную версию только потому, что нажали на переключатель с уменьшенным движением.

Должно быть достаточно легко иметь который использовал бы JavaScript, чтобы вытащить медиазапрос и заставить браузер показывать анимированную версию.

Я вполне уверен, что нет практического способа сделать это декларативно в HTML. Мы также не можем поместить эту кнопку в тег . Хотя не является заменяемым элементом, браузер все еще запутывается и ему это не нравится. Вместо этого это не делает это вообще. Ничего страшного, мы можем использовать обертку.

Одушевленное

  .picture-wrap .animate-button {
  дисплей: нет;
}

@media (предпочитает-уменьшенное-движение: уменьшить) {
  .picture-wrap .animate-button {
     дисплей: блок;
  }
}  

  let button = document.querySelector (". Animate-button");

button.addEventListener ("click", () => {
  const parent = button.closest (". picture-wrap");
  const picture = parent.querySelector ("picture");
  . Picture.querySelector ( "источник [media]") удалить ();
});