Можно ли использовать какой-либо из этих методов для обеспечения совместимости веб-сайта во всех браузерах при использовании элементов HTML 5?

Question

Можно ли использовать какой-либо из этих методов для обеспечения совместимости веб-сайта во всех браузерах при использовании элементов HTML 5?

Например,

метод1

<div class="section">
    <section>
        <h1>title</h1>
        <p>text</p>
    </section>
</div>

метод 2

<section>
    <div class="section">        
            <h1>title</h1>
            <p>text</p>
     </div>
</section>

В вышеописанном методе я не буду писать CSS для тегов HTML 5, поэтому макет не будет нарушен.

Редактировать: мой вопрос специально для мобильных сайтов, потому что на настольных веб-сайтах я знаю, что могу использовать HTML 5 Shiv и Modernizer, но на мобильных устройствах мой браузер все еще используется, но его нетподдержка или частичная поддержка JavaScript.пропускная способность также является важной проблемой в мобильном Интернете, поэтому добавление JavaScript снизит производительность.

Я делаю веб-сайт для мобильных устройств с системой управления контентом, чтобы обновлять контент в будущем, и контент будет обновляться клиентом с помощью WYSIWYGРедактор.

Answer 1

Лучшим способом было бы использовать теги HTML5 как обычно и включать HTML5 Shim от Реми Шарпа.

Answer 2

Хотя семантически оба метода одинаковы, я бы пошел с method-1 , так как он правильно отделяет content от container . ( Принцип OOCSS )

<section>
  <h1>title</h1>
  <p>text</p>
</section>

Это содержимое . Он представляет собой section документа и является значимым . Теперь вы можете заключить это в контейнер (<div>) и оформить его в соответствии с вашими требованиями.

Кроме того, вы поймете, что метод-1 более гибок при использовании на больших веб-сайтах

Answer 3

Я не думаю, что любой из этих методов хорош. <section /> следует использовать для любого «раздела» разметки, у которого нет определенного тега, например <header /> или <article />. <div /> все еще следует использовать для макета.

Answer 4

Лично я использую сброс HTML, использую Modernizer для проверки функций, а затем добавляю:

if( Modernizr.fontface) {}, Modernizr.canvas, Modernizr.audio, etc.

Это хорошо: http://bit.ly/b5HV1x

Сбросом HTML 5 вы можете определить теги, не понятные браузерам:

footer { display:block; }