我在某处读过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)
这让我想起了网页底部有"共享栏"和内容的网站.
所以...
首先,我知道 CSS表达式在很多方面都是失效的,也是为了避免!important在可能的情况下使用.这是一个特殊的案例样式表.
我的问题是......有没有办法让CSS表达式设置!important标志?
例如,这不起作用:
a { color:expression('red !important'); }
Run Code Online (Sandbox Code Playgroud)
[编辑:感谢MarmaladeToday下面的评论].这也行不通:
a { color:expression('red') !important; }
Run Code Online (Sandbox Code Playgroud)
这可以通过其他方式完成吗?
我实际上要做的是模仿inheritIE6和7中的值.这有效:
color:expression(
this.parentNode.currentStyle ?
this.parentNode.currentStyle.color: 'red'
);
Run Code Online (Sandbox Code Playgroud)
但我也想设置!important标志,这不起作用:
color:expression(
(
this.parentNode.currentStyle ?
this.parentNode.currentStyle.color: 'red'
) + ' !important');
Run Code Online (Sandbox Code Playgroud)
我知道,在JavaScript中,不可能!important通过元素的style对象进行设置.例如,这不起作用:
element.style.color = 'red !important';
Run Code Online (Sandbox Code Playgroud)
但是,它是可以设置!important通过元素的style 属性:
element.setAttribute('style', 'color:red !important;');
Run Code Online (Sandbox Code Playgroud)
所以... CSS表达式仅限于与style对象交互,因此,我想要实现的是不可能的 - 或者表达式是否有任何方式影响元素的属性,或 …
javascript css inheritance internet-explorer css-expressions
来自博客:
CSS表达式的基本思想是,您将拥有CSS代码中属性的计算和动态值,这是人们发现的非常有用的东西.一个简单的例子可以在IE 6中实现max-width行为:
Run Code Online (Sandbox Code Playgroud)width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";
这是我第一次阅读它们.似乎IE用于支持CSS表达式,但在IE8中删除它们.还有哪些浏览器仍在使用它们,它们通常是好还是坏?
我得到的博客文章说替代方案是Javascript,但我认为CSS更受支持,因此比Javascript更好.
我们正在开发一个将被出售给许多客户的Web应用程序.已经有一个客户(银行)决定一旦准备好就会购买该产品.不幸的是,由于一些错误传达,它出现的时间相当晚,他们使用的唯一浏览器是IE6.该应用程序已经开始考虑到它不需要支持IE7以下的任何其他内容.结果也很不错 - 它在IE7/FF/Opera/Safari上完全可用.尚未在Chrome上进行测试,但预计会遇到一些问题.不幸的是,现在IE6的要求毕竟......
该应用程序尚未开发得太远,设计非常好,所以变化并不是那么可怕.不过,它还需要一些工作.
IE6的一个好处是它支持两个非标准且非常有用的功能.首先是条件注释,它允许我只为IE6包含一些CSS/JS文件.其次是CSS表达式.就是这样的事情:
input
{
background-color: expression(this.type='text'?'silver':'');
}
Run Code Online (Sandbox Code Playgroud)
实质上,它将CSS值绑定到JavaScript表达式.这允许轻松模拟IE6本身不支持的许多CSS功能,并且可以大大减轻我的负担.
不幸的是IE因其JavaScript性能而臭名昭着.我担心使用太多这些表达式可能会减慢它的速度.我也不知道银行正在使用什么电脑.由于它是一个非常大的,我希望他们所有的分支机构都有各种各样的.我不希望在那里使用任何东西 - 一些简单的数学运算,三元运算符和查看此元素的/父元素的属性.在IE6_override.CSS文件中仍然会有几十个.
这可能是个问题吗?
补充: Blah,这是我害怕的.好的,会看到我能用多少其他黑客来解决这些缺点.Thanx,人!
javascript css performance internet-explorer-6 css-expressions
我想根据CSS表达式设置div的高度.
基本上它应该被设置为视口宽度的一些%(比如90%), 我尝试了以下,但是没有工作;
height:expression(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth );
Run Code Online (Sandbox Code Playgroud)
我正在寻找一种跨浏览器的方式(IE7 +,FF4 +,Safari)
假设我的页面上有一个div:
<div class="center"></div>
Run Code Online (Sandbox Code Playgroud)
我的CSS看起来像:
.center{
background:red;
position:absolute;
left:50%;
top:50%;
margin-left: ?
margin-top: ?
}
Run Code Online (Sandbox Code Playgroud)
正如您在上面所看到的,我唯一需要知道的是如何设置margin-left和margin-top值.如果我有一个已知的.centerdiv的宽度和高度(比如每个300px),我会设置margin-left和margin-top值为该值的一半(-150px)
但我的问题是如果.centerdiv的宽度/高度未知(或者说它是动态的),我该如何设置这些值?
我可以使用某种CSS表达式,还是有跨浏览器限制?最好的方法是什么?
我想知道如果你可以使用javascript,使用CSS表达式是否有意义.
哪个更好或更快?
CSS表达式是否与禁用的js一起使用?
我想仅在输入类型为Checkbox时应用投影滤镜.以下工作正在进行
input {
filter: expression("progid:DXImageTransform.Microsoft.Alpha(opacity=100)");
}
Run Code Online (Sandbox Code Playgroud)
但是我想在其中包含this.type =='checkbox'.有点像这样
input {
filter: expression(this.type=='checkbox' ? "progid:DXImageTransform.Microsoft.Alpha(opacity=100)":"");
}
Run Code Online (Sandbox Code Playgroud)
这不起作用.