Which Browsers Still Support CSS Expressions

Which browsers still support CSS expressions

AFAIK, it was only ever IE6/7 (maybe) 5.

I never thought they were a good thing. May as well just use JavaScript directly.

They are in fact implemented in JavaScript, and I'm pretty sure disabling JS disables these expressions.

The sample you posted...

width: expression(document.body.clientWidth >  1100)? "1100px" : "auto";

...is just a ternary operator that says If the width is larger than 1100px, set it 1100px, otherwise set property to auto.

To finish, no scripting language on the web is more widely supported than JavaScript.

Seeking CSS Browser compatibility information for setting width using left and right

The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.

If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).

You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...

<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>

...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.

You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.

Simple css error - can you spot the issue?

OK, it seems like you have multiple issues.

Firstly, the way you're building your page is ancient and wrong today.

The "Star HTML" hack you're using was very popular many years ago. It only works in Internet Explorer 6 or OLDER. Info here:

http://www.dynamicsitesolutions.com/css/filters/star-html/

You're also using CSS expressions, which were only supported in Internet Explorer 7 or OLDER. Info here:

Which browsers still support CSS expressions

You should not try to write the code using these old unused technologies -- unless you only want it to work in Internet Explorer 6 or older. Whatever tutorial you're using, it is very outdated. If you really want to use javascript in your css, just write the javascript in a real < script> block instead trying to insert the javascript as a css expression.

Secondly, you have this issue where you're trying to use keyword const. I would like to guess that you actually want to use var instead of const, unless you're intending to use EcmaScript 6. Considering the other issues you're having, I'm guessing either const is a mistake, or you took the line from somewhere and didn't realize it was ES6. I would suggest trying changing const to var first, and if that works for you, then great.

If I have a CSS solution for all browsers except IE then what should be chosen for IE? CSS expression vs JavaScript vs jQuery with plugin?

CSS expressions only work in Internet Explorer only, so you'll have to use Javascript in some form, for complex styles. Firefox, Safari and Chrome recognise a lot of CSS3 so if you're trying to do something like rounded corners or multiple backgrounds you could use that and look for an expression equivalent for IE.

However, I would recommend using jQuery. It's built to be cross-browser, and your code will likely end up simpler than using combinations of expressions/browser-specific styles.

IE6 performance with CSS expressions

https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

Turns out you might want to avoid using these, they are dangerous.

CSS Expressions

CSS expressions used to work in older IE's, but they have been completely abandoned in IE8:

Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode.

So it's arguably not really worth learning them any more.

If not, what should I use?

Depending on the use case, JavaScript or media queries.

As @Yet Another Geek notes, your above example can be implemented using position: fixed. IE6 doesn't support that - the CSS expression was probably created to work around that.

Which Browsers Still Support CSS Expressions