モバイル（Webkit）ベースのサイトを開発する場合、ページ固有のCSSまたは単一のCSSファイルですか？

Question

私はWebkitブラウザのモバイルサイトで作業しています。私は複数のスタイルシートと単一のCSSファイルの使用に関する情報を見つけようとしています。このトピックに関する多くの情報がありますが、モバイルブラウザに関する多くの情報はありません。私のサイトは、ページ固有のCSSを持っている間にたくさんのページを持ちます。

モバイル以外のサイトでは、通常、1つのファイルが高速になると言われていますが、複数のファイルを開発する方が簡単です。しかし、モバイルサイトではまだそれがありますか？

すべてを1つのファイルに入れると、ロード後にキャッシュされますが、最初のロードが遅くなります。ページ固有のファイルがある場合は、最初のページがより速くロードされますが、1ページおきにヒットし、特定のcss httpリクエストを作成します。

誰もがこれについて考えていますか？

1 MB未満のファイルがあれば良いと言っているようですね。

http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/

Answer 1

私はあなたが展開するとき、その後、単一のファイルにそれらを縮小化、それが開発のための複数のファイルを使用すると言うでしょう。私はほとんどのモバイルWebブラウザがあなたのcssファイルにある種のキャッシュを行うと仮定しています。また、私は、あなたがインライン/埋め込みCSS画像のようなことをしていない限り、実際に心配するほど大きくなるような小型化されたモバイルサイトのCSSファイルを想像するのは難しいと思う。

Answer 2

私は最良のアプローチは見ていると思うユーザーエージェントがiPhoneなどのモバイルデバイスである場合の物理的な違いで

通常、iPhoneはモバイルネットワーク上で動作していますが、通常のコンピュータに接続する平均インターネット接続よりもかなり遅くなります。これが唯一の違いです。異なるネットワークが動作する方法に若干の微妙な違いがあるかもしれません。別々の要求がモバイルネットワーク上で長くかかる可能性がありますが、それはちょうど投機的なものです。

デバイス自体の処理は必ずtrivalなので、私の意見では、通常のユーザエージェント用に設計されたウェブサイトには何をお勧めしますか？複数のスタイルシートを使用して開発し、ツールを使用してすべてを単一の圧縮ファイル（必要に応じて分離、条件付きIEなど）に縮小します。

Answer 3

複数のプラットフォーム用にビルドする場合は、すべてのスタイルシート（global.css）をデフォルトにして、メディア固有のスタイルシート（つまり、screen.css、print.css、handheld.css）を作成します。そこから、特定のインスタンス（つまり、screen-ie.css、screen-ie7.css、handheld-iphone.css）の例外スタイルシートを作成します。これにより、できるだけ多くのプレゼンテーション方法に最大の柔軟性がもたらされます。

私はそれが欲しいと思ったら、各インスタンスの "スタック"を小さくします。だから、iPhoneの場合：私は経由で呼び出すためのglobal.cssを+ handheld.css +ハンドヘルド-iphone.css = iphone [YYYYMMDD]の.css：あなたはフットプリントを最小限に抑えるために必要なものだけを

<!--[if !IE]>--> 
<link media="only screen and (max-device-width: 480px)" 
    rel="stylesheet" type="text/css" href="/css/min/iphone.[YYYYMMDD].css"/> 
<!--<![endif]--> 

ロード。