問題タブ [dynamic-css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
php - 動的 CSS (PHP ヘッダーを使用) が Linux (ミント) でレンダリングされない - Windows では正常に動作します
私は動的CSSを持っています（phpによって提供されるいくつかの値とクラス/ ID名を使用）。ファイルは次で始まります。
config.phpディレクトリ構造は次のとおりです (およびcss.phpファイルの相対位置を決定するため):
Linux Mint 15 をインストールし、apache と (一部の) mod を有効にしました - headersmod が有効になっていないことに気付きました...そして有効にしましたが、それは役に立ちませんでした。クライアントでcssファイルを取得しましたが、プレーンで空です。奇妙なことに、Windows XAMPP では問題なく動作します。
ここに何か提案はありますか？相対パスが間違っているのでしょうか？いくつかの組み合わせを試しましたが、どちらも機能しませんでした (アクセスするには、親に移動する必要がconfig.phpあるため、問題の一部である可能性があると思いました)。
私はLinuxに対応しているだけなので、その解決策は非常に単純である可能性があります...またはそうでない可能性があります。とにかく、私がここでスキップしたかもしれない詳細が必要な場合は、お尋ねください.
EDIT：
ちょっと考えてみてください：Linuxのパーミッションの問題でしょうか？-もしそうなら、私のサイトがにあり、現時点で/var/www/phpがユーザーの下で実行されていることを考えると、推奨される回避策は何ですか. www-dataApacheの所有権を放棄するのは賢明ですか?
EDIT 2
Firebugでヘッダーリクエストを確認しました-これは私のファイル用です
javascript - JavaScript: スタイル要素を動的に (オンフライで) 作成することの長所と短所
JavaScript では、膨大な数の要素に CSS ルールを適用するために<style>、要素を動的に作成してセクションに追加できます。<head>
このアプローチの利点と欠点は何ですか?
要素に対するJavaScriptの反復と比較して、実際にパフォーマンスが向上する場合。舞台裏 (ブラウザの内部) は何ですか?
速いのと遅いのはどっち？要素に対するJavascriptの反復またはブラウザで動的にcssを追加しますか?
処理時間はどうですか？処理負荷？
このアプローチを使用した問題をよりよく理解するには、次の例を参照してください。
例:次の html のように、20 列以上 1000 行以上のテーブルがある場合:
誰かが jsFiddle の例を必要とする場合は、後で作成できます。
ケース 1: SSN データを含むテーブル列のみを動的に非表示にしたい場合。これを行うには、いくつかのアプローチを適用できます。このアプローチは、大きく 2 つのカテゴリに分けることができます。最初のカテゴリのソリューションでは 、td要素を繰り返し処理して、列のスタイルを動的に変更できます。2番目のアプローチでは、1 つを動的に作成して CSS を適用するか、ここで@Frits van Campenが指定した定義済みの CSS ルールを使用します。（注： @Frits van Campenは、特定のケースに適したソリューションです。ただし、テーブル行の表示と非表示の操作についてさらに詳しく説明したいと思います。）
次のように動的 CSS ルールを作成できます。
または、定義済みの CSS ルールを適用します。
jsFiddly の例を次に示します。
ここで見つけた console.time メソッドを使用した時間比較を次に示します。
左は動的 CSS で、右は反復アプローチです。
おそらく、スタイル要素の追加と要素の反復を計算するため、適切なものではありません。動的 CSS の要素に対するすべての反復は、ブラウザーの内部によって行われます。ただし、スクリプトの応答時間が動的 css の方が速いと考える場合。注: 反復アプローチは、jQuery と比較して、純粋な JavaScript で高速になります。しかし、どれだけ速く結果がありません。だからあなたはあなたの答えでもっとできる。
ケース 2:<tr>ここで、 'Nick' という名前のユーザーを含むテーブル行を強調表示したいと思います。ここで、表の行に name、family_name、id などのデータ属性があることに注意してください。したがって、ここでも、javascript やその他のライブラリ ツールを使用して要素を反復処理したり、何らかの動的ルールを適用したりできます (それが可能かどうかはわかりません)。または、ケース 1 のように定義済みのフィルターを適用しないでください。)
CSS ルール:
この場合、CSS ルールを動的に適用することで、多くの楽しいフィルタリングを行うことができます。
更新: ここに示す例は、問題の簡単な概要です。また、一部の最適化された反復は、javascript で同等に高速に実行できます。ただし、要素を選択するためのトラバースが難しい可能性がある比較的ネストされた ul 要素にディッパーの子要素がないテーブルのみを検討します。
重要:ここでは、質問を編集してこの部分を削除してください。また、質問の範囲内で回答を明確に記載してください。ここで私は「実装がうまくいったかどうか」について尋ねているのではありません。スタイル要素を動的に作成することの利点と欠点は、ブラウザの内部メカニズムに関してどのようなものかを尋ねています。
PS と例:なぜこのアイデアを思いついたのですか? 最近、「非常に長いhtmlテーブルで列を非表示にする方法」の質問に答えました。この質問では、OP は長いテーブルの特定のテーブル列に CSS ルールを適用することについて尋ねます。その場でルールを使用してスタイル要素を作成することをお勧めします。これは正常に機能します。これは、ブラウザの内部メカニズムによってスタイルが適用され、要素を繰り返し処理して各項目にスタイルを適用するよりもパフォーマンスが向上するためだと思います。
php - HTTP ヘッダーを使用して動的 CSS をキャッシュするにはどうすればよいですか?
これはこの質問の直接の複製ですが、提供された解決策は機能しません。
私が維持している WordPress プラグインの一部として、現在、次のコードを使用して動的 CSS ファイルを吐き出しています。
使用されるヘッダー値は、上記の質問で使用されるものと一致しますが、Chrome と Firefox の両方がキャッシュ リクエストを受け入れることを拒否します。複数のサーバーを試しましたが、それぞれが200毎回応答を返します。CSS をメイン ページに挿入するよりも、これがより良い解決策になることを願っていましたが、キャッシュが機能しない場合は、結果が大幅に悪化することになります。
リクエスト ヘッダーの完全なリスト (Chrome):
応答ヘッダーの完全なリスト ( inとin の両方を含む、テストされた最新のヘッダーを含めるように編集されてpublicpragmacache-controlいます):
javascript - css クラス名をランダムな文字に変換する
Facebook と Google のスタイルシートを読んだところ、CSS スタイルで使用されているクラス名がランダムな文字と数字であることに気付きました。Web ページを開発した後、すべての css クラス名をランダムな文字に変換できますか? 彼らはどうやってそれをしたのですか？これを行うためのツールはありますか？
php - ユーザー設定の永続化
ユーザーがログインしてテーマや Web サイトの要素の位置を変更できる Web サイトを構築したいと考えています。したがって、基本的に、サイトの色要素を追加/削除/移動/変更できます。設定を保存した後、同じログインで戻ってきて、サイトが元のままであることを確認します。
私の質問は次のとおりです。これを行う最も実用的な方法は何ですか? すべてのデータを MySQL に保存し、訪問者がログインしたときにそれをロードしますか? PHP を使用して新しい PHP ファイルを作成しますか?
MySQL に保存する場合、どのように処理すればよい< > ; ' -ですか? それらをすべて独自の列に入れますか？
less - 実行時に生成される動的でないクラス名、または配列ループから生成されるクラス
現在、私の開発者の 1 人がこの少ないファイルを開発しました。
約20カ国と。ループまたは実行時に作成される動的な名前を使用して、これをよりスマートに行うことができるかどうか疑問に思っていました。私が欲しいものを説明する次の疑似コードを考えてみましょう:
任意の定義に単純に一致します。これにより多くの競合が発生する可能性があることは承知していますが、おそらく正規表現を介してさらに絞り込むことができますか? 理にかなっていますが、これを見つけることができませんでした。
別の方法として、ある種のループを使用して「静的」CSS クラスを作成することもできます。この疑似代替案を検討してください。
したがって、事前に決定された国のリストのクラスを作成します。
これらの代替手段のいずれかが何らかの方法で利用可能ですか? または、私が見落としていた可能性のある 3 番目のオプションについてアドバイスをいただけますか? わずかな文字列の違いだけで、ほぼ同一のクラスが 20 個も定義されているのを見ると、ちょっとばかげているように感じます。CSS プリプロセッサはこれをもっと賢く行うことができなければならないと思います。
ありがとう！
html - RTL CSS を処理する最良の方法はどれですか
現在、私はバイリンガル Web サイトに取り組んでおり、RTL CSS コードの処理方法について少し混乱しています。私は次のように2つのことを考えています。
1. 単一の CSS ファイル - LTR デフォルト コードのオーバーライド。
2. 単一の CSS ファイル - 上書きなし
最初の方法を使用すると、多くのオーバーライドが発生します。また、2 番目の方法を使用すると、css ファイルに多くのコードが含まれます。どちらもうまくいくことはわかっていますが、どちらが最善の方法なのか知りたいです。また、別の方法があれば教えてください。
css - クラスとメディア クエリに CSS を使用する
スライドして開閉するメニューバーがあります。閉じた状態は、画面が十分に小さい場合の外観でもあります。したがって、基本的に同じスタイルを 2 回使用します。1 回はクラスとして、もう 1 回はメディア クエリとして使用します。
これを回避する方法はありますか？
編集¹：
メディア クエリ スタイルとクラスを持つことは避けたいと思います。クラスとメディア クエリの両方を介して同じスタイルを適用する賢い方法があればいいのですが。
編集²：
コード例 (説明目的):
javascript - CSS を動的に更新する
私はこのようにHTMLを設定しました
私のコントローラーには次のようなものがあります：
コンソールで適切な CSS が生成されていることはわかりますが。それはDOMに適用されていません。私が見逃しているアイデアはありますか?
コンソール：
編集: setWidthOfTime 変数で高さを設定することで問題の半分を修正しましたが、現在はすべての幅の値に対して最後の値 (37.5%) を使用しています。