web-dev-qa-db-ja.com

CSS式

CSS Expressionsは非推奨であり、使用すべきではないことをどこかで読みました。私は彼らのことを聞いたことがなかったので、見てみることにしました。スクロールしても、画面上の同じ場所にフローティング要素を保持するコード例を見つけました。

<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

これにより、ページの下部に「共有バー」などがあるサイトを思い出しました。

そう...

  1. これは彼らがそれをやっている方法ですか？
  2. この状況で式を使用しても大丈夫ですか？
  3. そうでない場合、何を使用すればよいですか？
  4. 式が役立つ他の興味深い/役立つものはありますか？
htmlcsscss-expressions
48
Freesnöw

CSS表現は以前のIEで機能していましたが、 IE8では完全に放棄されました：

動的プロパティ（「CSS式」とも呼ばれる）は、Internet Explorer 8以降、IE8標準モード以上ではサポートされなくなりました。この決定は、IE Ending Expressionsというタイトルのブログエントリに詳細が記載されている標準準拠、ブラウザパフォーマンス、およびセキュリティ上の理由から行われました。動的プロパティは、IE7モードまたはIE5のInternet Explorer 8モード。

ですから、間違いなくそれらを学ぶ価値はほとんどありません。

そうでない場合、何を使用すればよいですか？

ユースケースに応じて、JavaScriptまたは メディアクエリ 。

@Yet Another Geekが指摘しているように、上記の例はposition: fixed。 IE6はそれをサポートしていません-CSS式はおそらくそれを回避するために作成されました。

60
Pekka 웃

スクロール中に要素を同じ場所に保持するには、 position：fixed プロパティを使用してから、top、bottom、leftおよびrightプロパティを使用して、配置する場所を指定する必要があります。

編集：ここであなたの例のためにどうあるべきか：

<html>
<style>
#fixed {
position:fixed;
left:10px;
top: 50px;
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>
15
Yet Another Geek
  1. おそらくない。 position:fixedまたはJavaScriptを使用する方が簡単です
  2. IE <8. IE8 +およびその他のブラウザはサポートしていません* ;;標準に準拠していませんであり、検証に合格しません
  3. position:fixed; bottom:x; top:y; left: a; right:b;を使用します。x、y、a、およびbはオフセットです。または、Javascriptを使用します
  4. 繰り返しますが、古いバージョンのIEのみを使用している場合を除きます。実際にダンプするだけです。JSと通常のCSSで同じ効果を得ることができます。

*正式には、とにかく。どうやらそれが働いていたChrome @DalexL

11
Thomas Shields