В моем следующем личном проекте я хочу использовать тип документа HTML5. Я знаю, что почти все браузеры поддерживают HTML5, даже IE6, потому что HTML5 обратно совместим.
Но: нужно ли мне использовать какую-либо JS-библиотеку, чтобы она действительно работала, например HTML5shim, Modernizr или HTML5 Boilerplate (хотя я знаю, что HTML5 Boilerplate — это не библиотека)?
Я имею в виду, о чем эти проекты, если мне не нужно их использовать - я читал, что использование HTML5shim было бы так называемой «лучшей практикой», это правда? Что произойдет, если я не использую ни один из них? Будут ли некоторые браузеры игнорировать такие элементы разметки, как section и aside?
Я также читал, что использование этих библиотек, по сути, плохо, потому что, если пользователь отключил JS, сайт сломается, но с другой стороны: у кого сейчас деактивирован JS? Я мог бы просто включить тег noscript, не так ли?
Кроме того, я читал в статье, что эти библиотеки создают больше проблем, чем приносят пользу. Мне кажется, это личное мнение автора, или они действительно вызывают столько проблем?
РЕДАКТИРОВАТЬ
Хорошо, после тестирования 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;
}
Вот как я это делаю в данный момент. Это круто, но: так много повторяющегося кода? Правда ли, что это действительно необходимо? Или я что-то не так делаю?
