CSS-Expressions on DOMReady (CSS + JS in one file)

Probably many of you using css-expressions are faced with the problem of the periodic appearance of the message abort. People say that this is due to a change in the DOM tree until it is ready.



I also came across and, without hesitation, decided to write a small “wrapper” for expressions, which I often use, taking into account the readiness of the DOM, packaged in a style file.

Onuyu your attention and submit.

Using

A “library” is just one CSS file, but with JavaScript code included in it, which we invoke in expressions:

')

1. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */
2. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */
3. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */
4. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */
5. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */
6. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */

Connection

1. <! - [if lt IE 8]>
2. <script type = "text / javascript" src = "ie.min.css"> </ script>
3. <link rel = "stylesheet" type = "text / css" href = "ie.min.css" />
4. <! [endif] ->

Using

1. selector {
2. width : expression ( expressions ( 'emulated action' , this , {
3. property : 'send to cancel (usually identical to the one in which expression is called). If specified, the reset is reset and expression is not executed again. ' ,
4. options : 'options, depending on the action'
5. } ) ) ;
6. }

“Actions” are invoked when the DOM tree is ready. If expression is running after readiness, immediately.

Enabled functions (actions)

before

Adds a span element with the x-expression-pseudo-before class as the first child element.

The options parameter is a string that specifies the contents of the "pseudo-element".

after

Adds a span element with the x-expression-pseudo-after class as the last child element.

The options parameter is a string that specifies the contents of the "pseudo-element".

firsthild

Adds an x-expression-first-child class to an element if it is the first child of its parent. The before and after psevoelements generated by the library are skipped.

borderSpacing

Emulates the border-spacing via cellSpacing attribute.

The options parameter is the number set in the attribute.

attribute

1. {
2. name : 'attribute name' ,
3. value : 'attribute value'
4. }

The presence of an attribute with the name name is checked, and, if the value parameter is specified, its value.

If validation is passed, the classes x-expression-attribute , x-expression-attribute- name and x-expression-attribute- name - value are set .

width

Controls the minimum and maximum element widths. Data is taken from sv- min-width and max-width . For calculation, the parent element is used.

any

Runs an arbitrary function in the context of an element.

The options parameter is a function to be started.

A few examples

1. body {
2. width : expression ( expressions ( 'before' , this , { property : 'width' , options : 'aaa' } ) ) ;
3. height : expression ( expressions ( 'before' , this , { property : 'height' , options : 'bbb' } ) ) ; // Will not work
4. top : expression ( expressions ( 'after' , this , { property : 'top' , options : 'ccc' } ) ) ;
5. }
7. .a1 , .a2 {
8. width : expression ( expressions ( 'firstChild' , this , { property : 'width' } ) ) ;
9. }
11. table {
12. width : expression ( expressions ( 'borderSpacing' , this , { property : 'width' , options : '10' } ) ) ;
13. }
15. input {
16. height : expression ( expressions ( 'any' , this , { property : 'height' , options : function ( ) { this .runtimeStyle .backgroundColor = 'red' ; } } ) ) ;
17. width : expression ( expressions ( 'attribute' , this , { property : 'width' , options : { name : 'type' , value : 'text' } } ) ) ;
18. }
20. .min-max {
21. min-width : 400px ;
22. max-width : 700px ;
23. border : 10px solid red ;
24. top : expression ( expressions ( 'width' , this ) ) ;
25. padding : 10px ;
26. margin : 10px ;
27. }

PS

If anyone comes in handy, you can download it here.