web-dev-qa-db-ja.com

HTML5ボイラープレートとHTML5リセット

みなさん、こんにちは— HTML5ボイラープレートHTML5リセット は2つのHTML、CSS、JavaScriptテンプレートで、多くの最新のベストプラクティスが組み込まれています。彼らの目標はほぼ同じです。

  • 高速で堅牢な最新のWeb開発
  • HTML5(duh!)
  • クロスブラウザーの正規化(IE6およびモバイルブラウザーのサポートを含む)
  • 漸進的な強化と優雅な劣化
  • パフォーマンスの最適化
  • フレームワークではありませんが、次のプロジェクトの出発点です

明らかに、それらは機能が非常に似ています。それらの実装はどのように異なりますか(たとえば、IE固有のCSS修正は異なる手法を使用して達成されます)?それらは範囲がまったく異なりますか? HTML5ボイラープレートは少し大きいように見えますが(ビルドツール、サーバー構成など)、実際に表示されるサイトに関しては、HTML5リセットを超える場所を知るのは困難です。

54
Rudiger

一般に、両方のプロジェクトは、Webプロジェクトに取り組んでいる開発者に確実な出発点を提供することを目的としています。どちらも、多くの開発者がプロ​​ジェクトごとに再作成している、面倒でエラーが発生しやすい定型文の多くを取り除きます。方法の詳細は少し異なりますが、ほとんどの場合、同じ結果が得られます。

ご指摘のとおり、HTML5Boilerplateには、開発者がサーバーサイドアイテム(将来の期限切れヘッダーなど)に関してページを高速化するためのベストプラクティスに従うのに役立つビルドスクリプトがいくつか追加されていますが、HTML5Resetプロジェクトはセマンティクス、コンテンツ、およびスタイリングにより重点を置いています。たとえば、HTML5Resetには、HTML5のページのコンテンツのより多くのサンプル構造がありますが(新しい要素のいくつかの使用方法を人々に示すのに役立ちます)、HTML5Boilerplateにはありません。

HTML5Boilerplateに含まれる応答時間とページ速度の部分は、モバイルプラットフォームで自分自身を見つけるユーザーが増えるにつれて、またGoogleが効果を高めるにつれて、ますます重要になります ページ応答時間はページランクに影響します 。ページの応答時間のわずかな増加が、サイトの状態に測定可能な悪影響を与えることを示す論文がたくさんあります 使用および認識特にeコマース設定 。。 。多くの場合、100ミリ秒遅いページでは、販売されたものの割合が少なくなります)。

CSSの面では、両方のプロジェクトのリセットスタイルセクションの大部分はほとんど同じですが、ベースラインの設定に若干の違いがあります。ただし、IE固有の修正はほぼ同じであり、HTML5Boilerplateは、IEがフォーム要素(チェックボックス/ラジオボタンなど)などのスタイルを設定する方法について、HTML5Resetよりも少し多くの制御を主張します。および有効/無効な状態)

HTML5BoilerplateがHTML5Resetではカバーしていない2つの主要なCSS領域は、.hidden.visuallyhiddenなど、サイトをよりアクセスしやすくするための一般的なヘルパークラスであり、印刷スタイルの大幅な調整も行っています。どちらも、ブラウザ間での印刷をより類似させ、背景画像を透明にする(トナーを無駄にしないため)、リンクへの実際のURLと略語へのタイトルの追加など、コスト削減とアクセシビリティの機能を提供します。

両方のプロジェクトの情報と、それらがどのように動作するかを並べて比較することを強くお勧めします。類似点と相違点(およびその背後にある理由)は非常に有益であり、どの部分をより適切に決定するのに役立っているからです。私が使いたかったそれぞれの。

最終的には、他の「ライブラリ」の種類のプロジェクトと同様に、開発者は自分が何をしているかを理解する必要があり、プロジェクトの特定のニーズを満たすためにベースラインを微調整する必要があります。

47
cdeszaq

どちらでも使用できます...

@murtaughが言ったように(http://5by5.tv/bigwebshow/45)、最初にリセットを開始するときは何も学ぶ必要はありません。私の経験では、R&D部門で働いていて、デモや迅速な反復を行う必要がある場合は、リセット(またはすでに知っている場合はボイラー)を使用できます。展開用の製品を構築する必要があるときは、より多くのものがあるという理由だけでボイラーに目を向けます。私にとってはうまくいきますが、両方を知っているので、どちらかを簡単に使用できます。

0
sorin stefan

私は以前の開発者が会社を JQueryPrototype ...の両方を使用するように仕向けた環境で働いていますが、それは混乱しています。互換性モードから抜け出す必要があるだけでなく、それが引き起こす余分なオーバーヘッドについて考えてみてください。デバッグ時に、プロトタイプはFirebugでデバッグメッセージを「ハイジャック」します。これにより、さらに多くの作業が発生します。そして、厄介な部分は、私がこの混乱を何ヶ月も元に戻していて、それで終わりに近づき始めているということです....そして私がプロトタイプのプラグを抜こうとしているとき、私はいつも別のものを見つけているようですそれに依存するセクション...

私が毎回同じような目的を持つフレームワークの組み合わせに反対するのはこのためです。たとえば、どんなにクールだと思っても YUI Grids 、全体をロードする場合 YUI Framework Jqueryを実行しないのが最善です Moo 、またはプロトタイプ。あなたはただ不必要に自分自身を悩ませているでしょう。それはロード時間を殺し(これは ユーザーエクスペリエンスを破壊します )、開発者に頭痛と不必要な作業を与えるだけです。

基盤を構築するように、サイトのこのフェーズを見てください。使いたいものは何でも使う機会がありますが、いわば「隅に自分を塗る」ことのないように注意する必要があります。したがって、リソースに基づいて利用できる、専用のクラス最高のツールを使用してください。かわいくするために何かを使うだけではいけません!多くの非常に高品質のツールが無料であるという点で幸運であるため、選択肢があります。しかし、あなたが将来のためにあなたのサイトの方向を導いていることを知ってください、そしてあなたはあなたの決定が急いでなされた場合に結果に対処しなければならない私のような人かもしれません。

したがって、別のフレームワークを使用する予定がない限り、リセットを推奨します...または、最高品質の標準に準拠したCSSを実行するだけでもかまいません。

0
bpeterson76

私は実際、従来のreset.cssを使用するのが最善だと言いたいです...モバイルアプリの互換性に問題はありません。ただし、これらのアプリはjQueryモバイルフレームワークを使用して開発しています。

ですから、使用しているツールの種類に関しては、本当に条件付きだと思います。 Phonegapは、私のコードをすべてのOSにコンパイルするのに問題がないようです。そして、エミュレーターで私のソースコードを表示することは完全にうまく見えます...

ですから、ポリフィルを達成しようとしない限り、ボイラープレートのポイントは本当にわかりません。

0
Chris Cates