ユーザーカスタムスタイリングはdocument.ready + localStorageで動作しますか？

Question

私は実行して積極的にフォーラムを開発しています（これは重度に変更されたSMF 1.1.16で動作します）。私が追加したい機能の1つは、ユーザーがカスタムカラーを選択する機能ですフォーラムの色をカスタマイズするページの隅。

フォーラムのHTML出力は、純粋なCSSで色を変更できるように構成されています。このCSSを挿入する正しい方法は何ですか？

ユーザーが色情報を保存すると、必要なCSSが生成され、HTML5 localStorage（おそらくpolyfillライブラリを使用）を使用して保存されます。次に、$（document）.ready（）上にこのCSSが存在するかどうかをチェックし、存在する場合はそれをページの先頭に挿入します。

このアプローチは賢明ですか？開発は簡単ですが、カスタムスタイリングが適用される前に、通常のスタイリングのちらつきが発生します（ページがかなり重いため）。

もしそうなら、これを完全にクライアント側で行うより良い方法はありますか？可能であればサーバーを関与させたくないかもしれませんが、カスタム・スタイリングを保存するすべてのユーザーのためにサーバーにCSSファイルを生成させることができます。

どのような方法が最適ですか？

Answer 1

FOUCがないように、ページの基本スタイルを最初に作成することをお勧めします。その後、JSにカスタムスタイルを読み込ませ、解析して、後でそのページに適用させます。スタイルがスナップのように読み込まれないように、「フェードインの変更」（バックグラウンドでのフェードインなど）を行うことができます。 display:noneに身体を設定するようにあなたのスタイルをロードする前にスタイルが適用された後

また、空白のページが最初に、、そして、それは大きさだあなたはまた、ローカルストレージがあることに注意する必要がdisplay:none

を削除することができ制限する。あまり負荷をかけないでください。 LZW compression in JSを探すことを検討してください。それは助けるかもしれない。