`
ilovejsj
  • 浏览: 205999 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

CSS中expression使用简介--IE8中不再使用的语法

阅读更多
转载
http://hi.baidu.com/kxw102/blog/item/c2c4fc01bb09be8feb50cd65.html
定义
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表 达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元 素的一个成员函数中一样。

  1)给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

  2)给元素自定义属性赋值

  例如,消除页面上的链接虚线框。 通常的做法是:

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

  采用expression的做法如下:

<style type="text/css">
a {star : expression(onfocus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

  说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义 属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一 句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出 而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

<style type="text/css">
input
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">




注意:不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。

今天从IE的官方blog中看到了这篇文章——《Ending Expressions》。 文章指出在IE8的标准模式下,将不再对CSS expression进行支持。也许有人会纷纷表示影响不大,因为有些人甚至都不知道什么是CSS的expression,也从来没有用过。但是,我感觉 这个微软给予我们的信息,却是应该让人纷纷表示影响很大的。而这个信息就是——新一代的浏览器并不给保证优雅的向前兼容,必要的时候,会舍弃一些他们认为 可以舍弃的内容。所以从今天开始,写网页的时候,请尽量的使用标准来写吧,一些hack和技巧还是减少使用吧。

IE8停止对CSS expression的支持,会不会使得以前使用了CSS expression的网页在IE8下无法使用呢?《Ending Expressions》这篇文章的最后给出了回答——

Pages on my web site depend on CSS expressions. How does this affect me ?

Thanks to IE8’s new layout engine, most expressions written to work around CSS 2.1 bugs and shortcomings should no longer be needed; we expect unsupported or incorrectly interpreted properties to work in a standard, interoperable way. For those expressions supporting more specific purposes, anything they do is inherently achievable using standard JavaScript, usually interoperably and at lower runtime costs. The specifics will of course depend on your application. Based on your feedback to this post, we may visit examples in future installments.

简单的说来就是——对不起,帮不了你,您老人家还是改成JavaScript或者其他办法实现吧。

不知道这会不会造成大批的网页从此只能在IE5-IE7上使用(从IE5才开始支持CSS expression)呢?也许吧。

你说,做个网页咋就那么难呢?既要考虑浏览器以前的版本,还要考虑浏览器以后的版本,最可恶的是,还不是就IE一种浏览器。
分享到:
评论

相关推荐

    CSS中expression使用简介

    由于性能问题以及对浏览器兼容性的考虑,`expression`在现代Web开发中已经不再推荐使用。 ### `expression`的基本用法 `expression`的语法结构是将CSS属性与JavaScript表达式关联起来,即在CSS属性后面加上`...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

    div错位解决IE6IE7IE8样式不兼容问题

    特别是在早期浏览器版本中,如Internet Explorer 6(IE6)、IE7 和 IE8,由于这些浏览器对于CSS的支持存在较大差异,导致网页在不同浏览器中的显示效果大相径庭。本文将详细介绍如何解决div错位问题以及针对IE6、IE7...

    css浏览器兼容整理

    #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果,了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的CSS hack方法: 1. **区别IE...

    CSS兼容IE和Firefox的技巧集合.rar

    解决方法是在CSS中使用`box-sizing`属性,将其设置为`border-box`(IE样式)或`content-box`(W3C样式),或者使用条件注释为IE提供特定的CSS。 2. `*html`与`_DOCTYPE` hack:对于IE特有的样式,可以使用`*html`...

    解决浏览器兼容问题的CSS语法技巧大全.doc

    下面是解决浏览器兼容问题的 CSS 语法技巧大全,涵盖了 IE 和 Firefox 浏览器的兼容性问题。 1.垂直居中问题 使用 `vertical-align:middle;` 可以实现 DIV 的垂直居中,但需要控制内容不要换行。同时,使用 `line-...

    IE678个人总结的式样问题

    根据提供的信息,我们可以总结出以下IT知识要点,主要聚焦于IE6、IE7与IE8浏览器中的样式兼容性问题及解决方案: ### 一、IE6/IE7/IE8 浏览器兼容性概述 #### 1. **文档声明与X-UA-Compatible** - 在网页头部加入...

    div+css学习笔记(IE与fox好多不兼容的问题)

    - 在IE中,为元素设置鼠标悬停为手型的CSS代码通常是`cursor: hand;`,但在Firefox中,正确的语法是`cursor: pointer;`。因此,在编写CSS时,应使用`cursor: pointer;`以确保在不同浏览器中的兼容性。 2. **滤镜...

    IE8兼容栏目树orgchart的使用

    如果文章中使用了这些库,我们需要确保使用的是支持IE8的版本。 4. **JSON-P**:考虑到IE8不支持跨域的XMLHttpRequest,若数据从其他域获取,可能需要用到JSON-P(JSON with Padding)技术来实现跨域请求。 5. **...

    ie兼容媒体查询

    比如,`Respond.js`是一个轻量级的解决方案,它可以添加对IE6-8的媒体查询支持。在HTML头部加入如下代码: ```html &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/...

    用CSS防iframe型挂马

    1. **CSS Expression**: CSS表达式(expression)是IE特有的一个功能,允许在CSS样式中嵌入JavaScript代码。虽然这个特性在现代浏览器中已被废弃,但在某些情况下仍然可以用于防御特定类型的攻击。 - **语法**: `...

    解决IE浏览器兼容问题

    需使用Babel等工具将现代JavaScript转换为IE可理解的语法。 **二、使用条件注释和特性检测** 1. **条件注释**:IE特有的条件注释(Conditional Comments)允许开发者针对IE特定版本插入代码块,如`&lt;!--[if IE 8]&gt; ...

    jQuery完全实例.rar

    参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 -------------------------------------------------------------------------------- This function accepts a string containing a CSS ...

    csshack最新的css作品展示

    【CSS Hack】是一种在网页设计中,为了应对不同的浏览器对CSS(层叠样式表)解析方式的差异,而采用的一些技巧或方法。由于各浏览器之间的兼容性和标准实施不一致,CSS Hack经常被用来确保网站在各种环境下都能正确...

    CSS运用中的技巧及常见问题

    1. **注释规范**:在CSS中,正确的注释写法是`/* 注释内容 */`,避免在HTML中使用`&lt;!----&gt;`这样的注释,因为某些浏览器可能会忽略。同时,注释前后应各空一格,防止在某些语言中引发问题。 2. **浏览器兼容性HACK**...

    Css利用js的expression实现的效果

    在 CSS 中使用 `expression` 是一种特殊的技术,主要用于在 IE5 及其后续版本的浏览器中实现动态效果。通过 `expression`,我们可以将 CSS 属性与 JavaScript 表达式关联起来,从而让 CSS 属性的值根据表达式的计算...

    兼容IE8的jQuery幻灯片切换代码.zip

    为了在IE8中实现动画效果,我们需要依赖CSS的渐变、透明度以及定位等特性,但需要注意的是,IE8并不支持CSS3的新特性,所以我们需要使用专为IE8设计的CSS hack,如`filter`属性来模拟透明度,或者使用`expression`来...

    最全的CSS浏览器的兼容问题

    } // 注意这里的语法可能不是标准的CSS,而是针对IE的特定表达式 ``` 2. **Firefox等其他浏览器**: ```css a:focus { outline: none; } ``` #### 三、实现背景透明 为了实现背景透明效果,可以通过以下几种...

    解决ie6的定位问题 position fiexed

    当在CSS中使用`position: fixed;`时,元素会相对于视口定位,即使页面滚动也能保持位置不变。但在IE6中,此属性无法正常工作,导致元素失去了预期的固定位置行为。为了解决这个问题,我们需要一种兼容IE6的方法来...

Global site tag (gtag.js) - Google Analytics