从事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节点基本内容: 就是节点内的内容,也可以人包含其它节点
为此,我弄了个比较详细的config文件,其中定义的HTML及CSS中所用的标签、属性及相关浏览器的支持情况。其中重要的几项常量定义我做一下说明:
- 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" "http://www.w3.org/TR/html4/strict.dtd">'; const DOCTYPE_HTML_4_01_TRANSITIONAL = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'; const DOCTYPE_HTML_4_01_FRAMESET = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">'; const DOCTYPE_XHTML_1_0_STRICT = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'; const DOCTYPE_XHTML_1_0_TRANSITIONAL = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'; const DOCTYPE_XHTML_1_0_FRAMESET = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">'; const DOCTYPE_XHTML_1_1 = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'; /* ***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%);
好像还不错的样子。待续