1

私は通常、より多くのバックエンドのものに取り組んでいるので、以前はそれについて本当に考えたことはありませんでしたが、昨日、友人のためのサイトで作業していました。動的に生成されたサーバー側。

CSSの制限を回避するためのJavaScriptソリューションについて話している人がいますが、CSSを動的に「ハードコーディング」できないのはなぜですか。

それを考えた後、調べてみたところ、いくつかの例がありましたが、トンではなく、StackOverflowでもここで言及されているのを見たことがなかったので、私が最初に思いついたのではないことを知っています。

ページが読み込まれる前にjavascriptを使用して要素のサイズを変更する場合と比較して、これには欠点がありますか？私が知っておくべき他の潜在的な落とし穴はありますか？

私はDjangoでそれを行っていますが、質問はほとんどフレームワーク/言語に依存しません。

ここでdynamic-cssタグの質問を調べたところ、かなりクールに見えるRubyの{less}が見つかりましたが、全体として、サーバー側で生成されたcssファイルについてはあまり話されていません。

編集：私が動的CSSで意味することの意図について混乱している人もいるかもしれません。ユーザーのコンテンツなどに基づいて変化するという意味ではありません。これは、画像を中央に配置する方法について私が見つけた例です。

img {   
   position: absolute;   
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

それはすべて素晴らしいですが、それはcssであなたの画像のサイズを知ることを意味します。さらに、サイズの異なる画像に対して異なるエントリを意味します。高さと幅が可変で、画像のサイズがサーバー側で決定された場合、より一般的で再利用可能になります。

それが役立つ場所は他にもあると思いますが、cssをあまり使用していなかったので、動的cssでうまく機能した最初の例です。

さらに、パフォーマンスが問題になった場合は、少しの作業で適切にキャッシュできると確信しています。

4

5 に答える 5

2

私は他の人が投稿したものに同意します。HTMLはサーバー側で生成されます。これは、コンテンツが動的であり、常に同じHTMLを提供している場合、Facebook、Google、YouTube、またはその他のほとんどの場所にアクセスすることがないためです。サーバー側の生成では、ユーザーによって提供および改善されたコンテンツを投稿および表示できます。

一方、CSSはユーザーによって提供されることはめったになく、提供される場合、CSSはWebデザイナーと呼ばれ、静的なテーマまたはファイルを生成するだけで、サイトの所有者によって支払われます。csszengardenのように、これが発生するサイトがいくつかありますが、ファイルはまだ静的です。ただし、主な違いは、ユーザーがサイトへの唯一の貢献をページ上の要素の位置とさまざまな色であるとは思わないことです。CSSの全体的なポイントの1つは、一貫性です。ちなみに、stackoverflowは、誰かが回答を投稿するたびにcssを変更し、すべてのボタンを再配置し、ページ全体ltrを別のhtmlを提供するだけでなくに変更する可能性があります。これが煩わしいと言うことは、今世紀最大の控えめな表現になるでしょう。

しかし、それはあなたが求めていたものではないと思います。動的CSSの大きな利点は、おっしゃるように、動的にハードコーディングできることです。dot-less-cssのホームページには素晴らしい例がいくつかあります。これにより、CSSをより単純な中間形式で記述できます。色は、常に繰り返されるネストされたルールの代わりに変数に格納され、コーディングを容易にするその他の機能があります。これらは、多くのコーダーがすべてのブラウザーでサポートすることを望んでいる機能であるため、一部の人々はその必要性に答え、それを一緒に「ハック」するための独自のフレームワークを作成しました。多くの人が言うように、JQueryはjavscriptがずっと機能していたはずです。

ページが読み込まれる前にjavascriptを使用して要素のサイズを変更する場合と比較して、これには欠点がありますか？私が知っておくべき他の潜在的な落とし穴はありますか？

動的サイズ変更の最大の問題は、サイズ変更が難しく、エラーが発生しやすいことです。あなたがそれを正しく行わないと、それはあなたとあなたの視聴者にとってお尻の痛みになる可能性があります。クールな動的要因があなたにとってかなりの追加作業の価値がある場合は、先に進んでそれを実行してください。どのように選択しても、大きな違いはありません。Javascriptはもっと試されており、真実です。サーバー側の動的CSSは、同じことを行うもう1つの優れた方法です。それはあなたが自信を持っていることとあなたがどれほど大胆であるかによります。

于 2010-12-05T16:48:12.823 に答える
1

Sassのようなものをお探しですか？http://sass-lang.com/

于 2010-12-05T16:29:12.023 に答える
1

CSS はキャッシュされる傾向があるため、オンザフライで生成すると、a) css のキャッシュをオフにする必要があり、b) より多くのサーバー オーバーヘッドが発生します。

どのブラウザーが呼び出しているかに応じて、その場で html に css リンクを生成することはかなり一般的だと思いますが、それでも静的 css ファイルの選択の 1 つを指しています。

最後に、サーバー生成ではない本当の理由はおそらく、通常はバックエンド コードを作成する人ではなく設計者によって作成されるためです。これは単なる役割の問題です。

于 2010-12-05T16:52:30.267 に答える
0

これは非常に賢い解決策だと思います。多くの人が反対しますが、cssの将来がもっとそのようになることを願っています。ただし、標準の変更は非常に遅く、lessのようなフレームワークはありますが、十分に普及しているわけではありません。

ある意味で、javascriptを使用して多くのことを処理する方が簡単です。これが意味するのは、JSですでにアニメーションやその他のことをしている場合は、それを使ってすべての動的な変更を行う方がよいということです。jQueryのようなライブラリを使用すると、改善されるだけです。

于 2010-12-05T16:31:42.597 に答える
0

国際化をサポートするために CSS を少し行いました。CSS には、ページを提供しているロケールに応じて変更する必要がある小さな詳細がたくさんあります。ほとんどの場合、背景画像 (ナビゲーション ボタンによく使用されるため、テキストが表示されます) とフォーム ラベルの幅 (ドイツ語ではもっと大きくする必要があります-明示的にサイズを変更する必要を避けるために、実際にはより賢い CSS を使用する必要があります)。N 個の異なるスタイルシートを維持するのではなく、データベースに格納された値から可変ビットを動的に入力します。

于 2010-12-05T16:37:18.407 に答える