OSDN Git Service

Version 0.6.106, bugfix for X.EventDispatcher, cleanup X.Node, Image JSONP for Opera1...
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 06_XNodeCSS.js
index 5fbe5f2..f0f3309 100644 (file)
@@ -7,9 +7,8 @@
  * 
  * use X.Dom.Event
  */
-X.Dom.Style = {
-       
-       Type : {
+var
+X_Node_CSS_Type = {
                LENGTH            : 1,
                PERCENT           : 2,
                COLOR             : 2 < 2,
@@ -26,7 +25,7 @@ X.Dom.Style = {
                COMBI             : 2 < 13
        },
        
-       UNIT : {
+X_Node_CSS_UNIT = {
                'px'   : 0,
                'em'   : 1,
                'cm'   : 2,
@@ -42,13 +41,12 @@ X.Dom.Style = {
        },
        
        /* font-size -> fontSize */
-       _DICTIONARY_CAMELIZE : {},
+X_Node_CSS__DICTIONARY_CAMELIZE = {},
        
-       camelize : function( cssProp ){
-               var me  = X.Dom.Style,
-                       parts, l, i, camelized;
+X_Node_CSS_camelize = function( cssProp ){
+               var parts, l, i, camelized;
                
-               if( camelized = me._DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
+               if( camelized = X_Node_CSS__DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
                parts = cssProp.split( ' ' ).join( '' ).split( '-' );
                l     = parts.length;
                if( l === 1 ) return parts[ 0 ];
@@ -60,28 +58,27 @@ X.Dom.Style = {
                for( i = 1; i < l; ++i ){
                        camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
                };
-               return me._DICTIONARY_CAMELIZE[ cssProp ] = camelized;
+               return X_Node_CSS__DICTIONARY_CAMELIZE[ cssProp ] = camelized;
        },
        
        /* fontSize -> font-size */
-       CHAR_CODE_A : 'A'.charCodeAt( 0 ),
+X_Node_CSS_CHAR_CODE_A = 'A'.charCodeAt( 0 ),
        
-       _DICTIONARY_UNCAMELIZE : {},
+X_Node_CSS__DICTIONARY_UNCAMELIZE = {},
        
-       uncamelize : function( str ){
-               var me  = X.Dom.Style,
-                       A   = me.CHAR_CODE_A,
-                       Z   = A + 25,
-                       uncamelized, l, chr, code;
+X_Node_CSS_uncamelize = function( str ){
+               var A = X_Node_CSS_CHAR_CODE_A,
+                       Z = A + 25,
+                       uncamelized, l, chr, code, i;
                str = str.split( ' ' ).join( '' );
-               if( uncamelized = me._DICTIONARY_UNCAMELIZE[ str ] ) return uncamelized;
+               if( uncamelized = X_Node_CSS__DICTIONARY_UNCAMELIZE[ str ] ) return uncamelized;
                uncamelized = '';
                for( i = 0, l = str.length; i < l; ++i ){
                        chr = str.charAt( i );
                        code = chr.charCodeAt( 0 );
                        uncamelized += ( A <= code && code <= Z ) ? '-' + chr : chr;
                };
-               return me._DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
+               return X_Node_CSS__DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
        },
        
 /*
@@ -111,15 +108,14 @@ _ABSOLUTE_BOX
 _FLOAT_BOX
 _GRNERAL
  */
-       VENDER_PREFIX : {},
+X_Node_CSS_VENDER_PREFIX = {},
 
-       objToCssText : function( obj ){
+X_Node_CSS_objToCssText = function( obj ){
                var css           = [],
-                       me            = X.Dom.Style,
-                       uncamelize    = me.uncamelize,
-                       VENDER_PREFIX = me.VENDER_PREFIX,
-                       FIX_PROP      = me.SPECIAL_FIX_PROP,
-                       SPECIAL_FIX   = me.SPECIAL_FIX,
+                       uncamelize    = X_Node_CSS_uncamelize,
+                       VENDER_PREFIX = X_Node_CSS_VENDER_PREFIX,
+                       FIX_PROP      = X_Node_CSS_SPECIAL_FIX_PROP,
+                       SPECIAL_FIX   = X_Node_CSS_SPECIAL_FIX,
                        n             = -1,
                        p, v, name, sp;
                if( !obj ) return ''; // Opera7.5 未満?
@@ -136,18 +132,18 @@ _GRNERAL
                return css.join( ';' );
        },
        
-       IE_FILTER_FIX :
-               X.UA.IE && X.UA.IE < 9 && !X.UA.MacIE ?
+X_Node_CSS_IE_FILTER_FIX =
+               X_UA.IE && X_UA.IE < 9 && !X_UA.MacIE ?
                        {
                                opacity : 1,
                                textShadow : 1
                        } :
-               9 <= X.UA.IE && X.UA.IE < 10 ? // == 9
+               9 <= X_UA.IE && X_UA.IE < 10 ? // == 9
                        {} :
                        {},
        
-       _UNIT_RATIO      : null,
-       _FONT_SIZE_RATIO : null,
+X_Node_CSS__UNIT_RATIO      = {},
+X_Node_CSS__FONT_SIZE_RATIO = {},
 
        //  https://developer.mozilla.org/en-US/docs/Web/CSS/transform
        //  Firefox 3.5, ie9, Opera 10.5, Safari 3.1, Chrome
@@ -161,7 +157,7 @@ _GRNERAL
        
        // ブラウザ毎の getComputedStyle の戻り値 http://d.hatena.ne.jp/uupaa/20080928/1222543331
 
-       COLOR : {
+X_Node_CSS_COLOR = {
                BLACK         : 0x0,
                RED           : 0xFF0000,
                LIME          : 0x00FF00,
@@ -244,7 +240,7 @@ _GRNERAL
                LEMONCHIFFON  : 0xFFFACD
        },
        
-       parseColor : function( x ){
+X_Node_CSS_parseColor = function( x ){
                var rgb, r, g, b;
                
                if( X.Type.isNumber( x ) ){
@@ -252,7 +248,7 @@ _GRNERAL
                } else
                if( !X.Type.isString( x ) ) return;
                
-               if( X.Type.isNumber( rgb = X.Dom.Style.COLOR[ x.toUpperCase() ] ) && 0x0 <= rgb && rgb <= 0xFFFFFF ){
+               if( X.Type.isNumber( rgb = X_Node_CSS_COLOR[ x.toUpperCase() ] ) && 0x0 <= rgb && rgb <= 0xFFFFFF ){
                        return rgb;
                } else
                if( x.charAt( 0 ) === '#' ){
@@ -302,7 +298,7 @@ _GRNERAL
                return isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : undefined;
        },
        
-       PARAMS : ( function(){
+X_Node_CSS_PARAMS = ( function(){
                var ret = {};
                register( ret.percent = {},
                        'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
@@ -336,12 +332,12 @@ _GRNERAL
                return ret;
        })(),
        
-       _CLIP_SEPARATOR : X.UA.IE && X.UA.IE < 8 ? ' ' : ',',
+X_Node_CSS__CLIP_SEPARATOR = X_UA.IE && X_UA.IE < 8 ? ' ' : ',',
        
        /*
         * 
         */
-       Property : X.Class.create(
+X_Node_CSS_Property = X.Class.create(
                'Property',
                X.Class.POOL_OBJECT,
                {
@@ -371,8 +367,8 @@ _GRNERAL
                                if( u !== 'px' ){
                                        this.value =
                                                u === 'em' ?
-                                                       v / this.xnode._getCharSize() :
-                                                       v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
+                                                       v / X_Node_CSS_getCharSize( this.xnode ) :
+                                                       v / ( X_Node_CSS__UNIT_RATIO[ u ] || 1 );
                                };
                        },
                        setValue: function( v ){
@@ -396,12 +392,12 @@ _GRNERAL
                                        u === 'px' ?
                                                v :
                                        ( u === 'em' || ( u === '' && this.name === 'lineHeight' ) ) ?
-                                               v * this.xnode._getCharSize() :
+                                               v * X_Node_CSS_getCharSize( this.xnode ) :
                                        // u === '%'
-                                               v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
+                                               v / ( X_Node_CSS__UNIT_RATIO[ u ] || 1 );
                        },
                        isValid: function(){
-                               var p = X.Dom.Style.PARAMS,
+                               var p = X_Node_CSS_PARAMS,
                                        n = this.name,
                                        v = this.value,
                                        u = this.unit,
@@ -422,7 +418,7 @@ _GRNERAL
        /**
         * backgroundPosition, clip
         */
-       PropertyGroup : X.Class.create(
+X_Node_CSS_PropertyGroup = X.Class.create(
                'PropertyGroup',
                X.Class.POOL_OBJECT,
                {
@@ -486,7 +482,7 @@ _GRNERAL
                                        ret[ ret.length ] = ps[ i ].getValueText();
                                };
                                if( this.name === 'clip' ){
-                                       return 'rect(' + ret.join( X.Dom.Style._CLIP_SEPARATOR ) + ')';
+                                       return 'rect(' + ret.join( X_Node_CSS__CLIP_SEPARATOR ) + ')';
                                };
                                return ret.join( ' ' );
                        },
@@ -512,7 +508,7 @@ _GRNERAL
         * ie67 では rgb() は background-color で反応しない、、、
         */
 
-       ColorProperty : X.Class.create(
+X_Node_CSS_ColorProperty = X.Class.create(
                'ColorProperty',
                X.Class.POOL_OBJECT, {
                        Constructor : function( name, x ){
@@ -522,7 +518,7 @@ _GRNERAL
                                        b   = 0,
                                        a   = 1,
                                        rgb;
-                               if( X.Type.isNumber( rgb = x ) || X.Type.isNumber( rgb = X.Dom.Style.COLOR[ x.toUpperCase() ] ) ){
+                               if( X.Type.isNumber( rgb = x ) || X.Type.isNumber( rgb = X_Node_CSS_COLOR[ x.toUpperCase() ] ) ){
                                        r = ( rgb & 0xff0000 ) >> 16;
                                        g = ( rgb & 0xff00 ) >> 8;
                                        b = ( rgb & 0xff );
@@ -634,16 +630,15 @@ _GRNERAL
                                return this.r <= 255 && this.g <= 255 && this.b <= 255;
                        }
                }
-       ),
+       );
        
-       _getProperty : function( xnode, css, unit, p ){
+function X_Node_CSS__getProperty( xnode, css, unit, p ){
                
-               var XDomStyle     = X.Dom.Style,
-                       me            = XDomStyle._getProperty,
-                       PARAMS        = XDomStyle.PARAMS,
-                       PropertyGroup = XDomStyle.PropertyGroup,
-                       Property      = XDomStyle.Property,
-                       ColorProperty = XDomStyle.ColorProperty,
+               var me            = X_Node_CSS__getProperty,
+                       PARAMS        = X_Node_CSS_PARAMS,
+                       PropertyGroup = X_Node_CSS_PropertyGroup,
+                       Property      = X_Node_CSS_Property,
+                       ColorProperty = X_Node_CSS_ColorProperty,
                        name, width;
                
                if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){
@@ -659,7 +654,7 @@ _GRNERAL
                                    all;
                                        if( ret.isValid() === true ) return ret;
                                        ret.kill();
-                                       all = css[ p ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( XDomStyle._CLIP_SEPARATOR );
+                                       all = css[ p ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( X_Node_CSS__CLIP_SEPARATOR );
                                        return
                                                new PropertyGroup( 
                                                        p,
@@ -688,7 +683,7 @@ _GRNERAL
                                        _1  = all[ 1 ];
                                        _2  = all[ 2 ];
                                        _3  = all[ 3 ];
-                                       vu  = XDomStyle._splitValueAndUnit( _0 );
+                                       vu  = X_Node_CSS__splitValueAndUnit( _0 );
                                        v   = vu[ 0 ];
                                        u   = vu[ 1 ];
                                        switch( all.length ){
@@ -701,7 +696,7 @@ _GRNERAL
                                                case 2 :
                                                        top    = new Property( props[ 0 ], v, u, xnode );
                                                        bottom = new Property( props[ 2 ], v, u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _1 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _1 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        right  = new Property( props[ 1 ], v, u, xnode );
@@ -709,27 +704,27 @@ _GRNERAL
                                                        break;
                                                case 3 :
                                                        top    = new Property( props[ 0 ], v, u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _1 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _1 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        right  = new Property( props[ 1 ], v, u, xnode );
                                                        left   = new Property( props[ 3 ], v, u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _2 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _2 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        bottom = new Property( props[ 2 ], v, u, xnode );
                                                        break;
                                                case 4 :
                                                        top    = new Property( props[ 0 ], v, u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _1 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _1 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        right  = new Property( props[ 1 ], v, u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _2 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _2 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        bottom = new Property( props[ 2 ], v,u, xnode );
-                                                       vu     = XDomStyle._splitValueAndUnit( _3 );
+                                                       vu     = X_Node_CSS__splitValueAndUnit( _3 );
                                                        v      = vu[ 0 ];
                                                        u      = vu[ 1 ];
                                                        left   = new Property( props[ 3 ], v, u, xnode );
@@ -786,8 +781,8 @@ _GRNERAL
                                        if( ret.isValid() === true ) return ret;
                                        ret.kill();
                                        xy = css[ p ].split( ' ' );
-                                       x  = XDomStyle._splitValueAndUnit( xy[ 0 ] );
-                                       y  = XDomStyle._splitValueAndUnit( xy[ 1 ] );
+                                       x  = X_Node_CSS__splitValueAndUnit( xy[ 0 ] );
+                                       y  = X_Node_CSS__splitValueAndUnit( xy[ 1 ] );
                                        return
                                                new PropertyGroup(
                                                        p,
@@ -796,7 +791,7 @@ _GRNERAL
                                                );
                        };
                        // opacity, zindex, lineHeight
-                       vu = XDomStyle._splitValueAndUnit( css[ p ] );
+                       vu = X_Node_CSS__splitValueAndUnit( css[ p ] );
                        return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
                };
                var x = css[ p ], e, v, u;
@@ -812,73 +807,72 @@ _GRNERAL
                        if( p === 'left'   ) v = e.offsetLeft;
                        if( p === 'right'  ) v = e.offsetRight;
                        u = _getUnit( x, p );
-                       // alert( p + XDomStyle._Util.pxTo( v, u ) + u )
-                       return new Property( p, XDomStyle._Util.pxTo( v, u ), u, xnode );
+                       // alert( p + X_Node_CSS__Util.pxTo( v, u ) + u )
+                       return new Property( p, X_Node_CSS__Util.pxTo( v, u ), u, xnode );
                }; */
-               if( p === 'fontSize' && ( v = XDomStyle._FONT_SIZE_RATIO[ x ] ) ){ // xx-small 等
+               if( p === 'fontSize' && ( v = X_Node_CSS__FONT_SIZE_RATIO[ x ] ) ){ // xx-small 等
                        return new Property( p, v, 'px', xnode );
                };
                if( PARAMS.offset[ p ] || PARAMS.percent[ p ] || PARAMS.size[ p ] ){
-                       vu = XDomStyle._splitValueAndUnit( x );
+                       vu = X_Node_CSS__splitValueAndUnit( x );
                        return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
                };
 
                if( PARAMS.color[ p ] ) return new ColorProperty( p, x );
-       },
+       };
        
-       _splitValueAndUnit : function( v ){
+function X_Node_CSS__splitValueAndUnit( v ){
                var num, _num, u;
                if( X.Type.isNumber( v ) ) return [ v || 0, '' ];
                if( isNaN( num = parseFloat( v ) ) ) return [ 0, '' ];
                _num = '' + num;
                if( _num.indexOf( '0.' ) === 0 ) _num = _num.slice( 1 );
                u = v.substr( v.indexOf( _num ) + _num.length );
-               return [ num, X.Dom.Style.UNIT[ u ] ? u : 'px' ];
-       }
-};
+               return [ num, X_Node_CSS_UNIT[ u ] ? u : 'px' ];
+       };
 
-X.Dom.Style._GET_VALUE_WITH_UNIT = {
-       borderWidth  : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
-       //borderStyle  : X.Dom.Style.Type.QUARTET,
-       borderRadius : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
-       margin       : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
-       padding      : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
-       clip         : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
+var X_Node_CSS__GET_VALUE_WITH_UNIT = {
+       borderWidth  : X_Node_CSS_Type.QUARTET | X_Node_CSS_Type.LENGTH,
+       //borderStyle  : X_Node_CSS_Type.QUARTET,
+       borderRadius : X_Node_CSS_Type.QUARTET | X_Node_CSS_Type.LENGTH,
+       margin       : X_Node_CSS_Type.QUARTET | X_Node_CSS_Type.LENGTH  | X_Node_CSS_Type.PERCENT,
+       padding      : X_Node_CSS_Type.QUARTET | X_Node_CSS_Type.LENGTH  | X_Node_CSS_Type.PERCENT,
+       clip         : X_Node_CSS_Type.QUARTET | X_Node_CSS_Type.LENGTH  | X_Node_CSS_Type.PERCENT,
        
-       backgroundColor    : X.Dom.Style.Type.COLOR,
-       backgroundPosition : X.Dom.Style.Type.COMBI,
+       backgroundColor    : X_Node_CSS_Type.COLOR,
+       backgroundPosition : X_Node_CSS_Type.COMBI,
        
        // boxShadow
        
-       fontSize      : X.Dom.Style.Type.LENGTH,
-       lineHeight    : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.NUMERICAL,
-       textIndent    : X.Dom.Style.Type.LENGTH,
-       letterSpacing : X.Dom.Style.Type.LENGTH,
-       wordSpacing   : X.Dom.Style.Type.LENGTH,
+       fontSize      : X_Node_CSS_Type.LENGTH,
+       lineHeight    : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT | X_Node_CSS_Type.NUMERICAL,
+       textIndent    : X_Node_CSS_Type.LENGTH,
+       letterSpacing : X_Node_CSS_Type.LENGTH,
+       wordSpacing   : X_Node_CSS_Type.LENGTH,
        /*
-       textShadowColor   : X.Dom.Style.Type.COLOR,
-       textShadowOffsetX : X.Dom.Style.Type.LENGTH,
-       textShadowOffsetY : X.Dom.Style.Type.LENGTH,
-       textShadowBlur    : X.Dom.Style.Type.LENGTH, */
+       textShadowColor   : X_Node_CSS_Type.COLOR,
+       textShadowOffsetX : X_Node_CSS_Type.LENGTH,
+       textShadowOffsetY : X_Node_CSS_Type.LENGTH,
+       textShadowBlur    : X_Node_CSS_Type.LENGTH, */
        
-       width         : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
-       height        : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+       width         : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
+       height        : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
        
-       left          : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
-       top           : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
-       bottom        : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
-       right         : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+       left          : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
+       top           : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
+       bottom        : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
+       right         : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
        
        // table
-       borderSpacing : X.Dom.Style.Type.LENGTH
+       borderSpacing : X_Node_CSS_Type.LENGTH
 };
 
        
-X.Dom.Style.SPECIAL_FIX =
+var X_Node_CSS_SPECIAL_FIX =
        // ~IE8
-       X.UA.IE && X.UA.IE < 9 && !X.UA.MacIE?
+       X_UA.IE && X_UA.IE < 9 && !X_UA.MacIE?
                (function( obj ){
-                       var test    = X.Dom.Style.SPECIAL_FIX_PROP,
+                       var test    = X_Node_CSS_SPECIAL_FIX_PROP,
                                filters = [],
                                n       = -1,
                                p, id, v, dir;
@@ -896,7 +890,7 @@ X.Dom.Style.SPECIAL_FIX =
                                                // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
                                                // スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
                                                // shadow(color=#cccccc, strength=10, direction=135);
-                                               v = X.Dom.Style._getProperty( this, css, 'px', 'boxShadow' );
+                                               v = X_Node_CSS__getProperty( this, css, 'px', 'boxShadow' );
                                                dir = Math.atan2( v[ 1 ], v[ 0 ] ) * 180 / Math.PI + 90;
                                                dir += dir < 0 ? 360 : 0;
                                                filters[ ++n ] = 'shadow(color=' + v[ 4 ] + ',strength=' + v[ 3 ] + ',direction=' + dir + ')';
@@ -915,9 +909,9 @@ X.Dom.Style.SPECIAL_FIX =
                        return filters.join( ' ' );
                }) :
        // IE9 textShadow に filter を使用
-       X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
+       X_UA.IE && 9 <= X_UA.IE && X_UA.IE < 10 ?
                (function( obj ){
-                       var test    = X.Dom.Style.SPECIAL_FIX_PROP,
+                       var test    = X_Node_CSS_SPECIAL_FIX_PROP,
                                filters = [], p, id, v;
                        for( p in obj ){
                                if( !( id = test[ p ] ) ) continue;
@@ -931,7 +925,7 @@ X.Dom.Style.SPECIAL_FIX =
                        if( filters ) return filters.join( ' ' );
                }) :
                (function( obj ){
-                       var test    = X.Dom.Style.SPECIAL_FIX_PROP,
+                       var test    = X_Node_CSS_SPECIAL_FIX_PROP,
                                ret = [], p, id, v, bgpX, bgpY, clipT, clipB, clipL, clipR;
                        for( p in obj ){
                                if( !( id = test[ p ] ) ) continue;
@@ -973,17 +967,16 @@ X.Dom.Style.SPECIAL_FIX =
 // obj setter
 // name, value setter
 
-X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
-       var XDomStyle = X.Dom.Style,
-               args = arguments,
+Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
+       var args = arguments,
                css  = this._css,
                p, name, v, camelize, unit, ieFix;
        if( this._xnodeType !== 1 ) return this;
 // setter:object
        if( X.Type.isObject( nameOrObj ) ){
                if( !css ) css = this._css = {};
-               camelize = XDomStyle.camelize;
-               ieFix    = X.Dom.Style.IE_FILTER_FIX;
+               camelize = X_Node_CSS_camelize;
+               ieFix    = X_Node_CSS_IE_FILTER_FIX;
                for( p in nameOrObj ){
                        if( ieFix[ p ] ){
                                this._dirty |= X_Node_Dirty.IE_FILTER;
@@ -996,18 +989,18 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
                        };
                };
                this._dirty |= X_Node_Dirty.CSS;
-               this.parent && this._reserveUpdate();
+               this.parent && X_Node_reserveUpdate();
                delete this._cssText;
                return this;
        } else
        if( 1 < args.length ){
-               if( !XDomStyle.UNIT[ nameOrObj ] ){
+               if( !X_Node_CSS_UNIT[ nameOrObj ] ){
 // setter name, value
                        if( !css ) css = this._css = {};
-                       name = XDomStyle.camelize( nameOrObj );
+                       name = X_Node_CSS_camelize( nameOrObj );
                        v    = args[ 1 ];
                        if( css[ name ] === v ) return this;
-                       if( X.Dom.Style.IE_FILTER_FIX[ name ] ){
+                       if( X_Node_CSS_IE_FILTER_FIX[ name ] ){
                                this._dirty |= X_Node_Dirty.IE_FILTER;
                        };
                        if( !v && v !== 0 ){
@@ -1022,14 +1015,14 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
                                v === 'none' ? ( this._state |= X_Node_State.DISPLAY_NONE ) : ( this._state &= ~X_Node_State.DISPLAY_NONE );
                        };
                        // parent でなく this._root! でなくて this._state & in tree
-                       this.parent && this._reserveUpdate();
+                       this.parent && X_Node_reserveUpdate();
                        return this;
                };
 // getter unit
 // unit 付の値取得は fontSize と 画像サイズが確定していないと正確に取れない。内部のみにする?
                if( !css ) return;
-               if( !XDomStyle._GET_VALUE_WITH_UNIT[ name = XDomStyle.camelize( args[ 1 ] ) ] ) return null;
-               p = XDomStyle._getProperty( this, css, nameOrObj, name );
+               if( !X_Node_CSS__GET_VALUE_WITH_UNIT[ name = X_Node_CSS_camelize( args[ 1 ] ) ] ) return null;
+               p = X_Node_CSS__getProperty( this, css, nameOrObj, name );
                v = p.pxTo( nameOrObj );
                p.kill();
                return v;
@@ -1038,16 +1031,16 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
        if( !css ) return;
        // 集計 border, padding, margin, backgroundPosition, clip
        // border で正確なデータを返せない時は、null を返す
-       return css[ XDomStyle.camelize( nameOrObj ) ];
+       return css[ X_Node_CSS_camelize( nameOrObj ) ];
 };
 
-X.Dom.Node.prototype.cssText = function( v ){
+Node.prototype.cssText = function( v ){
        var obj, i, l, attr, name;
        if( v === '' ){
                delete this._css;
                this._state &= ~X_Node_State.IE5_DISPLAY_NONE_FIX;
                this._dirty |= X_Node_Dirty.CSS;
-               this.parent && this._reserveUpdate();
+               this.parent && X_Node_reserveUpdate();
                delete this._cssText;
                return this;
        } else
@@ -1063,7 +1056,7 @@ X.Dom.Node.prototype.cssText = function( v ){
                return this.css( obj );
        };
        // getter
-       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){
+       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X_Node_CSS_objToCssText( this._css ) ) ){
                delete this._cssText;
        };
        return this._cssText;
@@ -1074,93 +1067,85 @@ X.Dom.Node.prototype.cssText = function( v ){
  * TODO
  * body に css attr がセットされた場合には X_ViewPort_baseFontSize をクリア
  */
-
-X.Dom.Node.prototype._getCharSize =
+var
+X_Node_CSS_getCharSize =
        window.getComputedStyle ?
-               (function(){
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       if( this._fontSize ) return this._fontSize;
-                       return this._fontSize = parseFloat( getComputedStyle( this._rawObject, null ).fontSize );
+               (function( that ){
+                       X_Node_updateTimerID && X_Node_startUpdate();
+                       if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
+                       if( that._fontSize ) return that._fontSize;
+                       return that._fontSize = parseFloat( getComputedStyle( that._rawObject, null ).fontSize );
                }) :
 
        document.defaultView && document.defaultView.getComputedStyle ?
-               (function(){
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       if( this._fontSize ) return this._fontSize;
-                       return this._fontSize = parseFloat( document.defaultView.getComputedStyle( this._rawObject, null ).fontSize );
+               (function( that ){
+                       X_Node_updateTimerID && X_Node_startUpdate();
+                       if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
+                       if( that._fontSize ) return that._fontSize;
+                       return that._fontSize = parseFloat( document.defaultView.getComputedStyle( that._rawObject, null ).fontSize );
                }) :
 
-
-
-
-
-
-
-
-
-       5.5 <= X.UA.IE ?
-               (function(){
+       5.5 <= X_UA.IE ?
+               (function( that ){
                        var font, vu, v, u, _v;
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       if( this._fontSize ) return this._fontSize;
+                       X_Node_updateTimerID && X_Node_startUpdate();
+                       if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
+                       if( that._fontSize ) return that._fontSize;
                        
-                       font = this._rawObject.currentStyle.fontSize;
-                       //font = this._css && this._css.fontSize || '1em';
-                       vu   = X.Dom.Style._splitValueAndUnit( font );
+                       font = that._rawObject.currentStyle.fontSize;
+                       //font = that._css && that._css.fontSize || '1em';
+                       vu   = X_Node_CSS__splitValueAndUnit( font );
                        v    = vu[ 0 ];
                        u    = vu[ 1 ];
 
                        if( v === 0 ){
-                               if( v = X.Dom.Style._FONT_SIZE_RATIO[ font ] ) return this._fontSize = v;
+                               if( v = X_Node_CSS__FONT_SIZE_RATIO[ font ] ) return that._fontSize = v;
                        } else {
-                               if( _v = X.Dom.Style._UNIT_RATIO[ u ] ) return this._fontSize = v / _v;
+                               if( _v = X_Node_CSS__UNIT_RATIO[ u ] ) return that._fontSize = v / _v;
                        };
                        switch( u ){
                                case 'px' :
-                                       return this._fontSize = v;
+                                       return that._fontSize = v;
                                case 'em' :
                                // body まで辿ってしまった場合は?
-                                       if( this.parent ) return this._fontSize = this.parent._getCharSize() * v;
+                                       if( that.parent ) return that._fontSize = X_Node_CSS_getCharSize( that.parent ) * v;
                                        break;
                                case '%' :
                                // body まで辿ってしまった場合は?
-                                       if( this.parent ) return this._fontSize = this.parent._getCharSize() * v / 100;
+                                       if( that.parent ) return that._fontSize = X_Node_CSS_getCharSize( that.parent ) * v / 100;
                        };
                        return 0;
                }) :
        X_UA_DOM.W3C ?
-               (function(){
+               (function( that ){
                        var elm, v;
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       if( this._fontSize ) return this._fontSize;
+                       X_Node_updateTimerID && X_Node_startUpdate();
+                       if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
+                       if( that._fontSize ) return that._fontSize;
 
-                       this._rawObject.appendChild( elm = document.createElement( 'span' ) );
+                       that._rawObject.appendChild( elm = document.createElement( 'span' ) );
                        elm.style.cssText = 'display:block;position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;';
                        elm.innerHTML = 'X';
                        v = elm.offsetHeight;
-                       this._rawObject.removeChild( elm );
-                       return this._fontSize = v;
+                       that._rawObject.removeChild( elm );
+                       return that._fontSize = v;
                }) :
        X_UA_DOM.IE4 ?
-               (function(){
+               (function( that ){
                        var font, vu, v, u, _v;
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       if( this._fontSize ) return this._fontSize;
+                       X_Node_updateTimerID && X_Node_startUpdate();
+                       if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
+                       if( that._fontSize ) return that._fontSize;
                        
-                       if( this._css && ( font = this._css.fontSize ) ){
-                               vu = X.Dom.Style._splitValueAndUnit( font );
+                       if( that._css && ( font = that._css.fontSize ) ){
+                               vu = X_Node_CSS__splitValueAndUnit( font );
                                v  = vu[ 0 ];
                                u  = vu[ 1 ];
                                
                                if( v === 0 ){
-                                       if( _v = X.Dom.Style._FONT_SIZE_RATIO[ font ] ) return this._fontSize = _v;
+                                       if( _v = X_Node_CSS__FONT_SIZE_RATIO[ font ] ) return that._fontSize = _v;
                                } else {
-                                       if( _v = X.Dom.Style._UNIT_RATIO[ u ] ) return this._fontSize = v / _v;
+                                       if( _v = X_Node_CSS__UNIT_RATIO[ u ] ) return that._fontSize = v / _v;
                                };
                        } else {
                                v = 1;
@@ -1169,36 +1154,37 @@ X.Dom.Node.prototype._getCharSize =
 
                        switch( u ){
                                case 'px' :
-                                       return this._fontSize = v;
+                                       return that._fontSize = v;
                                case 'em' :
                                // body まで辿ってしまった場合は?
-                                       if( this.parent ) return this._fontSize = this.parent._getCharSize() * v;
+                                       if( that.parent ) return that._fontSize = X_Node_CSS_getCharSize( that.parent ) * v;
                                        break;
                                case '%' :
                                // body まで辿ってしまった場合は?
-                                       if( this.parent ) return this._fontSize = this.parent._getCharSize() * v / 100;
+                                       if( that.parent ) return that._fontSize = X_Node_CSS_getCharSize( that.parent ) * v / 100;
                        };
                        return 0;
                }) :
-               (function(){
-                       var elm, v;
-                       if( this === Node._body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
-                       Node._body._updateTimerID && Node._body._startUpdate();
-                       if( this._fontSize ) return this._fontSize;
-                       
-                       elm = this._rawObject || this._ie4getRawNode();
-                       elm.insertAdjacentHTML( 'BeforeEnd', '<span style="visivility:hidden;line-height:1;">X</span>' );
-                       elm = elm.children[ elm.children.length - 1 ];
-                       v   = elm.offsetHeight;
-                       elm.outerHTML = '';
-                       return this._fontSize = v * 0.75;
-               });
+               0;
+
+
+X.CSS = {
+       
+       VENDER_PREFIX : X_Node_CSS_VENDER_PREFIX,
+       
+       parseColor    : X_Node_CSS_parseColor,
+       
+       uncamelize    : X_Node_CSS_uncamelize
+};
+
+
 
+var X_Node_CSS_Support, X_Node_CSS_SPECIAL_FIX_PROP;
 
 ( function(){
-       var testStyle = X.UA.IE4 ? {} : ( document.documentElement || document.createElement( 'div' ) ).style,
+       var testStyle = X_UA.IE4 ? {} : ( document.documentElement || document.createElement( 'div' ) ).style,
                temp      = testStyle.cssText,
-               prefix    = X.Dom.Style.VENDER_PREFIX,
+               prefix    = X_Node_CSS_VENDER_PREFIX,
                vendors   = 'webkit,Webkit,Moz,moz,Ms,ms,O,o,khtml,Khtml'.split( ',' ),
                searches  = (
                        'opacity,boxSizing,' +
@@ -1228,15 +1214,15 @@ X.Dom.Node.prototype._getCharSize =
        
        testStyle.cssText = 'background:rgba(0,0,0,0.5)';
        
-       X.Dom.Style.Support = {
+       X.CSS.Support = X_Node_CSS_Support = {
                rgba : !!testStyle.background
        };
        
        testStyle.cssText = temp;
        
-       X.Dom.Style.SPECIAL_FIX_PROP =
+       X_Node_CSS_SPECIAL_FIX_PROP =
                // ~IE8
-               X.UA.IE < 9 && !X.UA.MacIE ?
+               X_UA.IE < 9 && !X_UA.MacIE ?
                        {
                                filter          : 1,
                                opacity         : 2//, uinode ChromeNode で行う
@@ -1245,7 +1231,7 @@ X.Dom.Node.prototype._getCharSize =
                                //backgroundImage : 5
                        } :
                // IE9
-               9 <= X.UA.IE && X.UA.IE < 10 ?
+               9 <= X_UA.IE && X_UA.IE < 10 ?
                        {
                                filter          : 1//,
                                //textShadow      : 1
@@ -1260,18 +1246,18 @@ X.Dom.Node.prototype._getCharSize =
                };
 } )();
 
-X.ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){
-       var xnode  = Node._systemNode,
-               output = X.Dom.Style._UNIT_RATIO = {},
+X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){
+       var xnode  = X_Node_systemNode,
+               output = X_Node_CSS__UNIT_RATIO,
                list   = 'cm,mm,in,pt,pc'.split( ',' ),
-               unit,size, base, i;
+               unit, size, base, i;
        
        for( i = list.length; i; ){
                unit = list[ --i ];
                output[ unit ] = xnode.css( 'width', 10 + unit ).width() / 10;
        };
 
-       output = X.Dom.Style._FONT_SIZE_RATIO = {},
+       output = X_Node_CSS__FONT_SIZE_RATIO,
        list   = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
        xnode.css( { lineHeight : '100%', height : '1em' } ).text( 'X' );