Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Expressions

I read somewhere that CSS Expressions were deprecated and shouldn't even be used. I had never heard of them and decided to take a look. I found a code example that kept a floating element in the same spot on the screen, even if you scrolled.

<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> 

This reminded me of the sites that had the "share bars" and stuff at the bottom of their pages.

So...

  1. Is this how they are doing it?
  2. Is it alright to use Expressions in this situation?
  3. If not, what should I use?
  4. Are there any other interesting/helpful things that expressions can help with?
like image 479
Freesnöw Avatar asked May 31 '11 18:05

Freesnöw


People also ask

What are CSS expressions?

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.

What are CSS functions?

CSS functions are used as a value for various CSS properties. Function. Description. attr() Returns the value of an attribute of the selected element.

How is CSS width calculated?

Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.


2 Answers

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.

like image 88
Pekka Avatar answered Sep 21 '22 05:09

Pekka


For keeping an element in the same place while scrolling you should use the position:fixed property and then use top,bottom,left and right properties to tell where it should be positioned.

EDIT: Here how it should be for your example:

<html> <style> #fixed { position:fixed; left:10px; top: 50px; 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> 
like image 23
Yet Another Geek Avatar answered Sep 22 '22 05:09

Yet Another Geek