用PHP操作DOM (一）

从事PHP开发很多年了，也写过些小项目，经常要在后台生成前端输出的HTML脚本，说白了就是把HTML语言以字符串的方式嵌入在PHP的输入语句中，单纯的输出没什么问题，但遇到DOM修改时很是麻烦，要做各种查找与替换，还要写一大堆正则，反反复复，效率极低。也用过网上的一些PHP操作DOM的开源项目，不过问题多多，要么就停更很久了，要么不完善，我在写代码这个问题上是个不将就的人，所以，就自己想整一个这么个项目，我的目的很简单，就是要在PHP里操作DOM就像 Jquery 一样，能生成，能解析，还要能符合目前H5及 css3 的特性。我准备花点时间来记录这一过程，应该要分几个章节来写，我的环境是LAMP，PHP基于PHP7.3版本。先来说一下书写规则。对了，这是我在简书上写的第一篇文章，所以态度上我是很认真的。我给这个项目取名叫SPEEDX,很多命名前缀我会带上这个项目名，为什么呢，因为PHP中我特别不喜欢命名空间这么个玩意，不知为什么，性格如此。

往往想象很美好的事情，现实确很骨感。为了达到对DOM及CSS精准操作的目的，不搞大杂会，为此我仔细分析了一下，本项目操作主要对像应该这样分类：

1. CSS类：`.className{属性列表}`

2. CSS属性 : `vName: value`

3. DOM标签诸如`<div></div>`等

4. DOM属性,如： `<div class=”cssName” id=”idName”></div>`

5. DOM节点基本内容: 就是节点内的内容，也可以人包含其它节点

SPEEDX_STYLE_NULL = 0;//CSS3标准，但还没有浏览器实现
SPEEDX_STYLE_ W3C = 1; //W3C标准属性：表示支持这一属性或支持这一属性值的浏览器都是采用标准格式，即不带浏览器前缀的书写方式；
SPEEDX_STYLE_MOZ = 2; //火狐浏览器内核(-moz-):表示支持这一属性或属性值的火狐浏览器在书写格式上要带”-moz-“前缀;
SPEEDX_STYLE_WEBKIT = 4; //Chrome和Safari浏览器内核:表示支持这一属性或属性值的浏览器在CSS书写格式上要带”- webkit -“前缀;
SPEEDX_STYLE_MS = 8; //IE浏览器内核:IE支持的CSS特性，要加”-ms-“前缀
SPEEDX_STYLE_O = 16; //Opera浏览器内核：对于兼容部分Opera浏览器，CSS特性前要加”-o-“前缀
SPEEDX_STYLE_ALL = 31; //所有兼容模式，为了兼容大部分主流浏览器的不同版本，要加上上面所有的前缀。

具体配置如下：文件中已备注说明：

<?php
 /**
 * speedx版本及版本号
 */ const SPEEDX_VARNAME = "0.1.1";
 const SPEEDX_VARCODE = 1;
 const SPEEDX_ARCHI_BOOTSTRAP = "SPEEDX_ARCHI_BOOTSTRAP";
 const SPEEDX_ARCHI_SEMANTIC = "SPEEDX_ARCHI_SEMANTICUI";
 const COMPACT_TO_STRING = 0;//用于函数speedxCompactJs(),此常量表示压缩后的js以字符串的方式返回；
 const COMPACT_TO_FILE = 1;//:用于函数speedxCompactJs(),此常量表示压缩后的js存储到指定的js文件；
 
 const SPEEDX_REQUEST_GET = "SPEEDX_REQUEST_GET"; 
 const SPEEDX_REQUEST_POST = "SPEEDX_REQUEST_POST";
 /**
 * 格式化输出时每一行结尾要附加的字符
 */ const SPEEDX_RN = "\r\n";
 const SPEEDX_BR = "<br/>";
 const SPEEDX_NIL = "";
 $SPEEDX_FORMAT_LINE_END = SPEEDX_NIL;
 /**
 * 格式化输出时新行前导字符
 */ const SPEEDX_FORMAT_FIX_HTML = " ";
 const SPEEDX_FORMAT_FIX_SPACE = " ";
 $SPEEDX_FORMAT_LINE_HEAD = SPEEDX_NIL;
 /*
 ***异常处理类所用到的常定义：
 ***调用主文件：_SPEEDX_CLASS_PHP_/class.speedx_error_debuger.php 
 */ const SPEEDX_STDOUT_NULL = 0; //信息屏蔽
 const SPEEDX_STDOUT_SCREEN = 1;//信息输出至屏幕
 const SPEEDX_STDOUT_FILE = 2;//信息输出至文件
 const SPEEDX_STDOUT_WEBSOCKET = 3;//信息输出至后台管理员
 const SPEEDX_STDOUT_DB = 4;//信息输出至数据库
 const SPEEDX_DUBUG_DATATABLE = "exception"; //异常记录数据库表名称，表结构为固定结构，详见表定义
 $_SPEEDX_DEBUGLOG = _SPEEDX_LOG_ . "speedx_debug.log";
 $_DEBUG_TYPE = SPEEDX_STDOUT_FILE; //自定义异常输入方式，生产时请设置为：DEBUG_TO_LOG
 $_SPEEDX_ERRLOG = _SPEEDX_LOG_ . "speedx_error.log"; //自定义异常日志文件
 $_ERR_TYPE = SPEEDX_STDOUT_FILE; //自定义异常输入方式，生产时请设置为：ERR_TO_LOG
 /**
 * speedx_domnodes类在解析时节点的状态
 */ const SPEEDX_DOMNODE_TAG_START = 1;//解析节点需要起始标签
 const SPEEDX_DOMNODE_TAG_END = 2;//解析节点需要结束标签
 const SPEEDX_DOMNODE_CLOSE = 3;//解析节点禁止节点操作
 /**
 * 自定义输入的错误级别
 * 自定输出的信息不受全局环境设置影响，始终会输出到终端
 */ const SPEEDX_ERR_LEVEL_NORMAL = 0; //常规信息
 const SPEEDX_ERR_LEVEL_SUCCESS = 1; //突出信息
 const SPEEDX_ERR_LEVEL_WARNING = 2; //警告信息
 const SPEEDX_ERR_LEVEL_DANGER = 3; //危险信息
 const SPEEDX_ERR_LEVEL_ERROR = 4; //错误信息
 
 const SPEEDX_RETURN_OK = 1; //全局错误返回类中错误信息: 正确
 const SPEEDX_RETURN_ERR = 0; //全局错误返回类中错误信息: 错误
 const SPEEDX_RETURN_NODEFINE = -1;//全局错误返回类中错误信息: 未定义
 /*
 ***speedx节点常量：
 ***调用主文件：_SPEEDX_CLASS_PHP_/class.speedx.php -> class speedx_node{} 
 */ const SPEEDX_NODE_DOCTYPE = "_doctype_"; //doctype类型
 const SPEEDX_NODE_STANDARD = "_standard_"; //标准对称标签
 const SPEEDX_NODE_SINGLE = "_single_"; //单标签内容
 const SPEEDX_NODE_META = "_meta_"; //meta标签
 const SPEEDX_NODE_COMMENT = "_comment_"; //备注标签
 const SPEEDX_NODE_TEXT = "_text_"; //文本内容
 const SPEEDX_NODE_VAR = "_var_"; //变量标签，用于PHP内容替换
 const SPEEDX_NODE_NULL = "_null_"; //空内容标签
 const SPEEDX_NODE_STYLE = "_style_"; //style标签
 const SPEEDX_NODE_SCRIPT = "_script_"; //脚本标签
 const SPEEDX_NODE_PHP = "_php_"; //保留的:php脚本标签，用于后期扩展
 const SPEEDXNODE_DOCTYPE = 1; 
 const SPEEDXNODE_STANDARD = 2;
 const SPEEDXNODE_SINGLE = 4; 
 const SPEEDXNODE_META = 8;
 const SPEEDXNODE_COMMENT = 16;
 const SPEEDXNODE_TEXT = 32;
 const SPEEDXNODE_VAR = 64;
 const SPEEDXNODE_STYLE = 128;
 const SPEEDXNODE_SCRIPT = 256;
 const SPEEDXNODE_PHP = 512;
 const SPEEDXNODE_NULL = 1024;
 /*
 ***doctype类型声明：
 *** 
 */ const DOCTYPE_HTML5 = '<!DOCTYPE HTML>';
 const DOCTYPE_HTML_4_01_STRICT = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">';
 const DOCTYPE_HTML_4_01_TRANSITIONAL = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">';
 const DOCTYPE_HTML_4_01_FRAMESET = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">';
 const DOCTYPE_XHTML_1_0_STRICT = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">';
 const DOCTYPE_XHTML_1_0_TRANSITIONAL = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">';
 const DOCTYPE_XHTML_1_0_FRAMESET = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">';
 const DOCTYPE_XHTML_1_1 = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">';
 /*
 ***HTML标签列表
 */ $SPEEDX_NODE_TYPE = [];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_DOCTYPE] = ["doctype","!doctype"];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_SINGLE] = ["br","hr"];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_META] = ["meta","base","embed","link","track","input","img","keygen"]; 
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_COMMENT] = ["!--","comment"]; 
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_TEXT] = ["text"];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_VAR] = ["_var_",'$_var_'];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_STYLE] = ["style"];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_SCRIPT] = ["script"];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_NULL] = [null,""];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_STANDARD] = [
 "a","abbr","acronym","address","applet","area","article","aside","audio",
 "b","basefont","bdi","bdo","big","blockquote","body","button","canvas","caption",
 "center","cite","code","col","colgroup","command","datalist","dd","del","details",
 "dfn","dialog","dir","div","dl","dt","em","fieldset","figcaption","figure","font",
 "footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header",
 "html","i","iframe","ins","kbd","label","legend","li","map","mark","menu","nav",
 "noframes","noscript","object","ol","optgroup","option","output","p","param","pre",
 "progress","q","rp","rt","ruby","s","samp","section","select","small","source",
 "span","strike","strong","sub","summary","sup","table","tbody","td","textarea","tfoot",
 "th","thead","time","title","tr","tt","u","ul","var","video","wbr","def"
 ];
 $SPEEDX_NODE_TYPE[SPEEDX_NODE_PHP] = ["php"];
 
 /**
 * HTML标签属性列表
 */ $SPEEDX_DOM_NODE = [];
 /*
 *** 升降序声明,用于创建自动升序或自动降序序列的字符内容。
 *** 调用主文件：_SPEEDX_CLASS_PHP_/function.speedx.php -> function padSetString()定义
 */ const SPEEDX_ASCENDING = 0;
 const SPEEDX_DESCENDING = 1;
 /**
 * session存储方式
 */ const SESSION_MYSQL = 0;
 const SESSION_REDIS = 1;
 const SESSION_FILE = 2;
 const SESSION_MEMCACHED = 3;
 /**
 * node节点中添加属性时，以什么方式处理已经存在的同名属性：
 * SPEEDX_OPERATOR_MODE_REPLACE : 直接替换
 * SPEEDX_OPERATOR_MODE_ATTACH : 属性值追加(对于拥有多个属性值而言)
 * SPEEDX_OPERATOR_MODE_REMOVE : 删除已知属性中的某个值
 */ const SPEEDX_OPERATOR_MODE_REPLACE = 1; 
 const SPEEDX_OPERATOR_MODE_ATTACH = 2;
 const SPEEDX_OPERATOR_MODE_REMOVE = 3;
 /**
 * printdom()函数的打印模式
 */ const PRINT_CUR_NODE = 1;
 const PRINT_BEFOR_NODES = 2;
 const PRINT_AFTER_NODES = 4;
 const PRINT_ALL_NODES = 7;
 /*
 ***CSS属性前缀类型，用于匹配不同内核的浏览器
 *主要匹配以下浏览器：Firefox(FF),IE,Opera,Chrome,Safari;
 */ const SPEEDX_STYLE_DEFAULT = -1;//全局默认值,由配置参数$SPEEDX_STYLE_SHOW确定
 const SPEEDX_STYLE_NULL = 0;//CSS3标准，但还没有浏览器实现
 const SPEEDX_STYLE_W3C = 1; //W3C标准属性：表示支持这一属性或支持这一属性值的浏览器都是采用标准格式，即不带浏览器前缀的书写方式；
 const SPEEDX_STYLE_MOZ = 2; //火狐浏览器内核(-moz-):表示支持这一属性或属性值的火狐浏览器在书写格式上要带"-moz-"前缀;
 const SPEEDX_STYLE_WEBKIT = 4; //Chrome和Safari浏览器内核:表示支持这一属性或属性值的浏览器在CSS书写格式上要带"-webkit-"前缀;
 const SPEEDX_STYLE_MS = 8; //IE浏览器内核:IE支持的CSS特性，要加"-ms-"前缀
 const SPEEDX_STYLE_O = 16; //Opera浏览器内核：对于兼容部分Opera浏览器，CSS特性前要加"-o-"前缀
 const SPEEDX_STYLE_ALL = 31; //所有兼容模式，为了兼容大部分主流浏览器的不同版本，要加上上面所有的前缀。
 $SPEEDX_STYLE_SHOW = SPEEDX_STYLE_ALL; //生成的样式表中包含哪些内核样式,此属性为用户自定义参数。可在config.userDefine.php中定义。
 /**
 * CSS各前导类所被浏览器支持的列表
 */ $SPEEDX_CLASS_STYLE = [
 "@import" => SPEEDX_STYLE_W3C,
 "@charset" => SPEEDX_STYLE_W3C,
 "@media" => SPEEDX_STYLE_W3C,
 "@font-face" => SPEEDX_STYLE_W3C,
 "@page" => SPEEDX_STYLE_W3C,
 "@keyframes" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "@supports" => SPEEDX_STYLE_W3C
 ];
 /**
 * CSS_CLASS类型定义
 */ 
 const SPEEDX_CLASS_IMPORT = 1;
 const SPEEDX_CLASS_CHARSET = 2;
 const SPEEDX_CLASS_MEDIA = 3;
 const SPEEDX_CLASS_FONTFACE = 4;
 const SPEEDX_CLASS_PAGE = 5;
 const SPEEDX_CLASS_KEYFRAMES = 6;
 const SPEEDX_CLASS_SUPPORTS = 7;
 const SPEEDX_CLASS_STANDARD = 8;
 const SPEEDX_CLASS_ANONYMOUS = 9;
 /*
 ***CSS固定属性值列表：
 * $SPEEDX_STYLE_VALUE是全局定义的CSS属性值列表（数组），有些CSS属性的值是固定的，
 * 有些CSS属性值除了固定值值以外也扶持自定义的值。在$SPEEDX_STYLE_VALUE中定义如下：
 * $SPEEDX_STYLE_VALUE[CSS属性]["BASIC-SUPPORT"]:基本支持的属性值，这些值目前为止所有浏览器都支持，用"w3c"表示；
 * $SPEEDX_STYLE_VALUE[CSS属性]["USER-DEFINE"]：自定义属性，这类属性用标准格式"w3c"表示;
 * $SPEEDX_STYLE_VALUE[CSS属性][其它固定值]：不同的浏览器支持情况不同，分别用"w3c","webkit","moz","ms","o"表示；
 */ $SPEEDX_STYLE_VALUE = [];
 $SPEEDX_STYLE_VALUE["position"] = [
 "BASIC-SUPPORT" => ["static","relative","absolute","fixed"],
 "center" => SPEEDX_STYLE_NULL,
 "page" => SPEEDX_STYLE_NULL,
 "sticky" => SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT
 ];
 $SPEEDX_STYLE_VALUE["display"] = [
 "BASIC-SUPPORT" => ["none","inline","block","list-item","table",
 "inline-table","table-caption","table-cell","table-row",
 "table-row-group","table-column","table-column-group",
 "table-footer-group","table-header-group","run-in"],
 "box" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT,
 "inline-box" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT,
 "flexbox" => SPEEDX_STYLE_MS,
 "inline-flexbox" => SPEEDX_STYLE_MS,
 "flex" => SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT,
 "inline-flex" => SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT
 ];
 $SPEEDX_STYLE_VALUE["overflow"] = [
 "BASIC-SUPPORT" => ["visible","hidden","scroll","auto"],
 "paged-x" => SPEEDX_STYLE_WEBKIT,
 "paged-y" => SPEEDX_STYLE_WEBKIT,
 "paged-x-controls" => SPEEDX_STYLE_NULL,
 "paged-y-controls" => SPEEDX_STYLE_NULL,
 "fragments" => SPEEDX_STYLE_NULL 
 ];
 $SPEEDX_STYLE_VALUE["overflow-x"] = $SPEEDX_STYLE_VALUE["overflow"];
 $SPEEDX_STYLE_VALUE["overflow-x"]["paged-x"] = SPEEDX_STYLE_NULL;
 $SPEEDX_STYLE_VALUE["overflow-x"]["paged-y"] = SPEEDX_STYLE_NULL;
 $SPEEDX_STYLE_VALUE["overflow-y"] = $SPEEDX_STYLE_VALUE["overflow-x"];
 $SPEEDX_STYLE_VALUE["text-align"] = [
 "BASIC-SUPPORT" => ["start","end","left","right","center","justify"],
 "match-parent" => SPEEDX_STYLE_NULL,
 "justify-all" => SPEEDX_STYLE_NULL
 ];
 $SPEEDX_STYLE_VALUE["text-align-last"] = [
 "BASIC-SUPPORT" => ["auto","left","right","center","justify"],
 "start" => SPEEDX_STYLE_MOZ,
 "end" => SPEEDX_STYLE_MOZ,
 ];
 $SPEEDX_STYLE_VALUE["cursor"] = [
 "USER-DEFINE" => SPEEDX_STYLE_W3C,
 "BASIC-SUPPORT" => ["auto","default","none","context-menu","help","pointer",
 "progress","wait","cell","crosshair","text","vertical-text","alias","copy",
 "move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize",
 "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize",
 "nwse-resize","col-resize","row-resize","all-scroll"],
 "zoom-in" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C, 
 "zoom-out" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "grab" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "grabbing" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 ];
 /**
 * CSS属性值的函数列表，不同的浏览器支持情况不同。
 */ $SPEEDX_STYLE_FUNCTION = [
 "calc" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "image-set" => SPEEDX_STYLE_WEBKIT,
 "linear-gradient" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "radial-gradient" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "repeating-linear-gradient" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C,
 "repeating-radial-gradient" => SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_W3C
 ];
 /*
 ***CSS属性列表
 */ $SPEEDX_STYLE_ATTR = [];
 $SPEEDX_STYLE_ATTR["align-content"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["align-items"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["align-self"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["all"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["animation"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-delay"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-direction"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-duration"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_O;
 $SPEEDX_STYLE_ATTR["animation-fill-mode"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-iteration-count"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-name"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-play-state"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["animation-timing-function"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_O;
 $SPEEDX_STYLE_ATTR["appearance"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["aspect-ratio"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["backface-visibility"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["background"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-attachment"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-blend-mode"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-clip"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["background-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-image"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-origin"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["background-position"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-repeat"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["background-size"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_O;
 $SPEEDX_STYLE_ATTR["border"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-bottom"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-bottom-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-bottom-left-radius"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-bottom-right-radius"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-bottom-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-bottom-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-collapse"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-image"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-image-outset"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-image-repeat"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-image-slice"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-image-source"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-image-width"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-left"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-left-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-left-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-left-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-radius"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-right"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-right-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-right-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-right-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-spacing"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-top"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-top-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-top-left-radius"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-top-right-radius"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["border-top-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-top-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["border-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["bottom"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["box-align"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-direction"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-flex"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-flex-group"] = SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["box-ordinal-group"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-orient"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-shadow"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["box-sizing"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["caption-side"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["clear"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["clip"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["column-break-after"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["column-break-before"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["column-break-inside"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["column-count"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-fill"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-gap"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-rule"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-rule-color"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-rule-style"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-rule-width"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["columns"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["column-span"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["column-width"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["content"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["counter-increment"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["counter-reset"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["cursor"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["device-aspect-ratio"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["device-height"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["device-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["direction"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["display"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["empty-cells"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["filter"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-basis"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-direction"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-flow"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-grow"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-shrink"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["flex-wrap"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["float"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-family"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-sizes"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-size-adjust"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-stretch"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-variant"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["font-weight"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["height"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["justify-content"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["left"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["letter-spacing"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["line-height"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["list-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["list-style-image"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["list-style-position"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["list-style-type"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["margin"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["margin-bottom"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["margin-left"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["margin-right"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["margin-top"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["max-height"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["max-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["min-height"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["min-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["scrollbar-3dlight-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-darkshadow-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-highlight-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-shadow-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-arrow-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-face-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-track-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["scrollbar-base-color"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["filter"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["behavior"] = SPEEDX_STYLE_W3C; //只有IE早期版本才有的属性（css1)
 $SPEEDX_STYLE_ATTR["text-fill-color"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["text-stroke"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["text-stroke-width"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["text-stroke-color"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["box-reflect"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["tap-highlight-color"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["user-drag"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["overflow-scrolling"] = SPEEDX_STYLE_WEBKIT; //只有-webkit-才有的属性(css3);
 $SPEEDX_STYLE_ATTR["opacity"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["order"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["outline"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["outline-color"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["outline-offset"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["outline-style"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["outline-width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["overflow"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["overflow-wrap"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["overflow-x"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["overflow-y"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["padding"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["padding-bottom"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["padding-left"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["padding-right"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["padding-top"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["page-break-after"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["page-break-before"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["page-break-inside"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["perspective"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["perspective-origin"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["pointer-events"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["position"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["quotes"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["resize"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ ;
 $SPEEDX_STYLE_ATTR["right"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["scrollbar-3dlight-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-arrow-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-base-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-darkshadow-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-face-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-highlight-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-shadow-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["scrollbar-shadow-color"] = SPEEDX_STYLE_W3C;//只有IE6.0支持
 $SPEEDX_STYLE_ATTR["table-layout"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["tab-size"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ ;
 $SPEEDX_STYLE_ATTR["text-align"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["text-align-last"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ ;
 $SPEEDX_STYLE_ATTR["text-decoration"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["text-decoration-color"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["text-decoration-line"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["text-decoration-skip"] = SPEEDX_STYLE_WEBKIT;//只有部分webkit支持
 $SPEEDX_STYLE_ATTR["text-decoration-style"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;//只有部分webkit支持,火狐支持，其它不支持
 $SPEEDX_STYLE_ATTR["text-indent"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["text-justify"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["text-overflow"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["text-shadow"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["text-size-adjust"] = SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["text-transform"] = SPEEDX_STYLE_W3C;//只有FF高版本支持
 $SPEEDX_STYLE_ATTR["text-underline-position"] = SPEEDX_STYLE_WEBKIT;//只有部分webkit支持
 $SPEEDX_STYLE_ATTR["top"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["transform"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["transform-origin"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["transform-style"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["transition"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["transition-delay"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["transition-duration"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["transition-property"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["transition-timing-function"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ;
 $SPEEDX_STYLE_ATTR["transparent"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["user-select"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT + SPEEDX_STYLE_MOZ + SPEEDX_STYLE_MS;
 $SPEEDX_STYLE_ATTR["vertical-align"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["visibility"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["white-space"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_MOZ ;
 $SPEEDX_STYLE_ATTR["width"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["word-break"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["word-spacing"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["word-wrap"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["writing-mode"] = SPEEDX_STYLE_W3C + SPEEDX_STYLE_WEBKIT;
 $SPEEDX_STYLE_ATTR["z-index"] = SPEEDX_STYLE_W3C;
 $SPEEDX_STYLE_ATTR["zoom"] = SPEEDX_STYLE_W3C; 
?>

有一些配置是为自定义工具函数定义的，到后面用的时候会有说明

实体定义我们选从CSS属性类开始，我定义为speedx_css_item,其定义如下，内有说明

/**
* CSS属性类，用于创建兼容的CSS属性
* 测试文件：test.class_speedx_style_item.php
* @$name: 属性名，非法的属性名会被删除。当传入的是完整的“属性名：属性值”对时,如：'width:200px;'，后面的参数会被忽略，
* @$value: 属性值。
* @$important: 是否添加!important标识 
*/class speedx_css_item{
 public $name = null;
 public $value = null;
 public $browser = SPEEDX_STYLE_DEFAULT;//系统默认支持的浏览器，默认为兼容模式
 private $important = false;
 private function _analysis_(){
 $this->name = is_null($this->name) ? null :  trim ($this->name."");
 $this->value = is_null($this->value) ? null : trim($this->value."");
 $this->important = is_bool($this->important) ? $this->important : false;
 $attrList = [];
 $attrValue = [];
 $cssNameTpl = [ //定义输出格式中属性名部分的前缀格式
 "w3c"=>"<cssName>",
 "ms" =>"-ms-<cssName>",
 "moz" => "-moz-<cssName>",
 "webkit"=>"-webkit-<cssName>",
 "o" => "-o-<cssName>",
 ];
 $cssValueTpl = [ //定义输出格式中属性值部分的前缀格式
 "w3c"=>"<cssValue><important>;",
 "ms" =>"-ms-<cssValue><important>;",
 "moz" => "-moz-<cssValue><important>;",
 "webkit"=>"-webkit-<cssValue><important>;",
 "o" => "-o-<cssValue><important>;",
 ];
 
 $cssName = $this->name;
 $cssValue = $this->value;
 //去除参数中多余的空格
 $preg[] = '/(\s)+/';
 $preg[] = '/\s*(\()\s*/';
 $preg[] = '/\s*(\))\s*/';
 $preg[] = '/\s*(,)\s*/';
 $cssValue = preg_replace($preg,"$1",$cssValue);
 if(empty($cssName) || is_empty($cssValue))return "";
 $cssName = strtolower($cssName); 
 $this->value = $cssValue;
 $SPEEDX_STYLE_ATTR = $GLOBALS["SPEEDX_STYLE_ATTR"];
 if(!isset($SPEEDX_STYLE_ATTR[$cssName]))return "";
 $SPEEDX_STYLE_VALUE = $GLOBALS["SPEEDX_STYLE_VALUE"];
 $SPEEDX_STYLE_FUNCTION = $GLOBALS["SPEEDX_STYLE_FUNCTION"];
 $SPEEDX_STYLE_SHOW = $GLOBALS["SPEEDX_STYLE_SHOW"]; 
 //将参数解析为对应的浏览器所组成的数组。
 $func = function($pa){
 $brw = decomposeBinary($pa); 
 $key = [];
 foreach($brw as $val){
 if($val === SPEEDX_STYLE_W3C)$key[] = "w3c";
 if($val === SPEEDX_STYLE_MOZ)$key[] = "moz";
 if($val === SPEEDX_STYLE_WEBKIT)$key[] = "webkit";
 if($val === SPEEDX_STYLE_MS)$key[] = "ms";
 if($val === SPEEDX_STYLE_O)$key[] = "o";
 }
 return $key; 
 };
 
 //解析当前CSS属性所被允许支持的浏览器列表(数组)
 $allowBrower = null;
 if($this->browser === SPEEDX_STYLE_DEFAULT){
 $allowBrower = $func($SPEEDX_STYLE_SHOW);
 }else{
 $allowBrower = $func($this->browser);
 } 
 if(empty($allowBrower))return "";
 //解析当前CSS属性值所被支持的浏览器列表(数组)，列表中必须包含"w3c"标准值。 
 if(!in_array("w3c",$allowBrower))$allowBrower[] = "w3c";
 //属性值的解析是在属性存在的情况下进行的，以下分别对CSS属性及属性值进行解析，分别得出相应浏览器支持情况。 
 //判断属性值是不是CSS函数，如果是函数，则输出支持的浏览器数组
 $isFunction = false; //为ture时表示是函数
 $funcBrowser = [SPEEDX_STYLE_NULL];
 foreach($SPEEDX_STYLE_FUNCTION as $key => $value){
 if(strpos($cssValue,$key) === 0){
 $isFunction = true; 
 $funcBrowser = $func($value);
 }
 } 
 if($isFunction){ 
 if(empty($funcBrowser))return "";
 foreach($funcBrowser as $val){
 if(in_array($val,$allowBrower)){
 $attrValue[$val] = $cssValueTpl[$val]; 
 } 
 }
 }else{
 /**
 * $SPEEDX_STYLE_VALUE是全局定义的CSS属性值列表（数组），有些CSS属性的值是固定的，
 * 有些CSS属性值除了固定值值以外也支持自定义的值。在$SPEEDX_STYLE_VALUE中定义如下：
 * $SPEEDX_STYLE_VALUE[CSS属性]["BASIC-SUPPORT"]:基本支持的属性值，这些值目前为止所有浏览器都支持，用"w3c"表示；
 * $SPEEDX_STYLE_VALUE[CSS属性]["USER-DEFINE"]：自定义属性，应用于标准格式"w3c";
 * $SPEEDX_STYLE_VALUE[CSS属性][其它固定值]：不同的浏览器支持情况不同，分别用"w3c","webkit","moz","ms","o"表示；
 * 其它说明详情参见配置文件：config.speedx.php
 */ if(isset($SPEEDX_STYLE_VALUE[$this->name])){
 if(isset($SPEEDX_STYLE_VALUE[$this->name][$cssValue])){ 
 $brw = $func($SPEEDX_STYLE_VALUE[$this->name][$cssValue]); 
 if(empty($brw))return "";
 foreach($brw as $val){
 if(in_array($val,$allowBrower)){
 $attrValue[$val] = $cssValueTpl[$val]; 
 } 
 } 
 }else{
 if(in_array($cssValue,$SPEEDX_STYLE_VALUE[$this->name]["BASIC-SUPPORT"],true)){ 
 $attrValue["w3c"] = $cssValueTpl["w3c"]; 
 }else{
 if(isset($SPEEDX_STYLE_VALUE[$this->name]["USER-DEFINE"])){ 
 $attrValue["w3c"] = $cssValueTpl["w3c"]; 
 }
 }
 }
 }else{ 
 $attrValue["w3c"] = $cssValueTpl["w3c"]; 
 } 
 }
 //解析CSS属性浏览器支持情况：
 $brw = $func($SPEEDX_STYLE_ATTR[$this->name]);
 if(empty($brw))return "";
 foreach($brw as $val){
 if(in_array($val,$allowBrower)){
 $attrList[$val] = $cssNameTpl[$val]; 
 }
 }
 foreach($attrList as $key => $val){
 if(isset($attrValue[$key])){
 $attrList[$key] = $attrList[$key] . ":" . $attrValue[$key];
 $attrValue[$key] = ""; 
 }else{
 $attrList[$key] = $attrList[$key] . ":" . $cssValueTpl["w3c"];
 } 
 }
 if(isset($attrList["w3c"])){
 $w3c = [];
 $w3c[] = $attrList["w3c"];
 foreach($attrValue as $val){
 if(!empty($val)){
 $w3c[] = $cssNameTpl["w3c"] . ":" . $val;
 } 
 }
 $w3c = implode("",$w3c);
 $attrList["w3c"] = $w3c; 
 }
 $CSS = implode("",$attrList);
 $important = $this->important ? " !important" : "";
 $CSS = str_replace(['<cssName>','<cssValue>','<important>'],[$this->name,$this->value,$important],$CSS);
 return $CSS;
 } 
 /**
 * @cssName: CSS属性名称
 * @cssValue: CSS属性值
 * @important: 是否加!important 加权，false不加，true:为加这一属性
 */ public function __construct($cssName = null,$cssValue = null,$important = false){ 
 $cssName = trim($cssName."");
 $cssName = empty($cssName) ? null : $cssName;
 
 $cssValue = trim($cssValue . "");
 $cssValue = trim(rtrim($cssValue,";"));
 $cssValue = empty($cssValue) ? null : $cssValue;
 
 $important = is_bool($important) ? $important : false;
 $this->name = $cssName;
 $this->value = $cssValue;
 $this->important = provValue(false,[true,false],$important);
 }
 public function __toString(){
 return $this->_analysis_();
 }
}

以下是我设计的相关操作函数，方便构造对象

function provValue($nullValue = null,$rightfulValues = [],$givingValue = null){
 if(in_array($givingValue,$rightfulValues,true)){
 return $givingValue;
 }else {
 return $nullValue;
 }
}
/**
 * 创建样式属性节点
 * @name : 属性名
 * @value: 属性值
 * @imp : !important加权
 */function create_css_item($name=null,$value=null,$imp = false){
 return new speedx_css_item($name,$value,$imp);
}
/**
 * 从字符串创建单一CSS样式属性节点，
 * @input为包含属性对的字符串(即属性名：属性值，如：‘width:100px;’);
 * 注意，一次只能创建一个样式属性，包含多余的属性对时，会被舍弃
 */function create_css_item_from_string($input=""){
 $input = trim($input."");
 $name = null;
 $valu = null;
 $impt = false;
 $preg = "/(\/\*[^\/]*\*\/)|(-webkit-)|(-moz-)|(-ms-)|(-o-)/";
 $input = preg_replace($preg,"",$input); 
 $preg = '/([\w\-]+)\s*\:\s*([^;!]+)\s*(!important)*/i';
 if(preg_match($preg,$input,$_classItem)){ 
 $name = isset($_classItem[1]) ? trim($_classItem[1]) : null;
 $valu = isset($_classItem[2]) ? trim($_classItem[2]) : null;
 $impt = isset($_classItem[3]) ? true : false;
 }else{
 $name = is_null($name) ? null : trim($name."");
 $valu = is_null($valu) ? null : trim($valu.""); 
 }
 
 $item = new speedx_css_item($name,$valu,$impt);
 if(empty($item . ""))return null;
 return $item;
}
/**
 * 从字符串创建CSS样式属性节点，如果有多个属性对，字符串应以“;"号隔开，
 * 创建的多个属性节点以数组的形式返回，创建失败返回null;
 * @string为包含属性字符描述的字符串，如：‘width:100px; border:1px solid grayd;"等。
 */function create_css_items_from_string($string){
 $classItems = [];
 if(is_string($string)){
 $string = trim($string);
 $preg = "/(\/\*[^\/]*\*\/)|(-webkit-)|(-moz-)|(-ms-)|(-o-)/";
 $string = preg_replace($preg,"",$string);
 if(!empty($string)){
 $string = explode(";",$string);
 $items = [];
 foreach($string as $_item){
 $_item = trim($_item);
 if(!empty($_item)){
 $items[] = $_item;
 }
 }
 unset($string);
 $items = array_unique($items); 
 foreach($items as $item){
 $item = create_css_item_from_string($item);
 if(!is_null($item)){
 $classItems[] = $item;
 }
 }
 }
 }
 if(empty($classItems))return null;
 return $classItems;
}

现在我们来测试一下，代码如下：

$item1 = create_css_item_from_string("width:100px");
$item2 = create_css_item_from_string("display:inline-box;");
$item3 = create_css_item_from_string("position:sticky;");
$item4 = create_css_item("display","inline-flexbox",true);
$item5 = create_css_item("cursor","zoom-out",true);
$item6 = create_css_item_from_string('background-clip: padding-box !important;');
$item7 = create_css_item_from_string('border-bottom-left-radius: repeating-linear-gradient ( 180deg, #f00 , #ff0 , 10%, #f00 , 15%);');
echo $item1 ."<br/>";
echo $item2 ."<br/>";
echo $item3 ."<br/>";
echo $item4 ."<br/>";
echo $item5 ."<br/>";
echo $item6 ."<br/>";
echo $item7 ."<br/>";

结果如下：

width:100px;
-ms-display:inline-box;-webkit-display:-webkit-inline-box;-moz-display:-moz-inline-box;display:inline-box;
position:sticky;position:-webkit-sticky;
-ms-display:-ms-inline-flexbox !important;-webkit-display:inline-flexbox !important;-moz-display:inline-flexbox !important;display:inline-flexbox !important;
cursor:zoom-out !important;cursor:-webkit-zoom-out !important;cursor:-moz-zoom-out !important;
-webkit-background-clip:padding-box !important;-moz-background-clip:padding-box !important;background-clip:padding-box !important;
-webkit-border-bottom-left-radius:-webkit-repeating-linear-gradient(180deg,#f00,#ff0,10%,#f00,15%);-moz-border-bottom-left-radius:-moz-repeating-linear-gradient(180deg,#f00,#ff0,10%,#f00,15%);border-bottom-left-radius:repeating-linear-gradient(180deg,#f00,#ff0,10%,#f00,15%);

好像还不错的样子。 待续

智云一二三科技

用PHP操作DOM (一）

关于作者: 智云科技

给这篇文章的作者打赏

关于作者: 智云科技

相关文章

阿里云免费虚拟主机安装WordPress博客图文教程

PHP框架yaf的优点和缺点

PHP垃圾回收机制的一些浅薄理解

热门文章

1分享新浪图床上传接口源码

2PHP简单实现路由Route功能

3Tideways、xhprof 和 xhgui 打造 PHP 非侵入式监控平台

4centos系统如何查看是否安装了mysql

5curl 工具简述