Unlimited IE one-time CSS expressions

    In support of the days of CSS expressions Habré

    I think everyone who faced with the decision of what some problems in IE <8 knows about CSS expressions and about the "disposable» CSS expressions, which are applied to the element only once, thereby creating a constant load on the processor . This is usually solved as follows:
    .my-class {
        behavior: expression (someMagick (), runtimeStyle.behavior = 'none');
    }

    In order to use more properties besides behavior, they usually use some kind of “useless” properties, or properties that expression influences.

    But what if we do not know how many and what properties will be and cannot control it (do not ask me why and why)? In addition to this, an element may 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 available through runtimeStyle, where they can be redefined; unrealistic (invented) properties through runtimeStyle are not available, but read-only in currentStyle, which is pretty useless in cases with one-time expressions (although there may be some benefit from this, but this is a separate topic).

    From this it is not difficult to guess what the task sounds like: to find a way to redefine non-existent properties.

    Initially, we were given:
    .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 occurred to me was to give the element an additional 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 suggests:
    .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 empty it was ignored! Therefore, we add the simplest expression, which does not load the processor in any way:
    .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 verify, we change the code in this way:
    .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 ('');
    }

    CPU usage when the page is active (moving a mouse, scrolling, resizing a window) is no different from loading a processor on the same page without expressions at all with 100 elements, I did not check anymore, because with working (not one-time) expressions loading is noticeable.

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

    UPD: Pavel Volodko wrote to me in the mail and proposed an improved solution that eliminates the need to create 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 are simply adding the zeroing of this property directly to the same rule! ! important I already added there, on the advice of tenshi , although in this situation for IE6 this will be useless: 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).

    Also popular now: