Előző bejegyzésben odáig jutottunk, hogy az elkészült CSS fájlban az összes szín a megadott alapszín szerint változott. Hátra vannak még a képek: a hivatkozások rendbetétele, régi IE esetén háttérképekkel helyettesítjük a CSS3 hiányosságokat, végül át kell színezni még néhány ikont...
Témák I.
2012.05.19. 12:38 stack
Eddig nem sokat foglalkoztam témák készítésével, úgy döntöttem rászánok néhány órát és megvizsgálom a lehetőségeket. Inspirálónak egy slideshow: Theming and Sass, illetve a Sencha telepítési útmutatója: Learn: Theming
Szólj hozzá!
Címkék: css theme
HtmlEditor.contentsCss
2012.05.03. 20:00 stack
Nem vagyok meggyőződve, hogy az ExtJS beépített HTML editorra a témában a legjobb választás lenne. Ám legtöbb esetben úgyis csak arra van szükségünk, hogy egyszerű szövegmódosításokat végezhessünk vagy átkapcsolhassunk forrás nézetbe és ott szerkeszthessünk, erre meg maximálisan megfelel.
Egyedül az hiányzik, hogy nem adhatok hozzá külön CSS fájlokat, vagyis adhatok, de ehhez felül kell írni a getDocMarkup függvényt:
{
xtype: 'htmleditor',
fieldLabel: 'Leírás',
name: 'description',
getDocMarkup: function () {
return '<html><head><link type="text/css" rel="stylesheet" href="css/style.css" /></head><body class="html-editor"></body></html>';
}
}
xtype: 'htmleditor',
fieldLabel: 'Leírás',
name: 'description',
getDocMarkup: function () {
return '<html><head><link type="text/css" rel="stylesheet" href="css/style.css" /></head><body class="html-editor"></body></html>';
}
}
Az eredeti függvényben a body style-nak adtak értéket, de én ezt megadom inkább body.html-editor kezdetű szabályokkal a hozzáadott CSS fájlban.
Szólj hozzá!
Címkék: css htmleditor
CSS Lint
2012.03.19. 08:19 stack
Nemrég eljátszottam egy kicsit a CSS Lint parancssoros meghívásával. Hasznos eszköz, így mindenkinek bátran ajánlom! Két szépséghiba volt csupán. Az első, hogy a szabályoknál nem lehet használni feketelistát, azaz ha van 30 szabály, és abból nekem csupán 1 nem kell, akkor kénytelen vagyok 29-et felsorolni.
Szólj hozzá!
Címkék: css lint
...
2011.10.06. 18:26 stack
Firefox 7 telepítése után meglepve láttam, hogy az egyik táblázatomban az ikonok helyén három darab pont volt csak látható. Először azt hittem, hogy a képekkel van valami probléma, majd kis vizsgálat után észrevettem, hogy már a Firefox is ismeri a text-overflow: ellipsis; CSS szabályt.
Ennek örülünk, a méretezést meg pontosítani kell mindenhol... :)
Szólj hozzá!
Címkék: css
font-family
2011.04.15. 19:24 stack
Nemrég játszottam egy kicsit a Google Web Fonts rendszerrel.
Egyszerű és nagyszerű technológia. :)
Sajnos szembesülnöm kellett azzal, hogy a különböző böngészők a font-family értékét JavaScript-ben nem ugyanúgy kezelik. Főleg, ha az adott betűkészlet még nincs is betöltve.
Egy egyszerű CSS szabály:
.mountains {
font-family: 'Mountains of Christmas',arial,serif;
}
font-family: 'Mountains of Christmas',arial,serif;
}
Két lekérés. Az első elem a fenti CSS osztályt kapja meg, a másik elem style-ból kapja meg ugyanazt.
var el1 = Ext.getBody().createChild({
cls: 'mountains'
});
var el2 = Ext.getBody().createChild({
style: "font-family: 'Mountains of Christmas',arial,serif;"
});
Ext.getBody().createChild({
tag: 'pre',
html: el1.getStyle('font-family') + "\n" +
el2.getStyle('font-family')
});
cls: 'mountains'
});
var el2 = Ext.getBody().createChild({
style: "font-family: 'Mountains of Christmas',arial,serif;"
});
Ext.getBody().createChild({
tag: 'pre',
html: el1.getStyle('font-family') + "\n" +
el2.getStyle('font-family')
});
Eredmények:
Szólj hozzá!
Címkék: css fonts
:nth-child(...)
2010.07.09. 16:49 stack
A W3C által alkotott pseudo-class -ok közül talán az egyik legérdekesebb a nth-child, tényleg sok mindent tud. :) Ám sajnos az Ext kódjában némileg hibásan van megírva. Összedobtam egy rövid példaalkalmazást arra, hogy milyen paraméterekkel, miként viselkedik:
http://stack.hu/extjs/nth_child.php
Zöld keret az Ext, világos zöld háttér a böngésző kiválasztása, hát... tényleg nem mindenhol egyezik. :(
Szólj hozzá!
Címkék: css pseudo nth child
maskCls
2009.12.11. 23:43 stack
A mask függvény második paramétere határozza meg, hogy milyen stílusban jelenjen meg maszkolás közben a várakozó szöveg. A legtöbb ExtJS komponens az 'x-mask-loading' CSS osztályt alkalmazza, de néhány soros egyszerű CSS szabállyal könnyedén lecserélhető a várakozó animációhoz tartozó kép, illetve az elrendezés.
Szólj hozzá!
Címkék: css mask
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);
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)
2 komment
Címkék: css
Bicubic scale
2009.09.27. 00:23 stack
Végén még kiderül, hogy az IE is jó böngésző, csak ennek az ellenkezője az alapértelmezett beállítása. :)
IE 6-7 a képek átméretezését elég ratyi módon oldja meg, de egy css szabály ezen segít:
img {
-ms-interpolation-mode: bicubic;
}
-ms-interpolation-mode: bicubic;
}
Most komolyan, ki találhatta ki, hogy ne ez legyen az alapértelmezett beállítás?
Hogy konkrétan mi a különbség azt itt megnézheted.
