Unlimited IE one-time CSS expressions

In support of days of CSS expressions on habr

I think everyone who has come up with a solution to any problems in IE <8 knows about CSS expressions and about “one-off” CSS expressions that apply to an element only once, thereby not creating a constant load on the processor. This is usually solved by:

  .my-class {
     behavior: expression (someMagick (), runtimeStyle.behavior = 'none');
 } 

In order to use more properties besides behavior, some more “useless” properties are usually used, or properties that are affected by expression.

What if we don’t know how many and what properties there will be and can’t control it (don’t ask me why and why)? In addition to this, the element can fall under the conditions of several selectors and the same properties will simply be erased by those that go below in the code! Can start to invent their own unique properties? Expressions for unrealistic properties also work! But everything is not so simple: real (existing) properties are used only because they are accessible through runtimeStyle, where they can be overridden; unrealistic (fictional) properties via runtimeStyle are not available, but are available only for reading in currentStyle, which is rather useless in affairs with one-time expressions (although some benefit from this may be, but this is a separate topic).
')
From this it is not difficult to guess that the task sounds like: to find a way to redefine nonexistent properties.

Initially given to us:

  .cute-font {
     my-really-random-property: expression (style.fontFamily = 'Comic Sans MS');
 } 

The first (actually not the first, but this is the only thing I remembered) that it occurred to me to give the element an extra class in which to reset the property:

  .cute-font {
     my-really-random-property: expression (
         style.fontFamily = 'Comic Sans MS',
         this.className + = 'my-really-random-property-clear'
     );
 }

 .my-really-random-property-clear {
     my-really-random-property: none;
 } 

But it did not work. The thing is that expressions are hung in a special way , different from the usual properties. Inside the browser, of course, it can happen differently, but again it makes me think:

  .cute-font {
     my-really-random-property: expression (
         style.fontFamily = 'Comic Sans MS',
         this.className + = 'my-really-random-property-clear'
     );
 }

 .my-really-random-property-clear {
     my-really-random-property: expression ();
 } 

But this did not work, and the reason is obvious - because expression is empty it was ignored! Therefore, we add the simplest expression there, which does not load the processor:

  .cute-font {
     my-really-random-property: expression (
         style.fontFamily = 'Comic Sans MS',
         this.className + = 'my-really-random-property-clear'
     );
 }

 .my-really-random-property-clear {
     my-really-random-property: expression ('');
 } 

Now this expression can be considered one-time. To visually make sure we change the code like this:

  .cute-font {
     my-really-random-property: expression (
         style.fontFamily = 'Comic Sans MS',
         this.innerHTML + = 'It Works!',
         this.className + = 'my-really-random-property-clear'
     );
 }

 .my-really-random-property-clear {
     my-really-random-property: expression ('');
 } 

The processor load during activity on the page (moving the mouse, scrolling, resizing the window) is no different from loading the processor on the same page without expressions at all with 100 elements, I didn’t check it anymore, since With workers (not one-time) expressions, the download is noticeable.

Why this may be necessary for you to decide, I had reasons for that and maybe soon I will tell about them; )

UPD: Pavel Volodko wrote me a mail and proposed an improved solution that eliminates the creation of an additional rule:

  .cute-font {
     my-really-random-property: expression (
         style.fontFamily = 'Comic Sans MS',
         innerHTML + = 'It Works!',
         runtimeStyle.cssText + = 'my-really-random-property: expression ("")! important;'
     );
 } 

As you can see, we simply append the reset of this property directly to the same rule! ! important I added there already, on the advice of tenshi , although in this situation it would be useless for IE6: D
Pavel, by the way, does not have an account on Habré, and it would be great if someone sent him an invite (for this write me and I will give you his e-mail).