Подтвердить что ты не робот

Использование <picture> внутри элемента <figure> в HTML5?

В HTML5 в настоящее время мы имеем элемент <figure>, определенный так (ссылка W3C)

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

Недавно новый элемент <picture> был предложен группой Группа реагирующих изображений, и было определено в ссылке так

Элемент изображения, используемый для отображения изображения, которое может исходить из ряда источников (см. атрибут srcset). Какое изображение, отображаемое пользовательским агентом, зависит от алгоритма получения исходного изображения.

Поскольку два описания кажутся не противоречивыми (и документация по изображению еще находится в проекте состояния), здесь мой вопрос: возможно ли (технически и семантически) иметь вложенный picture внутри элемента figure, в таким образом?

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>

Я не нашел ссылок на это в спецификациях.:\

Примечание. Я знаю, что ни один браузер не реализует в настоящее время этот элемент, я просто делаю некоторые эксперименты с jQuery picture

Спасибо.

4b9b3361

Ответ 1

Вы не найдете его, так как он пока еще не является официальным, но я собираюсь предположить, что ответ да, это нормально.

На данный момент вы делаете что-то вроде:

<figure>
  <img src="image.jpg" alt="The Image">
  <figcaption>A Caption</figcaption>
</figure>

и <picture> просто означает метод множественного src'd <img> для чувствительных сайтов, поэтому технически это похоже - если бы оно было одобрено - ваш пример действителен.

Ответ 2

Mat Marquis here-Im один из редакторов в спецификации picture (http://picture.responsiveimages.org).

Короткий ответ - "да", длинный ответ "определенно". Семантически корректный (figure может содержать изображения, диаграммы, таблицы, фрагменты кода и т.д.) И 100% действителен.