2012-10-15 20 views
17

HTML5 obecnie posiada element <figure> zdefiniowane jak w przykładzie (W3C reference)Użycie elementu <picture> wewnątrz elementuw HTML5?

Element rysunku przedstawia jednostkę treści, ewentualnie z podpisem, który jest samowystarczalny, to jest zwykle określany jako jeden jednostka z głównego przepływu dokumentu, która może być odsunięta od głównego przepływu dokumentu bez wpływu na znaczenie dokumentu.

Ostatnio nowy element <picture> został zaproponowany przez Responsive Images Community group i została zdefiniowana in the reference jak tak

Element obrazu używany do wyświetlania obrazu, które mogą pochodzić z różnych źródeł (patrz atrybut srcset) . To, który obraz wyświetla program użytkownika, zależy od algorytmu generowania obrazu źródłowego.

Od dwóch opisów wydaje się nie być sprzeczne (i dokumentacja na zdjęciu jest na projekt stanie jeszcze) tu moje pytanie: czy jest to możliwe (technicznie i semantycznie) mieć zagnieżdżone picture wewnątrz elementu figure, w ten sposób?

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

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

Nie znalazłem żadnych odniesień na ten temat w specyfikacji. : \

Uwaga: Jestem świadomy, że żadna przeglądarka realizuje obecnie ten element, jestem tylko co kilka eksperymentów z jQuery picture

Dziękuję.

+1

To tylko propozycja. Nie można oczekiwać, że znajdzie się on w żadnej specyfikacji, dopóki nie zostanie zatwierdzony do włączenia przez grupę roboczą HTML5 (niezależnie od tego, która z nich jest). Być może lepszym miejscem na to pytanie jest lista mailingowa grupy społeczności lub jedna z list mailingowych HTML5. – BoltClock

+0

Czy to działa? Nigdy nie wiedziałem o '' tagu –

+1

@MrAlien, Istnieje polyfill jQuery dla tego elementu (zobacz http://jquerypicture.com/) – fcalderan

Odpowiedz

7

Nie znajdziesz go, ponieważ nie jest jeszcze oficjalnie, ale mam zamiar przyjąć, że odpowiedź brzmi: tak, to dobrze.

W tej chwili zrobić coś takiego:

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

i <picture> jest po prostu oznaczało być metoda ma wiele src'd <img> dla wrażliwych miejscach, więc technicznie to się wydawać - jeśli został zatwierdzony - twój przykład jest ważny.

23

Mat Marquis tutaj - jestem jednym z edytorów specyfikacji picture (http://picture.responsiveimages.org).

Krótka odpowiedź brzmi "tak", długa odpowiedź brzmi "zdecydowanie". Poprawna semantycznie (figure może zawierać obrazy, wykresy, tabele, fragmenty kodu itd.) I jest ważna w 100%.

+2

Dzięki @wilto. Widzę, że na stronie internetowej społeczności Responsive Images znajduje się świetny przykład używania '' i '' razem: http: //picture.responsiveimages.org/# example-6 Powinieneś to sprawdzić @ fabrizio-calderan. – mikkelz