Pooya Karimian

Blog Archives: Expressions in CSS

« Orkut | Main | Mountain Climbing with Mayssam and Faraz »

Expressions in CSS

Sometime ago I used a template from oswd.org as the template for a site and I choose a table-less CSS design. A CSS design will make the page load faster and more easy to change (just by changing the definitions of the style).

One interesting thing about CSS in Internet Explorer is that you can use javascript expressions inline. This can be used to easily do some nice designs (e.g dynamic resizing of elements). Take a look at this example:

--Click here and write something!--

Test Box

and this the HTML :

<span id="pooyak_el1" 
      contentEditable=true 
      style="background: lightblue;">
 --Click here and write something!--
</span>
<span id="pooyak_el2" 
      style="background: yellow; 
             width: expression(pooyak_el1.offsetWidth+'px');
             height: expression(pooyak_el1.offsetHeight+'px')">
 Test Box
</span>


- w3.org's Tableless layout HOWTO
- From Table Hacks to CSS Layout: A Web Designer's Journey
- Advanced CSS Layouts: Step by Step

- MSDN: About Dynamic Properties
- CSS Expressions

Update: I changed my site to XHTML seems like the example above is not working (which is an IE only example) is not working anymore...


Posted to Programming by pooya at April 17, 2004 06:35 PM
Comments

Posted by: Observer at April 19, 2004 10:35 PM

MAAAAAAAAA!!!!!


Posted by: roya at April 29, 2004 01:19 AM

The third link doesn work (Advanced CSS layouts)


Posted by: pooya at April 29, 2004 07:28 AM

Fixed, Thanks!




[Saturday 2019-12-14] [Updated Saturday 2013-11-30]