从事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%);
彷佛还不错的样子。待续
