OSDN Git Service

Version 0.6.107, cleanup X.NodeCSS, fix X.Node.Event for touch, add unescape for...
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 06_XNodeCSS.js
index f0f3309..8bb9256 100644 (file)
@@ -7,80 +7,56 @@
  * 
  * use X.Dom.Event
  */
-var
-X_Node_CSS_Type = {
-               LENGTH            : 1,
-               PERCENT           : 2,
-               COLOR             : 2 < 2,
-               U_DECIMAL         : 2 < 3,
-               NUMERICAL         : 2 < 4,
-               BOOLEAN           : 2 < 5,
-               QUARTET           : 2 < 6,
-               URL               : 2 < 7,
-               FONT_NAME         : 2 < 8,
-               TIME              : 2 < 9,
-               CONTENT           : 2 < 10,
-               LIST              : 2 < 11,
-               AUTO              : 2 < 12,
-               COMBI             : 2 < 13
-       },
+
+/* font-size -> fontSize */
+function X_Node_CSS_camelize( cssProp ){
+       var parts, l, i, parts0, camelized;
        
-X_Node_CSS_UNIT = {
-               'px'   : 0,
-               'em'   : 1,
-               'cm'   : 2,
-               'mm'   : 3,
-               'in'   : 4,
-               '%'    : 5,
-               'pct'  : 5,
-               'ms'   : 6,
-               's'    : 7,
-               '#'    : 8,
-               'rgb'  : 9,
-               'rgba' : 10
-       },
+       if( camelized = X_Node_CSS__DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
+       parts  = cssProp.split( ' ' ).join( '' ).split( '-' );
+       parts0 = parts[ 0 ];
+       l      = parts.length;
+       if( l === 1 ) return parts0;
+       
+       camelized = cssProp.charAt(0) === '-'
+         ? parts0.charAt( 0 ).toUpperCase() + parts0.substring( 1 )
+         : parts0;
        
+       for( i = 1; i < l; ++i ){
+               camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
+       };
+       return X_Node_CSS__DICTIONARY_CAMELIZE[ cssProp ] = camelized;
+};
+
+// TODO use X_HTMLParser_CHARS
+/* fontSize -> font-size */
+function X_Node_CSS_uncamelize( str ){
+       var A = X_Node_CSS_CHAR_CODE_A,
+               Z = A + 25,
+               uncamelized, l, chr, code, i;
+       str = str.split( ' ' ).join( '' );
+       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 X_Node_CSS__DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
+};
+
+var
+
+X_node_CSS_getComputedStyle = window.getComputedStyle || document.defaultView && document.defaultView.getComputedStyle,
+
        /* font-size -> fontSize */
 X_Node_CSS__DICTIONARY_CAMELIZE = {},
-       
-X_Node_CSS_camelize = function( cssProp ){
-               var parts, l, i, 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 ];
-               
-               camelized = cssProp.charAt(0) === '-'
-                 ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
-                 : parts[ 0 ];
-               
-               for( i = 1; i < l; ++i ){
-                       camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
-               };
-               return X_Node_CSS__DICTIONARY_CAMELIZE[ cssProp ] = camelized;
-       },
-       
+
        /* fontSize -> font-size */
 X_Node_CSS_CHAR_CODE_A = 'A'.charCodeAt( 0 ),
        
 X_Node_CSS__DICTIONARY_UNCAMELIZE = {},
        
-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 = 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 X_Node_CSS__DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
-       },
-       
 /*
  * CSS における display, position, float プロパティの相互関係
  * http://d.hatena.ne.jp/elm200/20080201/1201874740
@@ -109,38 +85,8 @@ _FLOAT_BOX
 _GRNERAL
  */
 X_Node_CSS_VENDER_PREFIX = {},
-
-X_Node_CSS_objToCssText = function( obj ){
-               var css           = [],
-                       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 未満?
-               for( p in obj ){
-                       // TODO Object が拡張されていると error...
-                       name = uncamelize( VENDER_PREFIX[ p ] || p );
-                       if( FIX_PROP[ name ] ){
-                               sp = true;
-                       } else {
-                               css[ ++n ] = [ name, obj[ p ] ].join( ':' );
-                       };
-               };
-               sp && ( css[ ++n ] = 'filter:' + SPECIAL_FIX( obj ) );
-               return css.join( ';' );
-       },
        
-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
-                       {} :
-                       {},
+X_Node_CSS__CLIP_SEPARATOR = X_UA.IE < 8 ? ' ' : ',',
        
 X_Node_CSS__UNIT_RATIO      = {},
 X_Node_CSS__FONT_SIZE_RATIO = {},
@@ -238,692 +184,259 @@ X_Node_CSS_COLOR = {
                MISTYROSE     : 0xFFE4E1,
                IVORY         : 0xFFFFF0,
                LEMONCHIFFON  : 0xFFFACD
-       },
+};
        
-X_Node_CSS_parseColor = function( x ){
-               var rgb, r, g, b;
-               
-               if( X.Type.isNumber( x ) ){
-                       return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : undefined;
-               } else
-               if( !X.Type.isString( x ) ) return;
-               
-               if( X.Type.isNumber( rgb = X_Node_CSS_COLOR[ x.toUpperCase() ] ) && 0x0 <= rgb && rgb <= 0xFFFFFF ){
-                       return rgb;
-               } else
-               if( x.charAt( 0 ) === '#' ){
-                       switch( x.length ){
-                               case 7 :
-                                       r = parseInt( x.substr( 1, 2 ), 16 );
-                                       g = parseInt( x.substr( 3, 2 ), 16 );
-                                       b = parseInt( x.substr( 5, 2 ), 16 );
-                                       break;
-                               case 4 :
-                                       r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
-                                       g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
-                                       b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
-                                       break;
-                               case 2 :
-                                       r = g = b = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
-                                       break;
-                               default :
-                                       return;                                                                                 
-                       };
-               } else
-               if( x.indexOf( 'rgb(' ) === 0 ){
-                       rgb = x.substr( 4 ).split( ',' );
-                       r = parseFloat( rgb[ 0 ] );
-                       g = parseFloat( rgb[ 1 ] );
-                       b = parseFloat( rgb[ 2 ] );
-                       if( x.indexOf( '%' ) !== -1 ){
-                               r *= 2.55;
-                               g *= 2.55;
-                               b *= 2.55;
-                       };
-               } else
-               if( x.indexOf( 'rgba(' ) === 0 ){
-                       rgb = x.substr( 5 ).split( ',' );
-                       r = parseFloat( rgb[ 0 ] );
-                       g = parseFloat( rgb[ 1 ] );
-                       b = parseFloat( rgb[ 2 ] );
-                       //a = parseFloat( rgb[ 3 ] );
-                       if( x.indexOf( '%' ) !== -1 ){
-                               r *= 2.55;
-                               g *= 2.55;
-                               b *= 2.55;
-                       };
-               } else {
-                       return undefined;
+function X_Node_CSS_parseColor( x ){
+       var rgb, r, g, b;
+       
+       if( X.Type.isNumber( x ) ){
+               return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : undefined;
+       } else
+       if( !X.Type.isString( x ) ) return;
+       
+       if( X.Type.isNumber( rgb = X_Node_CSS_COLOR[ x.toUpperCase() ] ) && 0x0 <= rgb && rgb <= 0xFFFFFF ){
+               return rgb;
+       } else
+       if( x.charAt( 0 ) === '#' ){
+               switch( x.length ){
+                       case 7 :
+                               r = parseInt( x.substr( 1, 2 ), 16 );
+                               g = parseInt( x.substr( 3, 2 ), 16 );
+                               b = parseInt( x.substr( 5, 2 ), 16 );
+                               break;
+                       case 4 :
+                               r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+                               g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
+                               b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
+                               break;
+                       case 2 :
+                               r = g = b = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+                               break;
+                       default :
+                               return;                                                                                 
                };
-               return isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : undefined;
-       },
+       } else
+       if( x.indexOf( 'rgb(' ) === 0 ){
+               rgb = x.substr( 4 ).split( ',' );
+               r = parseFloat( rgb[ 0 ] );
+               g = parseFloat( rgb[ 1 ] );
+               b = parseFloat( rgb[ 2 ] );
+               if( x.indexOf( '%' ) !== -1 ){
+                       r *= 2.55;
+                       g *= 2.55;
+                       b *= 2.55;
+               };
+       } else
+       if( x.indexOf( 'rgba(' ) === 0 ){
+               rgb = x.substr( 5 ).split( ',' );
+               r = parseFloat( rgb[ 0 ] );
+               g = parseFloat( rgb[ 1 ] );
+               b = parseFloat( rgb[ 2 ] );
+               //a = parseFloat( rgb[ 3 ] );
+               if( x.indexOf( '%' ) !== -1 ){
+                       r *= 2.55;
+                       g *= 2.55;
+                       b *= 2.55;
+               };
+       } else {
+               return undefined;
+       };
+       return isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : undefined;
+};
+
+function X_Node_CSS_objToCssText( that ){
+       var obj   = that._css,
+               plain = X_EMPTY_OBJECT,
+               css   = [],
+               n     = -1,
+               p, v, specialFix, filterFix;
+               
+       if( !obj ) return ''; // Opera7.5 未満?
+       
+       for( p in obj ){
+               v = obj[ p ];
        
-X_Node_CSS_PARAMS = ( function(){
-               var ret = {};
-               register( ret.percent = {},
-                       'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
-               );
-               register( ret.offset = {},
-                       'height,width,bottom,left,right,top'
-               );              
-               register( ret.size = {},
-                       'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing,wordSpacing'
-               );
-               register( ret.color = {},
-                       'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'
-               );
-               register( ret.region = {},
-                       'margin,padding,borderWidth,borderColor'
-               );              
-               register( ret.special = {},
-                       'clip,backgroundPosition,backgroundPositionX,backgroundPositionY,opacity,lineHeight,zIndex'
-               );
-               register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );
+               // object の拡張に備えて plain なオブジェクトを用意し、そのメンバーと一致するものは処理の対象外。
+               if( plain[ p ] === v ) continue;
                
-               register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );
-               register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );
-               register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );
-               register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );
+               p = X_Node_CSS_uncamelize( X_Node_CSS_VENDER_PREFIX[ p ] || p );
                
-               function register( obj, params ){
-                       params = params.split( ',' );
-                       for( var i = params.length; i; ) obj[ params[ --i ] ] = true;
+               if( specialFix = X_Node_CSS_SPECIAL_FIX_PROP[ p ] ){
+                       css[ ++n ] = p + ':' + specialFix( v );
+                       
+               } else
+               if( X_Node_CSS_FILTER_FIX_PROPS && X_Node_CSS_FILTER_FIX_PROPS[ p ] ){
+                       ( filterFix || ( filterFix = {} ) )[ p ] = v;
+                       
+               } else {
+                       css[ ++n ] = p + ':' + v;
                };
-               return ret;
-       })(),
+       };
        
-X_Node_CSS__CLIP_SEPARATOR = X_UA.IE && X_UA.IE < 8 ? ' ' : ',',
+       filterFix && ( css[ ++n ] = 'filter:' + X_Node_CSS_objToIEFilterText( that, filterFix ) );
        
-       /*
-        * 
-        */
-X_Node_CSS_Property = X.Class.create(
-               'Property',
-               X.Class.POOL_OBJECT,
+       return css.join( ';' );
+};
+
+var
+X_Node_CSS_FILTER_FIX_PROPS =
+       X_UA.ActiveX && X_UA.IE < 9 && !X_UA.MacIE ?
                {
-                       Constructor : function( name, value, unit, xnode ){
-                               this.name  = name;
-                               this.value = value;
-                               this.unit  = unit;
-                               this.xnode = xnode;
-                       },
-                       name    : '',
-                       value   : 0,
-                       unit    : '',
-                       xnode   : null,
-                       equal : function( prop ){
-                               if( this.unit === prop.unit ){
-                                       return this.value === prop.value;
-                               };
-                               return Math.abs( this.toPx() - prop.toPx() ) < 1;
-                       },
-                       convert: function( prop ){
-                               var u = prop.unit, v;
-                               if( this.unit === u ) return;
-                               this.value = v = this.toPx();
-                               this.unit  = u;
-                               // %
-                               // bgpX, bgpY の場合 X.Util.Image.getActualDimension( backgroundImage url を使用 )
-                               if( u !== 'px' ){
-                                       this.value =
-                                               u === 'em' ?
-                                                       v / X_Node_CSS_getCharSize( this.xnode ) :
-                                                       v / ( X_Node_CSS__UNIT_RATIO[ u ] || 1 );
-                               };
-                       },
-                       setValue: function( v ){
-                               this.value = v;
-                       },
-                       getValue: function(){
-                               return this.value;
-                       },
-                       getOffset: function( prop ){
-                               return prop.value - this.value;
-                       },
-                       getUnit: function(){
-                               return this.unit;
-                       },
-                       getValueText: function(){
-                               return this.value === 0 ? '0' : this.value + this.unit;
-                       },
-                       toPx: function(){
-                               var v = this.value, u = this.unit;
-                               return
-                                       u === 'px' ?
-                                               v :
-                                       ( u === 'em' || ( u === '' && this.name === 'lineHeight' ) ) ?
-                                               v * X_Node_CSS_getCharSize( this.xnode ) :
-                                       // u === '%'
-                                               v / ( X_Node_CSS__UNIT_RATIO[ u ] || 1 );
-                       },
-                       isValid: function(){
-                               var p = X_Node_CSS_PARAMS,
-                                       n = this.name,
-                                       v = this.value,
-                                       u = this.unit,
-                                       z = u !== '' ? true : v === 0;
-                               if( p.percent[ n ] === true ) return z;
-                               if( p.offset[ n ]  === true ) return z;
-                               if( p.size[ n ]    === true ) return z && u !== '%';
-                               if( p.special[ n ] === true ){
-                                       if( n === 'lineHeight' ) return true;
-                                       if( n === 'opacity' )    return 0 <= v && v <= 1 && u === '';
-                                       if( n === 'zIndex'  )    return u === '';
-                               };
-                               return false;
-                       }
-               }
-       ),
-       
-       /**
-        * backgroundPosition, clip
-        */
-X_Node_CSS_PropertyGroup = X.Class.create(
-               'PropertyGroup',
-               X.Class.POOL_OBJECT,
+                       opacity    : 2,
+                       boxShadow  : 3,
+                       textShadow : 4
+               } :
+       X_UA.ActiveX && X_UA.IE9 ? // == 9
                {
-                       Constructor : function( name ){
-                               this.name  = name;
-                               this.props = [];
-                               for( var i = 1, l = arguments.length; i<l; ++i ){
-                                       this.props[ this.props.length ] = arguments[ i ];
-                               };
-                       },
-                       name  : '',
-                       equal : function( prop ){
-                               var ps = this.props, i = ps.length;
-                               for( ; i; ){
-                                       --i;
-                                       if( ps[ i ].equal( prop[ i ] ) === false ) return false;
-                               };
-                               return true;
-                       },
-                       convert : function( prop ){
-                               var ps = this.props, i = ps.length;
-                               for( ; i; ){
-                                       --i;
-                                       ps[ i ].convert( prop[ i ] );
-                               };
-                       },
-                       setValue : function( ary ){
-                               var ps = this.props, i = 0, l = ps.length;
-                               for( ; i<l; ++i ){
-                                       ps[ i ].setValue( ary[ i ] );
-                               };
-                       },
-                       getValue : function(){
-                               var ret = [], ps = this.props, i = 0, l = ps.length;
-                               for( ; i<l; ++i ){
-                                       ret[ ret.length ] = ps[ i ].getValue();
-                               };
-                               return ret;
-                       },
-                       getOffset : function( prop ){
-                               var ret = [],
-                                       ps  = this.props,
-                                       _ps = prop.props,
-                                       i   = 0,
-                                       l = ps.length;
-                               for( ; i<l; ++i ){
-                                       ret[ ret.length ] = ps[ i ].getOffset( _ps[ i ] );
-                               };
-                               return ret;
-                       },
-                       getUnit : function(){
-                               var ret = [], ps = this.props, i = 0, l = ps.length;
-                               for( ; i<l; ++i ){
-                                       ret[ ret.length ] = ps[ i ].getUnit();
-                               };
-                               return ret;
-                       },
-                       getValueText : function(){
-                               var ret = [], ps = this.props, i = 0, l = ps.length;
-                               for( ; i<l; ++i ){
-                                       ret[ ret.length ] = ps[ i ].getValueText();
-                               };
-                               if( this.name === 'clip' ){
-                                       return 'rect(' + ret.join( X_Node_CSS__CLIP_SEPARATOR ) + ')';
-                               };
-                               return ret.join( ' ' );
-                       },
-                       onKill : function(){
-                               var ps = this.props, i = ps.length;
-                               for( ; i; ){
-                                       ps[ --i ].kill();
-                               };
-                       },
-                       isValid : function( t ){
-                               t = t || this;
-                               var ps = t.props, i = ps.length;
-                               for( ; i; ){
-                                       if( ps[ --i ].isValid() === false ) return false;
-                               };
-                               return true;
-                       }
-               }
-       ),
-
-       /*
-        * http://css-eblog.com/ie-css-problems/rgba-pe.html
-        * ie67 では rgb() は background-color で反応しない、、、
-        */
-
-X_Node_CSS_ColorProperty = X.Class.create(
-               'ColorProperty',
-               X.Class.POOL_OBJECT, {
-                       Constructor : function( name, x ){
-                               var pct = false,
-                                       r   = 0,
-                                       g   = 0,
-                                       b   = 0,
-                                       a   = 1,
-                                       rgb;
-                               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 );
-                               } else
-                               if( x.charAt( 0 ) === '#' ){
-                                       if( x.length === 7 ){
-                                               r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );
-                                               g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );
-                                               b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );
-                                       } else                  
-                                       if( x.length === 4 ){
-                                               r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
-                                               g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
-                                               b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
+                       textShadow : 4
+               } :
+               null;
+
+function X_Node_CSS_objToIEFilterText( that, opt_css ){
+       var obj     = opt_css || that._css,
+               test    = X_Node_CSS_FILTER_FIX_PROPS,
+               filters = [],
+               n       = -1,
+               p, id, v, num, ary, params, i, l, dir,
+               afterUpdate, impossible;
+       for( p in obj ){
+               if( !( id = test[ p ] ) ) continue;
+               v = obj[ p ];
+               
+               switch( id ){
+                       case 1 : //'filter' :
+                               filters[ ++n ] = v;
+                               break;
+                       case 2 : //'opacity' :
+                               filters[ ++n ] = 'alpha(opacity=' + ( v * 100 | 0 ) +')';
+                               break;
+                       case 3 : //'boxShadow' :
+                               // TODO カンマ区切りの複数指定
+                               // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
+                               // スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
+                               // https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
+                               // <length> に絶対値は不可? <color> 省略した場合は、文字の色が使われる(webkit以外)
+                               // shadow(color=#cccccc, strength=10, direction=135);
+                               ary = v.split( ' ' );
+                               params = [ 0, 0, 0, 0 ]; // offset-x, offset-y, blur-radius, spread-radius
+                               for( i = 0, l = ary.length; i < l; ++i ){
+                                       v = ary[ i ];
+                                       num = i < 4 && parsetFloat( v );
+                                       
+                                       if( num === num ){
+                                               vu = X_Node_CSS__splitValueAndUnit( v );
+                                               v  = vu[ 0 ];
+                                               u  = vu[ 1 ];
+                                               if( v ){
+                                                       if( _v = X_Node_CSS__UNIT_RATIO[ u ] ){
+                                                               params[ i ] = v / _v;
+                                                       } else {
+                                                               switch( u ){
+                                                                       case 'px' :
+                                                                               params[ i ] = v;
+                                                                               break;
+                                                                       case 'em' :
+                                                                               if( X_Node_updateTimerID ){
+                                                                                       afterUpdate = true;
+                                                                               } else {
+                                                                                       params[ i ] = X_Node_CSS_getCharSize( that ) * v;
+                                                                               };
+                                                                       default :
+                                                                               params[ i ] = 0;
+                                                                               break;
+                                                               };                                                              
+                                                       };
+                                               } else {
+                                                       params[ i ] = 0;
+                                               };
                                        } else
-                                       if( x.length === 2 ){
-                                               r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
-                                               g = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
-                                               b = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+                                       if( v.charAt( 0 ) === '#' || v.indexOf( 'rgb' ) === 0 || X_Node_CSS_COLOR[ v.toUpperCase() ] ){
+                                               v = X_Node_CSS_parseColor( v );
+                                               if( 0 <= v && v < 0x100000 ){
+                                                       color = '00000' + v.toString( 16 );
+                                                       color = '#' + color.substr( color.length - 6 );
+                                               } else
+                                               if( v ){
+                                                       color = '#' + v.toString( 16 );
+                                               };
+                                       } else                                  
+                                       if( v === 'inset' ){
+                                               impossible = true;
+                                       } else {
+                                               // unknown
                                        };
-                               } else
-                               if( x.indexOf( 'rgb(' ) === 0 ){
-                                       rgb = x.substr( 4 ).split( ',' );
-                                       r = parseFloat( rgb[ 0 ] );
-                                       g = parseFloat( rgb[ 1 ] );
-                                       b = parseFloat( rgb[ 2 ] );
-                                       if( x.indexOf( '%' ) !== -1 ) pct = true;
-                               } else
-                               if( x.indexOf( 'rgba(' ) === 0 ){
-                                       rgb = x.substr( 5 ).split( ',' );
-                                       r = parseFloat( rgb[ 0 ] );
-                                       g = parseFloat( rgb[ 1 ] );
-                                       b = parseFloat( rgb[ 2 ] );
-                                       a = parseFloat( rgb[ 3 ] );
-                                       if( x.indexOf( '%' ) !== -1 ) pct = true;
-                               } else {
-                                       r = 255;
-                                       g = 255;
-                                       b = 255;
                                };
-                               
-                               this.name = name;
-                               this.r    = r;
-                               this.g    = g;
-                               this.b    = b;
-                               this.a    = a;
-                               this.pct  = pct;
-                       },
-                       name  : '',
-                       r     : 0,
-                       g     : 0,
-                       b     : 0,
-                       a     : 0,
-                       pct   : false,
-                       equal : function( prop ){
-                               if( this.pct === prop.pct ){
-                                       return this.r === prop.r && this.g === prop.g && this.b === prop.b;
-                               };
-                               var rgb  = this._toPct(),
-                                       _rgb = prop._toPct(),
-                                       i    = rgb.length;
-                               for( ; i; ){
-                                       --i;
-                                       if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;
+                               if( impossible || !color ){
+                                       break;
                                };
-                               return true;
-                       },
-                       convert : function( prop ){
-                               var u = prop.pct, x;
-                               if( this.pct === u ) return;
-                               x = u === true ? 100 / 255 : 2.55;
-                               this.r  *= x;
-                               this.g  *= x;
-                               this.b  *= x;
-                               this.pct = u;
-                       },
-                       setValue : function( rgb ){
-                               this.r = rgb[ 0 ];
-                               this.g = rgb[ 1 ];
-                               this.b = rgb[ 2 ];
-                       },
-                       getValue : function(){
-                               return [ this.r, this.g, this.b ];
-                       },
-                       getOffset : function( prop ){
-                               return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];
-                       },
-                       getUnit : function(){
-                               return this.pct === true ? '%' : '';
-                       },
-                       getValueText : function(){
-                               if( this.pct === true ){
-                                       return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );
+                               if( afterUpdate ){
+                                       // AFTER_UPDATE 時に 再計算
+                                       X_ViewPort.listenOnce( X_Event.AFTER_UPDATE, that, X_Node_CSS_onAfterUpdateForIEFilterFix );
+                                       break;
                                };
-                               var round = Math.round;
-                               
-                               var rgb   = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );
-                               return '#' + rgb.substr( rgb.length - 6 );
-                       },
-                       _toPct : function(){
-                               if( this.pct === true ) return [ this.r, this.g, this.b ];
-                               return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];
-                       },
-                       isValid : function( t ){
-                               var isFinite = window.isFinite;
-                               if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;
-                               if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;
-                               if( this.pct === true ) return this.r <= 100 && this.g <= 100 && this.b <= 100;
-                               return this.r <= 255 && this.g <= 255 && this.b <= 255;
-                       }
-               }
-       );
-       
-function X_Node_CSS__getProperty( xnode, css, unit, p ){
-               
-               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 ){
-                       switch( p ){
-                               case 'clip' :
-                                       // rect(...)    クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4~7 では、カンマの代わりにスペースで区切る必要があります。
-                                       // position:absolute または position:fixed を適用した要素に対してのみ有効です。
-                                       var top    = me( p + 'Top' ),
-                                               right  = me( p + 'Right' ),
-                                               bottom = me( p + 'Bottom' ),
-                                               left   = me( p + 'Left' ),
-                                               ret    = new PropertyGroup( p, top, right, bottom, left ),
-                                   all;
-                                       if( ret.isValid() === true ) return ret;
-                                       ret.kill();
-                                       all = css[ p ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( X_Node_CSS__CLIP_SEPARATOR );
-                                       return
-                                               new PropertyGroup( 
-                                                       p,
-                                                       new Property( p + 'Top',    all[ 0 ], 'px', xnode ),
-                                                       new Property( p + 'Right',  all[ 1 ], 'px', xnode ),
-                                                       new Property( p + 'Bottom', all[ 2 ], 'px', xnode ),
-                                                       new Property( p + 'Left',   all[ 3 ], 'px', xnode )
-                                               );
-
-                               case 'margin' :
-                               case 'padding' :
-                                       name  = p;
-                                       width = '';
-                               case 'borderWidth' :
-                                       var props  = '$1Top$2,$1Right$2,$1Bottom$2,$1Left$2'.split( '$1' ).join( name || 'border' ).split( '$2' ).join( width || 'Width' ).split( ',' ),
-                                               top    = me( props[ 0 ] ),
-                                               right  = me( props[ 1 ] ),
-                                               bottom = me( props[ 2 ] ),
-                                               left   = me( props[ 3 ] ),
-                                               ret    = new PropertyGroup( p, top, right, bottom, left ),
-                                               all, _0, _1, _2, _3, vu, v, u;
-                                       if( ret.isValid() === true ) return ret;
-                                       ret.kill();
-                                       all = css[ p ].split( ' ' );
-                                       _0  = all[ 0 ];
-                                       _1  = all[ 1 ];
-                                       _2  = all[ 2 ];
-                                       _3  = all[ 3 ];
-                                       vu  = X_Node_CSS__splitValueAndUnit( _0 );
-                                       v   = vu[ 0 ];
-                                       u   = vu[ 1 ];
-                                       switch( all.length ){
-                                               case 1 :
-                                                       top    = new Property( props[ 0 ], v, u, xnode );
-                                                       right  = new Property( props[ 1 ], v, u, xnode );
-                                                       bottom = new Property( props[ 2 ], v, u, xnode );
-                                                       left   = new Property( props[ 3 ], v, u, xnode );
-                                                       break;
-                                               case 2 :
-                                                       top    = new Property( props[ 0 ], v, u, xnode );
-                                                       bottom = new Property( props[ 2 ], v, u, xnode );
-                                                       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 );
-                                                       break;
-                                               case 3 :
-                                                       top    = new Property( props[ 0 ], v, u, xnode );
-                                                       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     = 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     = X_Node_CSS__splitValueAndUnit( _1 );
-                                                       v      = vu[ 0 ];
-                                                       u      = vu[ 1 ];
-                                                       right  = new Property( props[ 1 ], v, u, xnode );
-                                                       vu     = X_Node_CSS__splitValueAndUnit( _2 );
-                                                       v      = vu[ 0 ];
-                                                       u      = vu[ 1 ];
-                                                       bottom = new Property( props[ 2 ], v,u, xnode );
-                                                       vu     = X_Node_CSS__splitValueAndUnit( _3 );
-                                                       v      = vu[ 0 ];
-                                                       u      = vu[ 1 ];
-                                                       left   = new Property( props[ 3 ], v, u, xnode );
-                                                       break;
-                                       };
-                                       return new PropertyGroup( p, top, right, bottom, left );
-
-                               case 'borderColor' :
-                                       var props  = 'borderTopColor,borderRightColor,borderBottomColor,borderLeftColor'.split( ',' ),
-                                               top    = me( props[ 0 ] ),
-                                               right  = me( props[ 1 ] ),
-                                               bottom = me( props[ 2 ] ),
-                                               left   = me( props[ 3 ] ),
-                                               ret    = new PropertyGroup( p, top, right, bottom, left ),
-                                               all, _0, _1;
-                                       if( ret.isValid() === true ) return ret;
-                                       ret.kill();
-                                       all = css[ p ].split( ' ' );
-                                       _0  = all[ 0 ];
-                                       _1  = all[ 1 ];
-                                       switch( all.length ){
-                                               case 1 :
-                                                       top    = new ColorProperty( props[ 0 ], _0 );
-                                                       right  = new ColorProperty( props[ 1 ], _0 );
-                                                       bottom = new ColorProperty( props[ 2 ], _0 );
-                                                       left   = new ColorProperty( props[ 3 ], _0 );
-                                                       break;
-                                               case 2 :
-                                                       top    = new ColorProperty( props[ 0 ], _0 );
-                                                       right  = new ColorProperty( props[ 1 ], _1 );
-                                                       bottom = new ColorProperty( props[ 2 ], _0 );
-                                                       left   = new ColorProperty( props[ 3 ], _1 );
-                                                       break;
-                                               case 3 :
-                                                       top    = new ColorProperty( props[ 0 ], _0 );
-                                                       right  = new ColorProperty( props[ 1 ], _1 );
-                                                       bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
-                                                       left   = new ColorProperty( props[ 3 ], _1 );
-                                                       break;
-                                               case 4 :
-                                                       top    = new ColorProperty( props[ 0 ], _0 );
-                                                       right  = new ColorProperty( props[ 1 ], _1 );
-                                                       bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
-                                                       left   = new ColorProperty( props[ 3 ], all[ 3 ] );
-                                                       break;
-                                       };
-                                       return new PropertyGroup( p, top, right, bottom, left );
-                                       
-                               case 'backgroundPosition' :
-                                       var x   = me( p + 'X' ),
-                                               y   = me( p + 'Y' ),
-                                               ret = new PropertyGroup( p, x, y ),
-                                               xy;
-                                       if( ret.isValid() === true ) return ret;
-                                       ret.kill();
-                                       xy = css[ p ].split( ' ' );
-                                       x  = X_Node_CSS__splitValueAndUnit( xy[ 0 ] );
-                                       y  = X_Node_CSS__splitValueAndUnit( xy[ 1 ] );
-                                       return
-                                               new PropertyGroup(
-                                                       p,
-                                                       new Property( p + 'X', x[ 0 ], x[ 1 ], xnode ),
-                                                       new Property( p + 'Y', y[ 0 ], y[ 1 ], xnode )
-                                               );
-                       };
-                       // opacity, zindex, lineHeight
-                       vu = X_Node_CSS__splitValueAndUnit( css[ p ] );
-                       return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
-               };
-               var x = css[ p ], e, v, u;
-               /*
-               if( PARAMS.offset[ p ] === true ){
-                       return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
-
-                       e = this.elm;
-                       if( p === 'width'  ) v = e.offsetWidth;
-                       if( p === 'height' ) v = e.offsetHeight;
-                       if( p === 'top'    ) v = e.offsetTop;
-                       if( p === 'bottom' ) v = e.offsetBottom;
-                       if( p === 'left'   ) v = e.offsetLeft;
-                       if( p === 'right'  ) v = e.offsetRight;
-                       u = _getUnit( x, p );
-                       // 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 = 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 = X_Node_CSS__splitValueAndUnit( x );
-                       return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
+                               dir = Math.atan2( params[ 1 ] + params[ 3 ], params[ 0 ] + params[ 3 ] ) * 180 / Math.PI + 90;
+                               dir += dir < 0 ? 360 : 0;
+                               filters[ ++n ] = 'shadow(color=' + color + ',strength=' + params[ 3 ] + ',direction=' + ( dir | 0 ) + ')';
+                               break;
+                       case 4 : //'textShadow' :
+                               //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
+                               //glow(Color=yellow,Strength=10);
+                               //どうやらCSSのbackgroundプロパティと同時に使えないようです。 s
+                               break;
+                       case 5 : //'backgroundImage' :
+                               //
                };
-
-               if( PARAMS.color[ p ] ) return new ColorProperty( p, x );
        };
-       
-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_Node_CSS_UNIT[ u ] ? u : 'px' ];
+       return filters.join( ' ' );
+};
+
+function X_Node_CSS_onAfterUpdateForIEFilterFix(){
+       if( this._root ){ // 要素があり、要素がツリーに属している
+               this._dirty |= X_Node_Dirty.IE_FILTER;
+               X_Node_reserveUpdate();
        };
+};
+
 
-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_Node_CSS_Type.COLOR,
-       backgroundPosition : X_Node_CSS_Type.COMBI,
-       
-       // boxShadow
-       
-       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_Node_CSS_Type.COLOR,
-       textShadowOffsetX : X_Node_CSS_Type.LENGTH,
-       textShadowOffsetY : X_Node_CSS_Type.LENGTH,
-       textShadowBlur    : X_Node_CSS_Type.LENGTH, */
-       
-       width         : X_Node_CSS_Type.LENGTH | X_Node_CSS_Type.PERCENT,
-       height        : X_Node_CSS_Type.LENGTH | X_Node_CSS_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,
+        * http://css-eblog.com/ie-css-problems/rgba-pe.html
+        * ie67 では rgb() は background-color で反応しない、、、
+        */
        
-       // table
-       borderSpacing : X_Node_CSS_Type.LENGTH
+var    
+X_Node_CSS_UNIT = {
+               'px'   : 0,
+               'em'   : 1,
+               // ex, rem, vh, vw, vmin, vmax
+               'cm'   : 2,
+               'mm'   : 3,
+               'in'   : 4,
+               // pt, pc, mozmm
+               '%'    : 5,
+               'pct'  : 5,
+               'ms'   : 6,
+               's'    : 7,
+               '#'    : 8,
+               'rgb'  : 9,
+               'rgba' : 10
 };
 
-       
-var X_Node_CSS_SPECIAL_FIX =
-       // ~IE8
-       X_UA.IE && X_UA.IE < 9 && !X_UA.MacIE?
-               (function( obj ){
-                       var test    = X_Node_CSS_SPECIAL_FIX_PROP,
-                               filters = [],
-                               n       = -1,
-                               p, id, v, dir;
-                       for( p in obj ){
-                               if( !( id = test[ p ] ) ) continue;
-                               v = obj[ p ];
-                               switch( id ){
-                                       case 1 : //'filter' :
-                                               filters[ ++n ] = v;
-                                               break;
-                                       case 2 : //'opacity' :
-                                               filters[ ++n ] = 'alpha(opacity=' + v * 100 +')';
-                                               break;
-                                       case 3 : //'boxShadow' :
-                                               // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
-                                               // スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
-                                               // shadow(color=#cccccc, strength=10, direction=135);
-                                               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 + ')';
-                                               break;
-                                       case 4 : //'textShadow' :
-                                               //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
-                                               //glow(Color=yellow,Strength=10);
-                                               //どうやらCSSのbackgroundプロパティと同時に使えないようです。 
-                                               
-                                               
-                                               break;
-                                       case 5 : //'backgroundImage' :
-                                               //
-                               };
-                       };
-                       return filters.join( ' ' );
-               }) :
-       // IE9 textShadow に filter を使用
-       X_UA.IE && 9 <= X_UA.IE && X_UA.IE < 10 ?
-               (function( obj ){
-                       var test    = X_Node_CSS_SPECIAL_FIX_PROP,
-                               filters = [], p, id, v;
-                       for( p in obj ){
-                               if( !( id = test[ p ] ) ) continue;
-                               v = obj[ p ];
-                               switch( id ){
-                                       case 1 : //'filter' :
-                                               filters[ filters.length ] = v;
-                                               break;
-                               };
-                       };
-                       if( filters ) return filters.join( ' ' );
-               }) :
+/*
+ * .2, -.1 といったケースに対処
+ * 
+ */
+function X_Node_CSS__splitValueAndUnit( v ){
+       var num, _num, u;
+       if( X.Type.isNumber( v ) ) return [ v || 0, '' ];
+       num = parseFloat( v );
+       if( num !== num ) return [ 0, '' ];
+       _num = '' + num;
+       if(  0 < num && num < 1 && v.charAt( 0 ) === '.' ) _num = _num.slice( 1 );
+       if( -1 < num && num < 0 && v.charAt( 1 ) === '.' ) _num = '-.' + _num.substr( 2 );
+       u = v.substr( v.indexOf( _num ) + _num.length );
+       return [ num, X_Node_CSS_UNIT[ u ] ? u : 'px' ];
+};
+               /*
                (function( obj ){
                        var test    = X_Node_CSS_SPECIAL_FIX_PROP,
                                ret = [], p, id, v, bgpX, bgpY, clipT, clipB, clipL, clipR;
@@ -937,16 +450,16 @@ var X_Node_CSS_SPECIAL_FIX =
                                        case 2 : //'backgroundPositionY' :
                                                bgpY = v;
                                                break;
-                                       case 3 : //'backgroundPositionX' :
+                                       case 3 : //'clipTop' :
                                                clipT = v;
                                                break;
-                                       case 4 : //'backgroundPositionX' :
+                                       case 4 : //'clipBottom' :
                                                clipB = v;
                                                break;
-                                       case 5 : //'backgroundPositionX' :
+                                       case 5 : //'clipLeft' :
                                                clipL = v;
                                                break;
-                                       case 6 : //'backgroundPositionX' :
+                                       case 6 : //'clipRight' :
                                                clipR = v;
                                                break;
                                };
@@ -956,7 +469,7 @@ var X_Node_CSS_SPECIAL_FIX =
                                ret[ ret.length ] = 'clip:rect(';
                        };
                        return ret.join( ';' );
-               });
+               }); */
 
 
 
@@ -968,17 +481,20 @@ var X_Node_CSS_SPECIAL_FIX =
 // name, value setter
 
 Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
-       var args = arguments,
-               css  = this._css,
+       var plain = X_EMPTY_OBJECT,
+               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 = X_Node_CSS_camelize;
-               ieFix    = X_Node_CSS_IE_FILTER_FIX;
+               ieFix    = X_Node_CSS_FILTER_FIX_PROPS;
                for( p in nameOrObj ){
-                       if( ieFix[ p ] ){
+                       if( plain[ p ] === nameOrObj[ p ] ) continue;
+                       
+                       if( ieFix && ieFix[ p ] ){
                                this._dirty |= X_Node_Dirty.IE_FILTER;
                        };
                        v = nameOrObj[ p ];
@@ -994,38 +510,28 @@ Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
                return this;
        } else
        if( 1 < args.length ){
-               if( !X_Node_CSS_UNIT[ nameOrObj ] ){
 // setter name, value
-                       if( !css ) css = this._css = {};
-                       name = X_Node_CSS_camelize( nameOrObj );
-                       v    = args[ 1 ];
-                       if( css[ name ] === v ) return this;
-                       if( X_Node_CSS_IE_FILTER_FIX[ name ] ){
-                               this._dirty |= X_Node_Dirty.IE_FILTER;
-                       };
-                       if( !v && v !== 0 ){
-                               delete css[ name ];
-                       } else {
-                               css[ name ] = v;
-                       };
-                       delete this._cssText;
-                       this._dirty |= X_Node_Dirty.CSS;
-                       if( name === 'display' ){
-                               v === 'none' ? ( this._state |= X_Node_State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X_Node_State.IE5_DISPLAY_NONE_FIX );
-                               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 && X_Node_reserveUpdate();
-                       return this;
+               if( !css ) css = this._css = {};
+               name = X_Node_CSS_camelize( nameOrObj );
+               v    = args[ 1 ];
+               if( css[ name ] === v ) return this;
+               if( X_Node_CSS_FILTER_FIX_PROPS && X_Node_CSS_FILTER_FIX_PROPS[ name ] ){
+                       this._dirty |= X_Node_Dirty.IE_FILTER;
+               };
+               if( !v && v !== 0 ){
+                       delete css[ name ];
+               } else {
+                       css[ name ] = v;
+               };
+               delete this._cssText;
+               this._dirty |= X_Node_Dirty.CSS;
+               if( name === 'display' ){
+                       v === 'none' ? ( this._state |= X_Node_State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X_Node_State.IE5_DISPLAY_NONE_FIX );
+                       v === 'none' ? ( this._state |= X_Node_State.DISPLAY_NONE ) : ( this._state &= ~X_Node_State.DISPLAY_NONE );
                };
-// getter unit
-// unit 付の値取得は fontSize と 画像サイズが確定していないと正確に取れない。内部のみにする?
-               if( !css ) return;
-               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;
+               // parent でなく this._root! でなくて this._state & in tree
+               this.parent && X_Node_reserveUpdate();
+               return this;
        };
 // getter
        if( !css ) return;
@@ -1056,7 +562,7 @@ Node.prototype.cssText = function( v ){
                return this.css( obj );
        };
        // getter
-       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X_Node_CSS_objToCssText( this._css ) ) ){
+       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X_Node_CSS_objToCssText( this ) ) ){
                delete this._cssText;
        };
        return this._cssText;
@@ -1066,23 +572,18 @@ Node.prototype.cssText = function( v ){
  * ここでは HTMLElement のチ1ェックは行わない!
  * TODO
  * body に css attr がセットされた場合には X_ViewPort_baseFontSize をクリア
+ * class, id, attr(<font size><basefont>) の変更があった場合は、変更の適用の後、charSize を取得
+ * css の場合は、計算で求めることが可能、content は影響しない
+ * :hover, #target, が絡む場合、正しく扱えない
  */
 var
 X_Node_CSS_getCharSize =
-       window.getComputedStyle ?
-               (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 ?
+       X_node_CSS_getComputedStyle ?
                (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 );
+                       return that._fontSize = parseFloat( X_node_CSS_getComputedStyle( that._rawObject, null ).fontSize );
                }) :
 
        5.5 <= X_UA.IE ?
@@ -1167,29 +668,46 @@ X_Node_CSS_getCharSize =
                }) :
                0;
 
+var X_Node_CSS_Support = {},
+
+       X_Node_CSS_SPECIAL_FIX_PROP = {
+               
+               transitionDuration : X_UA.Android && !X_UA.Chrome && function( v ){ // bad Android
+                               return parseFloat( v ) === 0 ? '0.001s' : v;
+                       }
+               
+               //webkit boxShadow <color> が省略された場合。transparent になるのを color に
+               //webkit boxShadow が border-radius をはみ出す, background-image に グラデーションのないグラデーション指定
+               // http://melty.koume.in/android-bug-boxshadow-radius/
+               
+       };
 
 X.CSS = {
        
        VENDER_PREFIX : X_Node_CSS_VENDER_PREFIX,
+       // iscroll で使用
+       uncamelize    : X_Node_CSS_uncamelize,
        
-       parseColor    : X_Node_CSS_parseColor,
-       
-       uncamelize    : X_Node_CSS_uncamelize
+       Support       : X_Node_CSS_Support
 };
 
+/*
+ *                             backgroundPositionX : testStyle.backgroundPositionX === undefined ? 3 : 0,
+                               backgroundPosiitonY : testStyle.backgroundPositionX === undefined ? 3 : 0,
+                               clipTop             : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 3 : 0,
+                               clipBottom          : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 4 : 0,
+                               clipLeft            : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 5 : 0,
+                               clipRight           : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 6 : 0
+ */
 
-
-var X_Node_CSS_Support, X_Node_CSS_SPECIAL_FIX_PROP;
-
-( function(){
+(function(){
        var testStyle = X_UA.IE4 ? {} : ( document.documentElement || document.createElement( 'div' ) ).style,
                temp      = testStyle.cssText,
-               prefix    = X_Node_CSS_VENDER_PREFIX,
                vendors   = 'webkit,Webkit,Moz,moz,Ms,ms,O,o,khtml,Khtml'.split( ',' ),
                searches  = (
-                       'opacity,boxSizing,' +
+                       'opacity,boxSizing,boxShadow,' +
                        'transform,transformOrigin,perspective,' +
-                       'transisiton,transitionDelay,transitionProperty,transitionDuration,transitionTimingFunction,' +
+                       'transisiton,transitionDelay,transitionProperty,transitionDuration,transitionTimingFunction,backfaceVisibility,willChange,' +
                        'userSelect,touchSelect,touchAction,touchCallout,contentZooming,userDrag,tapHighlightColor' ).split( ',' ),
                vendor, i, search, prop, j, v;
 
@@ -1203,48 +721,51 @@ var X_Node_CSS_Support, X_Node_CSS_SPECIAL_FIX_PROP;
                                if( testStyle[ v + prop ] !== undefined ){
                                        if( v === 'ms' ) v = 'Ms';// for ie9
                                        if( v === 'o' ) v = 'O';//for opera12
-                                       prefix[ search ] = v + prop;
+                                       X_Node_CSS_VENDER_PREFIX[ search ] = v + prop;
                                        break;
                                };
                        };                              
                } else {
-                       prefix[ search ] = prop;
+                       X_Node_CSS_VENDER_PREFIX[ search ] = prop;
                };
        };
        
        testStyle.cssText = 'background:rgba(0,0,0,0.5)';
+       X_Node_CSS_Support[ 'rgba' ] = !!testStyle.background;
        
-       X.CSS.Support = X_Node_CSS_Support = {
-               rgba : !!testStyle.background
+               /*
+                * chrome 1+, ff3.5(1.9.1), ie9+, opera10.5+, Safari3+(522)
+                */
+       if( prop = X_Node_CSS_VENDER_PREFIX[ 'boxShadow' ] ){
+               
+               testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0';
+               X_Node_CSS_Support[ 'boxShadow' ] = !!testStyle[ prop ];
+
+               /*
+                * chrome 4+, ff3.5(1.9.1), ie9+, opera10.5+, Safari5+(533)
+                */
+               testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0, 0 0';
+               X_Node_CSS_Support[ 'boxShadowMulti' ] = !!testStyle[ prop ];
+               
+               /*
+                * https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
+                * この値を用いる場合には、spread-radius を省略出来ません。box-shadow が効かないケースに遭遇した時はこの事を思い出して下さい。
+                * chrome 4+, ff3.5(1.9.1), ie9+, opera10.5+, Safari5+(533)
+                * 
+                * http://unformedbuilding.com/articles/considerations-when-using-the-box-shadow/
+                *  box-shadow:inset と border-radius を指定しているときの Google Chrome の表示
+                *  このバグは Windows と Linux で発生するようです。
+                *  Windows 版 Chrome 10.0.648.127 で修正されているのを確認しました。
+                */
+               testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0 inset';
+               X_Node_CSS_Support[ 'boxShadowInset' ] = testStyle[ prop ] && testStyle[ prop ].indexOf( 'inset' ) !== -1;
+
        };
+
        
        testStyle.cssText = temp;
-       
-       X_Node_CSS_SPECIAL_FIX_PROP =
-               // ~IE8
-               X_UA.IE < 9 && !X_UA.MacIE ?
-                       {
-                               filter          : 1,
-                               opacity         : 2//, uinode ChromeNode で行う
-                               //boxShadow       : 3,
-                               //textShadow      : 4,
-                               //backgroundImage : 5
-                       } :
-               // IE9
-               9 <= X_UA.IE && X_UA.IE < 10 ?
-                       {
-                               filter          : 1//,
-                               //textShadow      : 1
-                       } :
-               {
-                       backgroundPositionX : testStyle.backgroundPositionX === undefined ? 3 : 0,
-                       backgroundPosiitonY : testStyle.backgroundPositionX === undefined ? 3 : 0,
-                       clipTop             : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 3 : 0,
-                       clipBottom          : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 4 : 0,
-                       clipLeft            : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 5 : 0,
-                       clipRight           : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 6 : 0
-               };
-} )();
+
+})();
 
 X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){
        var xnode  = X_Node_systemNode,
@@ -1267,5 +788,5 @@ X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){
        };
        
        xnode.cssText( '' ).empty();
-} );
+});