Shulou(Shulou.com)06/03 Report--

This article shows you the use of css expression and its advantages and disadvantages, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Overview

Css _ expression (css expression), also known as Dynamic properties (dynamic attribute), is the product of early Microsoft DHTML. Because it can define expressions (formulas) in Css to establish the relationship between attributes between elements, it is supported from IE5. Later, due to standards, performance, security and other problems, Microsoft canceled the support for css expression from the IE8 beta2 standard mode.

Use

Microsoft provides four css expression methods: getExpression, recalc, removeExpression, and setExpression. If you are interested, please refer to msdn.

Generally, the most commonly used is to use expression directly in css, for example:

The code is as follows:

.toTop {

Top:_expression (eval (document.documentElement.scrollTop + document.documentElement.clientHeight-60)

}

This is an intercept that returns the top button css code and uses css to position the element at the bottom of the screen.

Advantages

Css exprssion technology can use expressions or formulas to define css attributes. Msdn gives several advantages: reducing the code on the page, so that designers do not need to learn javascript to achieve some DHTML effects. Personally, reducing the code on the page actually only reduces the code related to javascript, while the code in css expression itself is very similar to js, and the advantage that designers can achieve DHTML effect without learning js is also far-fetched, or chicken ribs.

Defect

. Does not meet the web standard

Css expression, which inserts js code into css, runs counter to the concept of separation of structure, expression and behavior in web standard.

. inefficiency

An css expression will be executed repeatedly, even hundreds of times. This can consume a lot of computer hardware resources and, in extreme cases, cause browsers to crash.

. Bring about security risks.

Css expressions expose the context in which a script is executed, which can lead to the potential for script injection.

For the above reasons, Microsoft finally abandoned its support for css expressions from IE8 beta2 (standard mode).

Practical application

Many early developers used css expression to achieve many effects, such as positioning elements relative to the mouse pointer, moving elements according to a timer, and so on. Of course, these effects can be achieved using js.

Although there are many problems with css expressions, we can still see them on the Internet, even on some mature commercial websites. One of the most common applications is a module suspended on the page (such as navigation, returning to the top).

Let's take a look at a common code implementation of the return top button:

Html:

The code is as follows:

...

...

...

The top of the return

Css:

The code is as follows:

# toTopBtn {

Position:fixed

Bottom:10px

Right:10px

_ position:absolute

_ top:_expression (eval (document.documentElement.scrollTop + document.documentElement.clientHeight-60))

...

}

_ position and _ top are hack for IE6 because IE6 does not support position:fixed. The css expression here simulates position:fixed, that is, pinning the return top button to the bottom of the page, regardless of whether the page is scrolling or zooming. Because css exprssion executes multiple times, this button element is always positioned at the bottom of the page. Of course, we can use javascript to simulate the position:fixed of ie6, but careful students may find that the return to the top button under IE6 has a more obvious jitter when you scroll the page. When we use css expression, we add the following rules to css, and the jitter disappears:

The code is as follows:

Html {

_ background-image:url (about/blank)

_ background-attachment:fixed

}

And using js to simulate, plus this css rule is also ineffective. This should also be the reason why many mature commercial websites are still using css expression. If there is a better implementation plan, welcome to discuss.

However, according to the web page optimization advice provided by YSlow: Avoid CSS Expressions, and because of various problems with css expression, individuals do not recommend using css expressions. You can negotiate with the product staff to tolerate this jitter flaw under ie6, or use animation to beautify the jitter effect, or use another way to achieve position:fixed, such as: fixed the height of the page, so that the content inside the page can be scrollable, and then the return top button will be absolutely positioned to the bottom (this implementation should be cautious, because or have a greater impact on the page layout and structure).

CSS expression is the product of temporary solutions in the web era. After being mercilessly abandoned by its creators, we should abandon this ugly way of code and adopt a better liberation solution.

The above is an introduction to the usage of css expression and its advantages and disadvantages. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.