Sử dụng <picture> bên trong <figure> yếu tố trong HTML5?

Question

Trong HTML5 chúng tôi hiện có một yếu tố <figure>, được xác định như vậy (W3C reference)

Yếu tố con số đại diện cho một đơn vị nội dung, tùy chọn với một chú thích, có nghĩa là khép kín, mà thường được tham chiếu như là một đơn đơn vị từ luồng chính của tài liệu và có thể được di chuyển ra khỏi luồng chính của tài liệu mà không ảnh hưởng đến ý nghĩa của tài liệu.

Gần đây, một yếu tố mới <picture> đã được đề xuất bởi các Responsive Images Community group và nó được định nghĩa in the reference như vậy

Yếu tố hình ảnh được sử dụng để hiển thị một hình ảnh mà có thể đến từ nhiều nguồn khác nhau (xem thuộc tính srcset) . Hình ảnh mà tác nhân người dùng hiển thị phụ thuộc vào thuật toán để lấy hình ảnh nguồn.

Kể từ khi hai giới thiệu có vẻ là không mâu thuẫn (và tài liệu về hình ảnh là trên dự thảo nhà nước chưa) ở đây câu hỏi của tôi: là nó có thể (về mặt kỹ thuật và ngữ nghĩa) để có một lồng nhau picture bên trong một yếu tố figure, theo cách này?

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

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

Tôi không tìm thấy tham chiếu nào về thông số kỹ thuật. : \

Lưu ý: Tôi biết rằng không có trình duyệt thực hiện hiện nay yếu tố này, tôi chỉ làm một số thí nghiệm với jQuery picture

Cảm ơn bạn.

Answer 1

Bạn sẽ không tìm thấy nó vì nó chưa thực sự chính thức, nhưng tôi sẽ giả định câu trả lời là có, điều đó là tốt.

Tại thời điểm này, bạn làm như sau:

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

và <picture> chỉ đơn giản là có nghĩa là để trở thành một phương pháp có nhiều src'd <img> cho các trang web đáp ứng, vì vậy về mặt kỹ thuật nó sẽ có vẻ như - nếu nó đã được phê duyệt - ví dụ của bạn là hợp lệ.

Answer 2

Mat Marquis ở đây — Tôi là một trong những biên tập viên trên số picture spec (http://picture.responsiveimages.org).

Câu trả lời ngắn gọn là “có”, câu trả lời dài là “chắc chắn”. Chính xác về ngữ nghĩa (figure có thể chứa hình ảnh, biểu đồ, bảng, đoạn mã, v.v.) và 100% hợp lệ.