/    Sign up×
Community /Pin to ProfileBookmark

CSS Expressions (IE only)

Copy linkTweet thisAlerts:
Oct 17.2007

The following is a Yahoo article about High Performance Web Sites, this page in particular talks about CSS Expressions.

[url]http://developer.yahoo.net/blog/archives/2007/07/high_performanc_6.html[/url]

[I]“The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated.”[/I]

How would one go about adding a counter to a CSS expression to see how many times it’s being evaluated?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Oct 17.2007 — Probably define a global variable and increment it through the CSS expression. Something like:
[code=html]
<head>
<script type="text/javascript">
var noOfTimes = 0;
</script>
<style type="text/css">
body {
background-color: expression(noOfTimes++);
}
</style>
</head>
[/code]
I'm not that familiar with CSS expressions so I don't know can you add multiple statements to them. I doubt it though.
Copy linkTweet thisAlerts:
@felgallOct 18.2007 — CSS expressions should accept any JScript code since that is basically what they are. They only work in Internet Explorer though because that is the only browser that uses JScript instead of JavaScript.
Copy linkTweet thisAlerts:
@Orc_ScorcherOct 18.2007 — Function calls are expressions, too, so there are really no limitations to dynamic properties. Stripped down example:&lt;script&gt;
function f() {
++f.called
window.status = f.called
return "#238898"
}
f.called = 0
&lt;/script&gt;
&lt;style&gt;
body {
background-color: expression(f())
}
&lt;/style&gt;
&lt;body&gt;You'll see that the expression gets evaluated on every mouse move, several times every time you click the mouse button, when you resize the window, etc.
Copy linkTweet thisAlerts:
@magentaplacentaauthorOct 18.2007 — This is great, thanks. I see that I can evaluate that function a couple thousand times in about 20 seconds or so just by moving the mouse around. But what does this [I]really[/I] mean in regards to performance? Realistically, would a page with one css expression have performance issues?

One thing I'm looking to do is create a data table where the header row doesn't scroll with the body (so the header is always static). I can do this with css expressions and sure can't see any performance issues.

The browser exclusivity isn't a problem, either as this is for an app where we target [I]only[/I] IE.
Copy linkTweet thisAlerts:
@Declan1991Oct 18.2007 — Could you set the CSS using Javascript onload or something like that?
Copy linkTweet thisAlerts:
@Orc_ScorcherOct 18.2007 — This is great, thanks. I see that I can evaluate that function a couple thousand times in about 20 seconds or so just by moving the mouse around. But what does this [I]really[/I] mean in regards to performance? Realistically, would a page with one css expression have performance issues?[/QUOTE]With just one expression of one or two simple artithmetic operations you should be on the safe side.

But you're in the best position to decide if you need to take some action. Does IE feel sluggish while you're using your page. Also, open Task Manager and take a look at the CPU usage and play around a little. If there aren't any spikes that look critical, do nothing.
Copy linkTweet thisAlerts:
@magentaplacentaauthorOct 19.2007 — Yeah, I've checked the task manager and really can't see the expression having any effect (performance-wise). When I did some research on css expressions, people pretty much say to avoid them as they have performance issues. Maybe they're using several on the same page? Or maybe they have bigger impacts on < IE6/7 browsers?
×

Success!

Help @magentaplacenta spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...