web-dev-qa-db-ja.com

動的(サーバー側で生成された)CSSを使用しないのはなぜですか?

サーバー側で生成されたHTMLは取るに足らない(そしてAJAXの前に動的なWebページを作成する唯一の方法であった)ため、サーバー側で生成されたCSSはそうではありません。実は見たことがありません。 CSSコンパイラはありますが、静的として使用できるCSSファイルを生成します。

技術的には、特別なライブラリは必要ありません。HTMLstyleタグは、静的CSSファイルではなく、PHP(/ ASP/whatever)テンプレート作成スクリプトを参照する必要があります。スクリプトはCSScontent-typeヘッダーを送信する必要があります-これですべてです。

キャッシュに問題がありますか?私はそうは思いません。スクリプトはno-cacheなどのヘッダーを送信する必要があります。デザイナーにとって問題でしょうか?いいえ、CSSテンプレートを編集する必要があります(HTMLテンプレートを編集するため)。

動的CSSジェネレーターを使用しないのはなぜですか?または何かあれば、私に知らせてください。

15
ern0

Cssがめったに動的に生成されない大きな理由(これはJavaScriptにも当てはまります)は、キャッシュの候補として適しているためです。 CSSは、クラスを適切に組み合わせてページをスタイルする非常に柔軟な方法です。CSSでページを調整する必要なく、あらゆる種類のキューに従ってすべての異なるページのさまざまな部分のすべてをスタイル設定できます。このページビューに実際に存在していること自体。

CSSがneedをページごとに異なるようにしないからといって、ダウンロードのコストを最適化するという非常に一般的な慣行につながります。ほとんどのサイトは、サイト全体のすべてのcssを1回のダウンロードに詰め込んでいるため、さまざまなページビューに適用される部分は1つのダウンロードファイルにのみ存在します。キャッシングを使用すると、クライアントは2回目のダウンロードを待つ必要がありません。さらに重要なのは、コンテンツプロバイダーとして、コンテンツを2回以上アップロードするコストを支払う必要がないことです。また、静的コンテンツの提供により適したサーバーに静的CSSを配置することもできます。これにより、アプリケーションサーバー上の実際の動的コンテンツのリソースが解放されます。

この慣習は非常に一般的であり、多くのブラウザはassumeでCSSが静的であることを示しています。そしてvery彼らがすでに持っているCSSをダウンロードすることに消極的です。ユーザーがページをリロードしても。この特別な扱いはCSSにのみ適用されます。他のコンテンツタイプは期待どおりにリロードされます。

私はあなたの仮定が間違っていると思います:私の最後のプロジェクトでは、アプリケーションはajaxによってロードされたサーバー生成CSSを使用していました(あなたが見ている地図の場所に応じて、ページはまったく異なるスタイルでブランド化されたためです)。

ただし、ajaxで追加のCSSを取得することで問題が解決する使用例は非常にまれです。これが、これに遭遇したことがない理由である可能性があります。通常、展開時に前処理(LESS +ミニファイ)され、キャッシュ可能である一連のスタイルシートを維持する方が簡単です(たとえば、次のページでは、以前にキャッシュしたスタイルシートを再利用できるため、初期時間が短くなります)。

7
wildpeaks

実際、動的CSSのユースケースがあります。私は3つの異なる種類を扱ってきました:

  1. Less— Less CSSは基本的に、「変数、ミックスイン、操作、関数などの動的な動作を追加するCSS言語拡張機能です。 」また、非常に便利な「ネストされたルール」も使用できます。私はLessを主に使用して、CSSで一部の繰り返しを排除することにより、冗長性を少なくしています。

  2. URLの書き換え—キャッシュの問題がないというステートメントの証拠として、PHP to正しいキャッシュヘッダーを備えたCSSファイルとしてスクリプトを長期間提供する私は、主にWebルート内にないライブラリからCSSファイルを提供するためにそれを行います。

  3. 動的レポート—私が取り組んだ1つのプロジェクトで、システム内のあらゆる種類のデータのレポートビルダーがありました。 (styleタグ内に)動的なスタイルルールを出力します。主に、レポートビルダーでユーザーが選択した色を使用します。

注:CSSを直接​​URLに出力する場合(1または2)であり、スクリプトによって既に生成されているページ内に埋め込まない場合、静的コンテンツの提供に比べてサーバーにかなりの負荷がかかります。したがって、かなりのトラフィックがある場合は、毎回動的に実行できますが静的ファイルとしてキャッシュする必要があります。ユースケースは許可します。


しかし、なぜそれがより一般的ではないのですか?主な理由は1つあると思います。CSSがコンテンツを出力するために実際に構築されていないからです。だから、単に大きな必要はありません。ユーザーが選択した動的な色を出力する以外に、または背景画像(画像がcontentである場合)を使用することは、おそらくimgタグ)、動的に他に何が必要ですか?

ほとんどの動的なスタイル変更は、さまざまなstaticCSSドキュメントを参照することで生成できます。

したがって、ご想像のとおり、それは確かに可能ですが、それを行う理由はそれほど多くありません。

7
Nicole

CSSを動的にロードするには、2つの異なる側面があります...

  1. サーバーでCSSファイルを動的に生成する

    これはかなり簡単で、多くのウェブサイトがそれを行います。これは、何らかの条件に基づいてCSSを変更する場合に役立ちます。たとえば、ユーザーの地理的位置に基づいてサイトのテーマを選択するとします。

  2. JSスクリプトローダーを介してオンデマンドでCSSファイルを読み込む

    これは、DOMの大部分を動的に作成し、必要なスタイルをロードする場合に便利です。しかし LABjsの作者が言うように...

    動的に読み込まれたCSSファイルの読み込みが終了したかどうかを実際に判断することは、実際には非常に複雑であり、クロスブラウザを実行することは困難です。 「ロード」イベントは、期待どおりに発生しません。したがって、そのようなサポートを追加すると、LABjsに重要なサイズが追加されます

4
treecoder
  1. これを行います。いつも。特に、SaaSアプリケーションでの顧客固有のブランディングのようなものでは、色などがデータベースから取得されます。
  2. 展開前または展開中に、またはアプリケーションにブートフェーズがある場合はアプリケーションのブート中に、CSSを事前に生成する方が(ユーザーの観点から)はるかに高速です。通常は、可能な限り静的CSSファイルを事前に生成することをお勧めします。
  3. (ユーザーの観点から)速度を最大にするには、静的CSSファイルをCDNに配信し、ブラウザーにアプリケーションサーバーからではなくCDNから取得させるのが最善です。これは一般的に、CSSファイルが展開前または展開中に事前生成できる場合、および展開の一部が事前生成された静的CSSファイルをCDNに配信する場合にのみ可能です。 CDNは非常に安価で使いやすくなりました。AmazonのCloudFrontとRackspaceのCloud Filesをご覧ください。
3
yfeldblum

キャッシュに問題がありますか?私はそうは思いません。スクリプトはキャッシュなしなどを送信する必要があります

結構ですが、これは一般に静的な情報の重要な部分であり、ユーザーがページをロードするたびにダウンロードするように求めています。ですから、それには十分な理由があるはずです。

では、その理由は何でしょうか?

さまざまなパラメーターに基づいてスタイルを変更する場合は、複数のスタイルシートを用意し、HTMLを生成して適切なスタイルシートをダウンロードすることで変更します。

1
pdr

動的CSSはかなり自明であり、そのアプリケーションはより制限されています(静的スタイルシートを使用して動的に生成されたHTMLが日々のニーズをどのように解決するかを確認し、CSS自体がいくつかのメカニズムを組み込んで準動的を実現します)。多くの場面で使用されるのを見てきましたが、必要なときはいつでも自分で使用しています。

多くの場合、「動的」部分は、いくつかのスタイルシートを1つに結合して(HTTP要求の数を減らすため)、それらを縮小すること(帯域幅の使用量を減らすため)に過ぎませんが、変数の置換(例:全体で使用される色に変数を使用する)などの単純なことスタイルシート)はあなたの人生をはるかに簡単にすることができます。ただし、CSSの構文はかなり簡単で、注意点は少ないため、PHPのような汎用のテキスト処理システムまたはスクリプト言語で通常はこれで十分です。 -市販のCSS処理システム。

気づかないうちに野生で見たことがあるかもしれません。動的スクリプトを送信するサーバーは通常、URL書き換えを使用するため、URLは静的に提供されるコンテンツと区別できなくなります。一部のブラウザー(特にIE)は、特定の状況下で正しいMIMEタイプの検出を拡張機能に依存しているため、送信したContent-Typeヘッダーを無視(または破棄)するため、これが必要です。

キャッシングに関して:スタイルシートはGETリクエストで取り込まれ、それらをキャッシュ可能にすることは、適切なユーザーエクスペリエンスにとって絶対に重要です。すべてのリクエストでスタイルシートを再ダウンロードするので、ページのリフローを見たくないでしょう。代わりに、スタイルシート処理の出力を変更するすべてのパラメーターをクエリ文字列に入れる必要があります。別のクエリ文字列は別のURLを生成するため、キャッシュミスが発生するため、パラメーターが変更されると、クライアントがすべてをキャッシュしている場合でも、スタイルシートが再ダウンロードされます。リクエストごとに異なる可能性があり、副作用に依存するCSSが本当に必要な場合は、非動的な部分を静的に提供されるスタイルシートに入れ、動的であることが絶対的に必要なものだけを動的に提供することを検討してください。

1
tdammers

動的CSSを使用したいシナリオがいくつかありますが、多くの場合、CSSの基本を理解するのに少し助けが必要なデザイナーを使用することにこだわっています。動的言語をミックスに投入すると、実際に頭が爆発する可能性があります。

これを検討するもう1つの方法は、「他の人が、本当に私の問題ではなく、苦痛な手作業をすべて実行している...」というものです。

1
Wyatt Barnett