Библиотека HTML5 Doctype + JS - нужна? - PullRequest
Новая
       29

Библиотека HTML5 Doctype + JS - нужна?

1 голос
/ 24 февраля 2012

В моем следующем личном проекте я хочу использовать тип документа HTML5.Я знаю, что почти все браузеры поддерживают HTML5, даже IE6, потому что HTML5 совместим с предыдущими версиями.

Но: нужно ли мне использовать какую-либо библиотеку JS, чтобы действительно заставить ее работать, например HTML5shim, Modernizr или HTML5 Boilerplate (хотя я знаю,что HTML5 Boilerplate не является библиотекой)?

Я имею в виду, о чем эти проекты, если мне не придется их использовать - я читал, что использование HTML5shim было бы так называемой «лучшей практикой»,Это правда?Что произойдет, если я не буду использовать ни один из них?Будут ли некоторые браузеры игнорировать элементы разметки, такие как section и aside?

Я также читал, что использование этих библиотек, по сути, плохо, потому что если пользователь отключил JS, сайт ломается - но наС другой стороны: у кого JS деактивирован в настоящее время?Я мог бы просто включить тег noscript, не так ли?

Кроме того, я читал в статье, что эти библиотеки вызывают больше проблем, чем приносят нам пользу.Мне кажется, что это личное мнение автора, или они действительно вызывают столько проблем?

EDIT

Хорошо, после тестирования Modernizr вместе с HTML5 Boilerplate я должен сказать, что этопока отличное решение.Но меня беспокоит одна вещь, я не уверен, правильно ли я это делаю.Пример: я хочу использовать border-radius в div с именем #form-box.Для этого примера я предполагаю, что закругленные углы необходимы для сайта.Если бы они не были необходимы, я бы не увидел проблемы, если бы пользователи IE их не видели.

Итак, у меня есть класс, предоставляющий рамку базового стиля, который каждый браузер должен интерпретировать:

#form-box {
    background-color: #f0eeee;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    margin-top: 50px;
}

Затем для браузеров, которые знают border-radius: 

.borderradius #form-box {
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

И для браузеров, которые не знают border-radius (то есть IE6), я использую полифил "PIE ", который добавляет закругленные углы, даже в IE, использующем JS .htc-файл: 

.no-borderradius #form-box {
    behavior: url(PIE.htc);
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

Вот как я это делаю в данный момент.Это круто, но: так много повторяющегося кода?Правда ли, что это действительно необходимо?Или я что-то не так делаю?

1 Ответ

1 голос
/ 24 февраля 2012

У меня не было проблем с использованием html5boilerplate, и хотя я обычно уменьшаю его и удаляю вещи, которые не нужны для моих проектов, это отличный пример для начала.

...