Какие альтернативы тегам HTML5 <figure>и <section>для старых браузеров в jQuery?

Question

Можете ли вы предложить тег HTML5

<figure>
    <img src="path/to/image" alt="About image">
    <figcaption>
        <p>This is an image of something interesting.</p>
    </figcaption>
</figure>

и

<section>
    <!-- Content here -->
</section>

для старых браузеров в jQuery?

Я много искал, но нашел материалы отег <canvas> везде.

Буду рад видеть ваши ответы, заранее спасибо.

Answer 1

При чем тут jQuery? У вас проблемы с доступом к элементам HTML5 в JQuery или манипулированием ими?

Что касается HTML, то упомянутые вами новые теги HTML5 - это все элементы уровня блока, которые могут содержать другие элементы уровня блока, поэтому эквивалент в HTML4 равен <div>:

<div class="figure">
    <img src="path/to/image" alt="About image" />
    <div class="figcaption">
        <p>This is an image of something interesting.</p>
    </div>
</div>

и

<div class="section">
    <!-- Content here -->
</div>

Теги HTML5 должны нормально работать в старых браузерах и с jQuery, с двумя исключениями:

1. Internet Explorer до версии 9 не поддерживал новые теги, так как он не поддерживал неизвестные теги. (Их содержимое будет отображаться, но сам тег не будет отображаться в представлении IE в DOM страницы.) Однако вы можете заставить старые IE распознавать неизвестные теги, создав их в JavaScript: см. http://remysharp.com/2009/01/07/html5-enabling-script/

2. Браузеры, кроме Internet Explorer, обрабатывают неизвестные теги как встроенные, а не как блокирующие. Таким образом, вам нужно будет присвоить display: block; элементам HTML5 уровня блока в вашей таблице стилей. Сброс таблиц стилей, таких как Эрик Мейер , часто делает это.

Но если у вас возникли другие проблемы, спросите о проблемах переполнения стека.

Answer 2

Нет ничего плохого в использовании этих элементов даже в старых браузерах.Единственный браузер, который может доставить вам какие-либо проблемы, - это (очевидно) IE, который не позволяет использовать стили для каких-либо новых элементов, но есть простой обходной путь JavaScript:

document.createElement("section");
document.createElement("figure");

И так далее ...

Кроме того, вы можете легко использовать новые элементы.

Answer 3

Я бы посоветовал вам использовать Modernizr плагин