次の個人的なプロジェクトでは、HTML5Doctypeを使用したいと思います。HTML5は下位互換性があるため、IE6を含め、ほぼすべてのブラウザーがHTML5をサポートしていることを私は知っています。
しかし:HTML5shim、Modernizr、HTML5 BoilerplateなどのJSライブラリを実際に機能させるには、使用する必要がありますか(HTML5 Boilerplateはライブラリではないことはわかっていますが)?
つまり、これらのプロジェクトを使用する必要がない場合、これらのプロジェクトはどのようなものになるのでしょうか。HTML5shimを使用して読んだことがあるのは、いわゆる「ベストプラクティス」です。これは本当ですか?それらを使用しないとどうなりますか?一部のブラウザはマークアップを無視しますか?section
やなどの要素はありaside
ますか?
また、これらのライブラリを使用することは本質的に悪いことです。ユーザーがJSを非アクティブ化すると、サイトが壊れてしまうからです。しかし、一方で、JSを非アクティブ化したのは誰ですか?noscript
タグを含めるだけでいいのではないでしょうか。
また、私はこれらのライブラリが私たちに利益をもたらすよりも多くの問題を引き起こすという記事を読みました。私には作者の個人的な意見のように思えますか、それとも本当に多くの問題を引き起こしているのでしょうか?
編集
了解しました。ModernizrをHTML5ボイラープレートと一緒にテストした後、これはこれまでのところ優れたソリューションであると言わざるを得ません。しかし、私を悩ませていることが1つあります。それが正しく行われているかどうか、私にはわかりません。border-radius
例:と呼ばれるdivで使用したい#form-box
。この例では、丸い角がWebサイトに不可欠であると想定しています。それらが必須でなければ、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)の場合、JS .htcファイルを使用するIEでも、丸い角を追加するポリフィル「PIE」を使用します。
.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;
}
これが私が今それをしている方法です。かっこいいですが、繰り返しコードが多すぎますか?これが本当に必要なのは本当ですか?それとも私は何か間違ったことをしていますか?