<picture>: если несколько медиа-запросов совпадают, какой из них имеет приоритет?

Question

<picture>
  <source srcset="smaller.image" media="(max-width: 799px)">
  <source srcset="bigger.image"  media="(min-width: 800px)">
  <source srcset="exactly.image" media="(width: 801px)">
</picture>

В этом примере, если ваш видовой экран имеет ширину точно 801px.Какое изображение является предпочтительным и почему?

bigger.image или exactly.image?

является частью запроса для рассмотрения?или порядок элемента <source />?

Answer 1

Согласно спецификации будет использоваться файл bigger.image, так как это был первый запрос, соответствующий текущему окну просмотра:

Атрибуты мультимедиа также могут присутствовать. Если присутствует, значение должно содержать действительный список медиа-запросов. Пользовательский агент перейдет к следующему исходному элементу, если значение не соответствует среде.