Сис­те­ма­ти­за­ция экс­преш­нов

Неболь­шой dis­claimer: ис­поль­зуй­те на­пиль­ник, по­жа­луй­ста, —прак­ти­че­ски все­гда в экс­преш­нах надо что-либо до­пилить!

Исправ­ле­ние по­лу­про­зрач­ных png

Тупо фильтр

* HTML .png-crop {
    back­ground-im­age:none;
    zoom:1;
    fil­ter:progid:DX­Im­age­Trans­form.Mi­crosoft.Al­phaIm­age­Loader(src="ololo.png", siz­ing­Method="crop");
    }

Ис­прав­ле­ние png с ме­то­дом crop (лёг­ким дви­же­ни­ем руки ме­ня­ет­ся на «scale»)

* HTML .png-crop {
    fil­ter:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.zoom = 1;
            t.run­timeStyle.fil­ter = 'progid:DX­Im­age­Trans­form.Mi­crosoft.Al­phaIm­age­Loader(src='+t.cur­rentStyle.back­groundIm­age.split('\"')[1]+', siz­ing­Method=crop)';
            t.run­timeStyle.back­groundIm­age = 'none';
        }(this)
    );
    }

Ис­прав­ле­ние png для <img />, не ну­жен про­зрач­ный гиф. при­мер.

* HTML IMG {
    _vis­i­bil­ity:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.vis­i­bil­ity = 'hid­den';
            var png = doc­u­ment.cre­ateEle­ment('png');
            png.style.css­Text = 'zoom:1;fil­ter:progid:DX­Im­age­Trans­form.Mi­crosoft.Al­phaIm­age­Loader(src=' + t.src + ',siz­ing­Method=scale);';
            png.ap­pend­Child(t.re­pla­ceN­ode(png));
            if (png.par­entN­ode.getAt­tribute('href')) {
                var pngclick = doc­u­ment.cre­ateEle­ment('pngclick');
                pngclick.style.css­Text = 'po­si­tion:ab­solute;over­flow:hid­den;width:ex­pres­sion(run­timeStyle.width = par­entN­ode.off­setWidth);height:ex­pres­sion(run­timeStyle.height = par­entN­ode.off­setHeight);';
                t.par­entN­ode.in­sert­Be­fore(pngclick,t);
            }
        }(this)
    );
    }

Мини­маль­ные/​​мак­си­маль­ные ши­ри­ны/​​вы­соты

Толь­ко max-width, бе­рёт­ся из эле­мен­та, толь­ко пик­се­ли (воз­мож­но, сто­ит до­ба­вить про­вер­ку на из­ме­не­ние ши­ри­ны са­мо­го эле­мен­та). при­мер.

.maxwidth {
    zoom:1;
    maxwidth:ex­pres­sion(
        func­tion(t){
            var w = t.par­entN­ode.scroll­Width;
            if (w != t.w) {
                t.w = w;
                var max = par­seInt(t.cur­rentStyle['max-width'], 10);
                t.style.width = 'auto';
                if (t.scroll­Width > max) {
                    t.style.width = max;
                }
            }
        }(this)
    );
    }

min-width для BODY, бе­рёт­ся из свой­ства, толь­ко пик­се­ли (stan­dards-mode only (пока)) (+надо до­ба­вить ке­ши­ру­е­мость зна­че­ния —что­бы пе­ре­за­пи­сы­вать его толь­ко если ме­ня­ет­ся).

* HTML BODY
{
    zoom:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.zoom = 1;
            var max = par­seInt(t.cur­rentStyle['min-width'], 10);
            var f = func­tion() {
                var w = doc­u­ment.doc­u­mentEle­ment.clien­tWidth;
                if (w != t.w) {
                    t.w = w;
                    if (w < max) {
                        t.style.width = max;
                    } else {
                        t.style.width = 'auto';
                    }
                }
            };
            f();
            win­dow.at­tachEvent('on­re­size',f);
        }(this)
    );
}

Max-width/​​max-height, толь­ко пик­се­ли, од­но­ра­зовый.

IMG {
    zoom:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.zoom = 1;
            var maxW = par­seInt(t.cur­rentStyle['max-width'], 10);
            var maxH = par­seInt(t.cur­rentStyle['max-height'], 10);
            if (t.scroll­Width > maxW && t.scroll­Width >= t.scroll­Height) {
                t.style.width = maxW;
            } else if (t.scroll­Height > maxH) {
                t.style.height = maxH;
            }
        }(this)
    );
    }

Пози­ци­о­ни­ро­вание

Ре­а­ли­за­ция пра­виль­но­го аб­со­лют­но­го по­зи­ци­о­ни­ро­ва­ния (left+right/​​top+bot­tom), го­то­во для «px» и «%», надо те­сти­ро­вать и по­ста­вить про­вер­ку на вы­со­ту/​​ши­ри­ну (если мож­но). Мо­жет, до­ба­вить ис­прав­ле­ние для right/​​bot­tom при от­стут­ствии left/​​top?

* HTML .tblr {
    tblr:ex­pres­sion(
        func­tion (t) {
            func­tion to_px(in­put, dim) {
                re­turn in­put.match('%') ? Math.floor(dim / 100 * par­seInt(in­put, 10)) : par­seInt(in­put, 10);
            }
            var h = t.par­entN­ode.off­setHeight || t.par­entN­ode.par­entN­ode.off­setHeight;
            var w = t.par­entN­ode.off­setWidth || t.par­entN­ode.par­entN­ode.off­setWidth;
            var top = to_px(t.cur­rentStyle.top, h);
            var bot­tom = to_px(t.cur­rentStyle.bot­tom, h);
            var left = to_px(t.cur­rentStyle.left, w);
            var right = to_px(t.cur­rentStyle.right, w);

            if (t.h != h || t.top != top || t.bot­tom != bot­tom || t.w != w || t.left != left || t.right != right) {
                if (h >= 0 && top >= 0 && bot­tom >= 0) {
                    t.h = h;
                    t.top = top;
                    t.bot­tom = bot­tom;
                    t.style.height = h - (top + bot­tom) > 0 ? h - (top + bot­tom) : 0;
                }
                if (w >= 0 && left >= 0 && right >= 0) {
                    t.w = w;
                    t.left = left;
                    t.right = right;
                    t.style.width = w - (left + right) > 0 ? w - (left + right) : 0;
                }
            }
        }(this)
    );
    }

Фикс для уби­ра­ния тряс­ки в ие при фик­си­ро­ван­ном по­зи­ци­о­ни­ро­вании

* HTML {
    back­ground-im­age:url(about:blank);
    back­ground-at­tach­ment:fixed;
    }

Экс­прешн для ней­тра­ли­за­ции тряс­ки в ие при фик­си­ро­ван­ном по­зи­ци­о­ни­ро­вании

* HTML {
    _be­hav­ior:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.be­hav­ior = 'none';
            var style;
            if (t.cur­rentStyle.back­groundIm­age) {
                style = t.run­timeStyle;
            } else {
                var body = doc­u­ment.doc­u­mentEle­ment || doc­u­ment.body;
                if (body.par­entN­ode.cur­rentStyle.back­groundIm­age) {
                    style = body.par­entN­ode.run­timeStyle;
                }
            }
            if (style) {
                style.back­groundIm­age = 'url(about:blank)';
                style.back­groun­dAt­tach­ment = 'fixed';
            }
        }(this)
    );
    }

Пере­кры­тие се­лек­тов ай­фрей­мом при­мер

Ис­прав­ле­ние эле­мен­тов над се­лек­та­ми, надо бы сде­лать ва­ри­ант с от­сле­жи­ва­ни­ем со­сто­я­ния ис­ход­но­го эле­мен­та (ке­ши­ру­е­мый экс­прешн на дис­плей?)

.iframed {
    zoom:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.zoom = 1;
            t.in­ser­tAd­ja­cen­tHTML('be­fore­Be­gin','<iframe src="about:blank" style="po­si­tion:ab­solute;fil­ter:progid:DX­Im­age­Trans­form.Mi­crosoft.Al­pha(Opac­ity=0);opac­ity:0;padding:0;mar­gin:0;bor­der:0;ex­pres­sion:ex­pres­sion(func­tion(t){var L=t.nextSi­b­ling.off­setLeft;var T=t.nextSi­b­ling.off­set­Top;var W=t.nextSi­b­ling.off­setWidth;var H=t.nextSi­b­ling.off­setHeight;if(t.L!=L||t.T!=T||t.W!=W||t.H!=H){            t.run­timeStyle.left=t.L=L;t.run­timeStyle.top=t.T=T;t.run­timeStyle.width=t.W=W;t.run­timeStyle.height=t.H=H;}}(this));"></​​iframe>')
        }(this)
    );
    }

Рас­тя­ги­ва­ние вы­соты

Вы­со­та: 100%

.height100 {
    po­si­tion:ab­solute;
    stretch:ex­pres­sion(
        func­tion(t){
            var h = t.par­entN­ode.off­setHeight;
            if (t.h != h) {
                t.style.height = t.h = h;
            }
        }(this)
    );
    }

Opacity!

Увы, вось­мой ие дол­жен ра­бо­тать в ре­жи­ме седь­мого.

.opac­ity {
    fil­ter:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.fil­ter = 'progid:DX­Im­age­Trans­form.Mi­crosoft.Al­pha(opac­ity=' + t.cur­rentStyle.opac­ity * 100 + ')';
        }(this)
    );
    }

А если надо без экс­преш­нов и в вось­мом, надо тупо вот так:

.opac­ity {
    -ms-fil­ter:"progid:DX­Im­age­Trans­form.Mi­crosoft.Al­pha(Opac­ity=0)";
    fil­ter:progid:DX­Im­age­Trans­form.Mi­crosoft.Al­pha(Opac­ity=0);
    opac­ity:0;
    }

Раз­мер шриф­та в за­ви­си­мо­сти от dpi

При­ме­ня­ем для BODY, пе­ре­опре­де­ляя стан­дарт­ную ве­ли­чи­ну (на са­мом деле, надо бы брать и пар­сить эту ве­ли­чи­ну, а не хард­ко­дить, по-хо­ро­ше­му-то)

BODY {
    font-size:ex­pres­sion(
        func­tion(t){
            if (screen.de­viceXDPI == screen.log­i­calXDPI) {
                t.run­timeStyle.font­Size = 6000/​​screen.log­i­ca­lY­DPI + '%';
            } else {
                t.run­timeStyle.font­Size = '62.5%';
            }
        }(this)
    );
    }

Реа­ли­за­ция про­сто­го счёт­чи­ка при­мер

Всем бра­у­зе­рам от­да­ём:

.list {
    counter-re­set:list_item;
    }
    .list-item {
        dis­play:block;
        }
        .list-item:be­fore,
        .list-item-be­fore {
            con­tent:counter(list_item);
            counter-in­cre­ment:list_item;
            }

А толь­ко для ие:

.list-item {
    list-style-type:ex­pres­sion(
        func­tion(t){
            t.run­timeStyle.list­Style­Type = 'none';
            t.in­ser­tAd­ja­cen­tHTML('af­ter­Be­gin','<span class="list-item-be­fore">' + (++t.par­entN­ode.IEcounter || (t.par­entN­ode.IEcounter = 1)) + '</​​span>');
        }(this)
    );
    }

Эму­ля­ции псев­до­клас­сов при­мер

Эму­ля­ция :hover

* HTML .some-block {
    _be­hav­ior: ex­pres­sion(
        func­tion(t, hov­er­Class){
            t.run­timeStyle.be­hav­ior = 'none';
            hov­er­Class = hov­er­Class || t.class­Name ? t.class­Name.re­place(/([^\​​s]+)/​​g,'$1_hover') : 'hover';
            t.at­tachEvent('on­mouseover',func­tion() {
                t.class­Name += (' ' + hov­er­Class);
            });
            t.at­tachEvent('on­mouse­out',func­tion() {
                t.class­Name = t.class­Name.re­place(new Reg­Exp(' ' + hov­er­Class,'g'), '');
            });
        }(this)
    );
    }

Эму­ля­ция :focus

* HTML .type-text {
    _be­hav­ior: ex­pres­sion(
        func­tion(t, fo­cus­Class){
            t.run­timeStyle.be­hav­ior = 'none';
            fo­cus­Class = fo­cus­Class || t.class­Name ? t.class­Name.re­place(/([^\​​s]+)/​​g,'$1_­fo­cus') : 'fo­cus';
            t.at­tachEvent('on­fo­cus',func­tion() {
                t.class­Name += (' ' + fo­cus­Class);
            });
            t.at­tachEvent('on­blur',func­tion() {
                t.class­Name = t.class­Name.re­place(new Reg­Exp(' ' + fo­cus­Class,'g'), '');
            });
        }(this)
    );
    }

Эму­ля­ция :target

#Some­Block {
    be­hav­ior: ex­pres­sion(
        func­tion(t, tar­get­Class){
            if (t.id) {
                var hash = win­dow.lo­ca­tion.hash;
                if (!t.tar­get­Class) {
                    t.tar­get­Class = tar­get­Class || t.class­Name ? t.class­Name.re­place(/([^\​​s]+)/​​g,'$1_­tar­get') : 'tar­get';
                }
                if (t.lastHash != hash) {
                    t.lastHash = hash;
                    if ("#"+t.id == hash) {
                        t.class­Name += (' ' + t.tar­get­Class);
                    } else {
                        t.class­Name = t.class­Name.re­place(new Reg­Exp(' ' + t.tar­get­Class,'g'), '');
                    }
                }
            } else {
                t.run­timeStyle.be­hav­ior = 'none';
            }
        }(this)
    );
    }

Бла­го­дар­ности