Dinamikus CSS szabályok

2009.10.10. 23:53 stack

Ha olyan komponenst gyártunk, amelyhez legfeljebb 2 vagy 3 CSS szabály tartozik, akkor joggal megfordul az ember fejében, hogy ehhez felesleges külön .js és külön .css fájl. Azt a néhány szabályt dinamikusan is hozzá lehetne adni a rendszerhez. Teljesítmény csökkenésről szerintem értelmetlen beszélni, ellenben átláthatóbbá válna a komponensünk, ha a hozzá tartozó részek egy helyen lennénk. (természetesen a különválasztást továbbra is megtartva). És nem utolsó sorban, ha a szerver oldali keretrendszer nem kezeli külön, akkor oldalletöltésnél kevesebb kérés menne a szerverhez.

A triviális megoldás az lenne, hogy:

var style = 'body {color: blue; font-weight: bold; padding: 10px;}';
Ext.util.CSS.createStyleSheet(style);

Ám ezzel az a probléma, hogy nem definiálható CSS-sel felül. (és most IE miatt tekintsünk el az !important-tól, vagy képzeljünk oda olyan CSS szabályokat, amelyek használnak !important-ot)

Tehát, olyasmit szeretnénk, mintha a HEAD tag végén lenne néhány szabály, amelyek felüldefiniálhatnák a JS-sel készített szabályokat.

<style type="text/css"><!--
body {
    color: red;
}
--></style>

Ha visszatérünk az eredeti problémához, hogy két fájlunk van, és a CSS fájlt közvetlenül az ext-all.css után illesztenénk be, akkor adja magát a második verzió:

Ext.DomHelper.insertAfter(Ext.select('link[href*=ext-all.css]').first(), {
    tag: 'style',
    type: 'text/css',
    html: style
});

Szó szerint a következőt csináljuk: megkeressük az ext-all.css –t és utána betesszük az új stíluslapot a DOM-ba. Ötletnek jó volt, de IE alatt nem történik semmi.
Így akkor, a megoldást végül az adta, hogy egy már létező stíluslaphoz adjuk hozzá az új szabályokat:

Ext.each(document.styleSheets, function(sheet)  {
    if (sheet.href && sheet.href.match(/ext-all.css/))  {
        if (Ext.isIE)  {
            sheet.cssText += style;
        } else {
            sheet.insertRule(style, sheet.cssRules.length);
        }
    }
});

Megnézheted itt, meg itt illetve itt a különböző verziók viselkedését.

2 komment

Címkék: css

A bejegyzés trackback címe:

https://extjs.blog.hu/api/trackback/id/tr21441594

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

stack 2009.10.27. 14:53:53

Ez most negatív, vagy pozitív megjegyzés? :)

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?

süti beállítások módosítása