CSS表达式

Fre*_*nöw 48 html css css-expressions

我在某处读过CSS表达式已弃用,甚至不应该使用.我从未听说过他们,于是决定去看看.我发现了一个代码示例,即使您滚动,也会在屏幕上的同一位置保留浮动元素.

<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>
Run Code Online (Sandbox Code Playgroud)

这让我想起了网页底部有"共享栏"和内容的网站.

所以...

  1. 这是他们这样做的吗?
  2. 在这种情况下使用表达式是否可以?
  3. 如果没有,我应该使用什么?
  4. 表达式可以帮助解决其他任何有趣/有用的事情吗?

Pek*_*ica 61

CSS表达式曾经在旧的IE中工作,但它们在IE8中已被完全抛弃:

在IE8标准模式及更高版本中,Internet Explorer 8及更高版本不再支持动态属性(也称为"CSS表达式").此决定是针对标准合规性,浏览器性能和安全性原因做出的,详见IE博客文章"Ending Expressions".在IE7模式或IE5模式下,Internet Explorer 8中仍可使用动态属性.

所以它可能不值得学习它们.

如果没有,我应该使用什么?

根据用例,JavaScript或媒体查询.

正如@Yet Another Geek所说,上面的例子可以使用 position: fixed.IE6不支持 - 可能会创建CSS表达式来解决这个问题.


Yet*_*eek 15

要在滚动时将元素保持在同一位置,应使用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>
Run Code Online (Sandbox Code Playgroud)


Tho*_*lds 11

  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可以实现相同的效果.

*正式,反正.显然它适用于@DalexL的Chrome