从事PHP开发很多年了，也写过些小项目，经常要在后台生成前端输出的HTML脚本，说白了就是把HTML语言以字符串的方式嵌入在PHP的输入语句中，单纯的输出没什么问题，但遇到DOM修改时很是麻烦，要做各种查找与替换，还要写一大堆正则，反反复复，效率极低。也用过网上的一些PHP操作DOM的开源项目，不过问题多多，要么就停更很久了，要么不完善，我在写代码这个问题上是个不将就的人，所以，就自己想整一个这么个项目，我的目的很简单，就是要在PHP里操作DOM就像Jquery一样，能生成，能解析，还要能符合目前H5及CSS3的特性。我准备花点时间来记录这一过程，应该要分几个章节来写，我的环境是LAMP，PHP基于PHP7.3版本。这是我在简书上写的第一篇文章，所以态度上我是很认真的。我给这个项目取名叫SPEEDX,很多命名前缀我会带上这个项目名，为什么呢，因为PHP中我特别不喜欢命名空间这么个玩意，不知为什么，性格如此。
往往想象很美好的事情，现实确很骨感。为了达到对DOM及CSS精准操作的目的，不搞大杂会，为此我仔细分析了一下，本项目操作主要对像应该这样分类：
- CSS类：
.className{属性列表} - CSS属性 :
vName: value - DOM标签 诸如
<div></div>等 - DOM属性,如：
<div class="cssName" id="idName"></div> - 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%);
好像还不错的样子。下面是CSS类的定义
/**
* CSS_class类
* 测试文件：test.class_speedx_style_class.php
* @$className: 样式名，为空时，则创建匿名样式
* @$classItem: CSS属性对象或样式对象，对于特定类，其内部可以包含样式类。
* 本类是创建CSS样式的关键类，根据CSS类特性，可分为以下几类：
* SPEEDX_CLASS_ANONYMOUS：匿名类，即没有类名称的CSS类
* SPEEDX_CLASS_IMPORT：@import类
* SPEEDX_CLASS_CHARSET：@charset类
* SPEEDX_CLASS_MEDIA：@media类
* SPEEDX_CLASS_FONTFACE：@font-face类
* SPEEDX_CLASS_PAGE：@page类
* SPEEDX_CLASS_KEYFRAMES：@keyframes类
* SPEEDX_CLASS_SUPPORTS：@supports类
* SPEEDX_CLASS_STANDARD：标准类
* 其方法：append()可以直接输入一个 样式属性｜类｜数组｜直接创建属性类的参数。
* 本方法可根据输入的参数类型做自动判断。
*/
class speedx_css_class{
private $className = "";
private $attrList = [];
private $type = SPEEDX_CLASS_ANONYMOUS;
public $browser = SPEEDX_STYLE_DEFAULT;
//public $level = 0;
private function _setName_($className){
if(is_string($className)){
$className = trim(rtrim(trim($className),";"));
if(empty($className)){
$this->className = "";
}else{
$this->className = $className;
}
}else{
$this->className = "";
}
if(!empty($this->className)){
if(strpos($this->className,'@import') === 0){$this->type = SPEEDX_CLASS_IMPORT;}
elseif(strpos($this->className,'@charset') === 0){$this->type = SPEEDX_CLASS_CHARSET;}
elseif(strpos($this->className,'@media') === 0){$this->type = SPEEDX_CLASS_MEDIA;}
elseif(strpos($this->className,'@font-face') === 0){$this->type = SPEEDX_CLASS_FONTFACE;}
elseif(strpos($this->className,'@page') === 0){$this->type = SPEEDX_CLASS_PAGE;}
elseif(strpos($this->className,'@keyframes') === 0){$this->type = SPEEDX_CLASS_KEYFRAMES;}
elseif(strpos($this->className,'@supports') === 0){$this->type = SPEEDX_CLASS_SUPPORTS;}
else{$this->type = SPEEDX_CLASS_STANDARD;}
}else{
$this->className = "";
$this->type = SPEEDX_CLASS_ANONYMOUS;
}
}
private function _addItem_($itemNode){
if(is_css_item($itemNode)){
$cssItem = $this->attrList;
$cssItem = array_filter($cssItem,function($_item)use($itemNode){
if(is_css_class($_item)){
return true;
}elseif(is_css_item($_item)){
if($_item->name === $itemNode->name){
return false;
}else{
return true;
}
}else{
return false;
}
});
$cssItem[] = $itemNode;
$this->attrList = $cssItem;
}
}
private function _addClass_($classNode){
if(is_css_class($classNode)){
$classList = $this->attrList;
$classList = array_filter($classList,function($_classNode)use($classNode){
if(is_css_class($_classNode)){
if($_classNode->name === $classNode->name){
return false;
}else{
return true;
}
}elseif(is_css_item($_classNode)){
return true;
}else{
return false;
}
});
$classList[] = $classNode;
$this->attrList = $classList;
}
}
private function _analysis_(){
$classString = "";
if($this->type === SPEEDX_CLASS_ANONYMOUS && empty($this->attrList))return $classString;
if(in_array($this->type,[SPEEDX_CLASS_IMPORT,SPEEDX_CLASS_CHARSET]))return $this->className.";";
//if(empty($this->attrList))return $classString;
$type = [SPEEDX_CLASS_ANONYMOUS,SPEEDX_CLASS_MEDIA,SPEEDX_CLASS_FONTFACE,SPEEDX_CLASS_PAGE,SPEEDX_CLASS_SUPPORTS,SPEEDX_CLASS_STANDARD];
$attrList = "";
if(in_array($this->type,$type)){
foreach($this->attrList as &$attr){
if(is_css_item($attr)){
$attr->browser = $this->browser;
}
}
$attrList = implode("",$this->attrList);
$classString = [$this->className,"{",$attrList,"}"];
$classString = implode("",$classString);
return $classString;
}elseif($this->type === SPEEDX_CLASS_KEYFRAMES){
//$attrList = implode("",$this->attrList);
$tpl = ["-moz-","-webkit-",""];
$string = "";
foreach($tpl as $val){
if($val == "-moz-"){
foreach($this->attrList as &$attr){
$attr->browser = SPEEDX_STYLE_MOZ;
}
}else if($val == "-webkit-"){
foreach($this->attrList as &$attr){
$attr->browser = SPEEDX_STYLE_WEBKIT;
}
}else{
foreach($this->attrList as &$attr){
$attr->browser = SPEEDX_STYLE_DEFAULT;
}
//$this->itemBrowser = SPEEDX_STYLE_DEFAULT;
}
$attrList = implode("",$this->attrList);
$strTpl = ['@'.$val.ltrim($this->className,'@'),"{",$attrList,"}"];
$string .= implode("",$strTpl);
}
$classString = $string;
return $classString;
}
}
public function __construct($className = ""){
$this->_setName_($className);
}
/**
* 向speedx_class类中添加CSS属性：
* $attrNode参数可以为改下几种：
* 属性类：即参数为speedx_style_item对象
* 样式类：即speedx_class类
* 数组：由speedx_class对象和speedx_style_item对象组成的数组
*/
public function append($attrNode = null){
$importType = [SPEEDX_CLASS_IMPORT,SPEEDX_CLASS_CHARSET];
$standardType = [SPEEDX_CLASS_ANONYMOUS,SPEEDX_CLASS_PAGE,SPEEDX_CLASS_FONTFACE,SPEEDX_CLASS_STANDARD];
$keyframesType = [SPEEDX_CLASS_SUPPORTS,SPEEDX_CLASS_MEDIA,SPEEDX_CLASS_KEYFRAMES];
if(is_null($attrNode))return $this;
if(in_array($this->type,$importType))return $this;
if(is_css_item($attrNode)){
$this->_addItem_($attrNode);
}else if(is_css_class($attrNode)){
if(in_array($this->type,$standardType)){
$_addItem = $attrNode;
if(is_css_class($attrNode)){
$_addItem = $attrNode->value;
foreach($_addItem as $_item){
$this->_addItem_($_item);
}
}else{
$this->_addItem_($_addItem);
}
}else if(in_array($this->type,$keyframesType)){
if(is_css_item($attrNode)){
$this->_addItem_($attrNode);
}else if(is_css_class($attrNode)){
$this->_addClass_($attrNode);
}
}
}else if(is_array($attrNode)){
foreach($attrNode as $node){
$this->append($node);
}
}else{
return $this;
}
return $this;
}
/**
* 移除指定的属性｜样式类对象
*/
public function remove($attrName = null){
if(empty(trim($attrName.""))){
$this->attrList = [];
return $this;
}
$attrName = strtolower(trim($attrName));
$this->attrList = array_filter($this->attrList,function($_node)use($attrName){
return $_node->name !== $attrName;
});
return $this;
}
/**
* 判断类中是否存在指定的属性对象;
*/
public function exists($attrName){
if(empty($this->attrList))return false;
$attrName = trim($attrName."");
if(empty($attrName)) return false;
foreach($this->attrList as $item){
if(is_css_item($item)){
if($item->name === $attrName) return true;
}
}
return false;
}
public function __get($name){
if($name === "name"){
return $this->className;
}elseif($name === "value"){
return $this->attrList;
}elseif($name === "type"){
return $this->type;
}elseif(!empty(trim($name.""))){
$name = strtolower(trim($name));
foreach($this->attrList as $val){
if($val->name === $name){
return $val;
}
}
}else{
return null;
}
}
public function __toString(){
return $this->_analysis_();
}
}
操作工具函数定义如下：
/**
* 创建CSS类节点
* @name:类名，为空时创建匿名样式类
*/
function create_css_class($name=""){
return new speedx_css_class($name);
}
/**
* 从给定的文本创建样式类，返回由样式类组成的数组。其中不包含匿名类，转化失败时，返回null。
* @$string:要转化的字符表达式
*/
function create_css_classes_from_string($string){
$string = trim($string);
$preg = [];
$preg[] = '/\/\*[^\/]*\*\//';//删除注释
$preg[] = "/(\/\*[^\/]*\*\/)|(-webkit-)|(-moz-)|(-ms-)|(-o-)/i";//删除浏览器前缀
$string = trim(preg_replace($preg,"",$string));
$class = [];
$preg = "/(@[^\{\}]+;)|([@\-#\.\s*\w%]+)\s*\{([^\{\}]+)\}/i";
$index = 0;
while(preg_match($preg,$string,$matches,PREG_OFFSET_CAPTURE)){
$classFlag = "<cssFlag_$index>";
$classKey = "cssFlag_$index";
$fullClass = $matches[0][0];
$pos = $matches[0][1];
$length = strlen($fullClass);
$class[$classKey] = trim($fullClass);
$string = trim(substr_replace($string,$classFlag.";",$pos,$length));
$index++;
$className = "";
$classBody = "";
if(isset($matches[1][0])) $className .= trim($matches[1][0]);
if(isset($matches[2][0])) $className .= trim($matches[2][0]);
if(isset($matches[3][0])) $classBody .= trim($matches[3][0]);
$new_css_class = create_css_class($className);
if(empty($new_css_class."")){
$class[$classKey] = null;
}else{
if(!empty($classBody)){
$classBody = explode(";",$classBody);
$classBody = array_filter($classBody,function($item){return !empty(trim($item));});
$classBody = array_map(function($item){return trim($item);},$classBody);
$classBody = array_unique($classBody);
foreach($classBody as $_body){
$_body = trim(ltrim($_body,"<"));
$_body = trim(rtrim($_body,">"));
if(array_key_exists($_body,$class)){
if(is_css_class($class[$_body])){
$new_css_class->append($class[$_body]);
}
$class[$_body] = null;
}else{
$new_item = create_css_item_from_string($_body);
if(!is_null($new_item)){
$new_css_class->append($new_item);
}
}
}
}
$class[$classKey] = $new_css_class;
}
}
$class = array_filter($class,function($_class){return is_css_class($_class);});
//以下为去重
$classNames = [];
$_classes = [];
foreach($class as $_class){
$class_name = $_class->name;
if(!in_array($class_name,$classNames)){
$classNames[] = $class_name;
$_classes[] = $_class;
}
}
$class = $_classes;
unset($_classes); unset($classNames);
if(empty($class)) return null;
return $class;
}
测试一下看看效果：
//创建标准样式类
$cssItem1 = create_css_item("width","100px");
$cssItem2 = create_css_item("display","inline-box");
$class_standard_div = create_css_class(".div")->append($cssItem1)->append($cssItem2);
echo $class_standard_div . "<hr/>";
//获取成员属性对象的值。
echo $class_standard_div->width->value . "<hr/>";
//创建import样式类
$class_import = create_css_class("@import url(example.css) screen and (min-width:800px);");
echo $class_import . "<hr/>";
//创建charset样式类
$class_charset = create_css_class('@charset "utf-8"');
echo $class_charset . "<hr/>";
//创建supports样式类
$supports_item = create_css_class(".demo")->append(create_css_item("box-shadow","2px 2px 0 rgba(0, 0, 0, .3)"));
$class_supports = create_css_class("@supports (box-shadow: 2px 2px) or (-moz-box-shadow: 2px 2px) or (-webkit-box-shadow: 2px 2px)")->append($supports_item);
echo $class_supports . "<hr/>";
//创建keyframe样式类
$keyframe_item1 = create_css_class("0%")->append(create_css_item("transform","translate(0, 0)"));
$keyframe_item2 = create_css_class("20%")->append(create_css_item("transform","translate(20px, 20px)"));
$keyframe_item3 = create_css_class("40%")->append(create_css_item("transform","translate(40px, 0)"));
$keyframe_item4 = create_css_class("60%")->append(create_css_item("transform","translate(60px, 20px)"));
$keyframe_item5 = create_css_class("80%")->append(create_css_item("transform","translate(80px, 0)"));
$keyframe_item6 = create_css_class("100%")->append(create_css_item("transform","translate(100px, 20px)"));
$class_keyframe = create_css_class("@keyframes testanimations")->append($keyframe_item1)
->append($keyframe_item2)->append($keyframe_item3)->append($keyframe_item4)->append($keyframe_item5)->append($keyframe_item6);
echo $class_keyframe . "<hr/>";
$item = create_css_item("width","100px;");
$anyclass = create_css_class()->append($item);
echo $anyclass . "<br/>";
结果如下
.div{width:100px;-ms-display:inline-box;-webkit-display:-webkit-inline-box;-moz-display:-moz-inline-box;display:inline-box;}
100px
@import url(example.css) screen and (min-width:800px);
@charset "utf-8";
@supports (box-shadow: 2px 2px) or (-moz-box-shadow: 2px 2px) or (-webkit-box-shadow: 2px 2px){.demo{-webkit-box-shadow:2px 2px 0 rgba(0,0,0,.3);-moz-box-shadow:2px 2px 0 rgba(0,0,0,.3);box-shadow:2px 2px 0 rgba(0,0,0,.3);}}
@-moz-keyframes testanimations{0%{-moz-transform:translate(0,0);transform:translate(0,0);}20%{-moz-transform:translate(20px,20px);transform:translate(20px,20px);}40%{-moz-transform:translate(40px,0);transform:translate(40px,0);}60%{-moz-transform:translate(60px,20px);transform:translate(60px,20px);}80%{-moz-transform:translate(80px,0);transform:translate(80px,0);}100%{-moz-transform:translate(100px,20px);transform:translate(100px,20px);}}@-webkit-keyframes testanimations{0%{-webkit-transform:translate(0,0);transform:translate(0,0);}20%{-webkit-transform:translate(20px,20px);transform:translate(20px,20px);}40%{-webkit-transform:translate(40px,0);transform:translate(40px,0);}60%{-webkit-transform:translate(60px,20px);transform:translate(60px,20px);}80%{-webkit-transform:translate(80px,0);transform:translate(80px,0);}100%{-webkit-transform:translate(100px,20px);transform:translate(100px,20px);}}@keyframes testanimations{0%{-ms-transform:translate(0,0);-webkit-transform:translate(0,0);-moz-transform:translate(0,0);transform:translate(0,0);}20%{-ms-transform:translate(20px,20px);-webkit-transform:translate(20px,20px);-moz-transform:translate(20px,20px);transform:translate(20px,20px);}40%{-ms-transform:translate(40px,0);-webkit-transform:translate(40px,0);-moz-transform:translate(40px,0);transform:translate(40px,0);}60%{-ms-transform:translate(60px,20px);-webkit-transform:translate(60px,20px);-moz-transform:translate(60px,20px);transform:translate(60px,20px);}80%{-ms-transform:translate(80px,0);-webkit-transform:translate(80px,0);-moz-transform:translate(80px,0);transform:translate(80px,0);}100%{-ms-transform:translate(100px,20px);-webkit-transform:translate(100px,20px);-moz-transform:translate(100px,20px);transform:translate(100px,20px);}}
{width:100px;}
以上就是关于CSS样式类的设计，DOM操作要复杂些。待续
网友评论