感谢@joyqi大的关注。按建议直接放上实际代码。
这个是我正在试做的CSS3展开非标准属性的php
已有的输入数据如下:
<?php
$_proprules=array( //css3兼容属性表 如无特别定义则以 -xxx- 形式附加于头部
'animation'=>array('webkit','moz','ms'),
'border-radius'=>array('webkit','moz','o'),
'border-top-right-radius'=>array('webkit','moz'=>'-moz-border-radius-topright','o'),
'border-top-left-radius'=>array('webkit','moz'=>'-moz-border-radius-topleft','o'),
'border-bottom-right-radius'=>array('webkit','moz'=>'-moz-border-radius-bottomright','o'),
'border-bottom-left-radius'=>array('webkit','moz'=>'-moz-border-radius-bottomleft','o'),
'border-colour'=>array('moz'),
'box-shadow'=>array('webkit','moz','o'),
'transition'=>array('webkit','moz','ms','o'),
'transform'=>array('webkit','moz','ms','o'),
......
);
$_valuerules=array( //css3兼容值表 如无特别定义则以 -xxx- 形式附加于头部
'linear-gradient'=>array('webkit','moz','ms','o'),
'box'=>array('webkit','moz','o'),
'box-shadow'=>array('webkit','moz')
......
);
?>
根据以上规则对一份css文件进行处理
.container {
box-shadow: 20px;
transition: box-shadow 2s;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
animation: slide 1s alternate;
background: linear-gradient(top, #e3e3e3 10%, white);
display: box;
}
希望实现自动展开非标准属性写法
.container {
-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
-webkit-transition: -webkit-box-shadow 2s;
-moz-transition: -moz-box-shadow 2s;
-o-transition: box-shadow 2s;
-ms-transition: box-shadow 2s;
transition: box-shadow 2s;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottom-left: 4px;
border-bottom-left-radius: 4px;
-webkit-animation: slide 1s alternate;
-moz-animation: slide 1s alternate;
-ms-animation: slide 1s alternate;
animation: slide 1s alternate;
background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
background: -moz-linear-gradient(top, #e3e3e3 10%, white);
background: -o-linear-gradient(top, #e3e3e3 10%, white);
background: -ms-linear-gradient(top, #e3e3e3 10%, white);
background: linear-gradient(top, #e3e3e3 10%, white);
display: -webkit-box;
display: -moz-box;
display: box;
}
这其中需要按照css文件的属性值对依次去检查是否存在非标准属性、非标准属性如何构成,相应的就需要从外部去判断规则数组中的键值对或者单值。
我的主要逻辑是这样的:
比如说检查css的时候到了
border-top-right-radius : 4px;
这一行,代码检查发现属性名 “border-top-right-radius” 需要 webkit、moz、o 三种兼容方式,值 4px 不参与兼容 (注:这里对值也加入判断,是因为存在一些特殊的属性比如 transition ,其属性名和值同时都要参与兼容),一共需要重复三次兼容。
然后对 webkit、moz、o 进行循环,希望从属性名规则中分别读到一下三条规则:
'webkit'=>'-webkit-border-top-right-radius',
'moz'=>'-moz-border-radius-topright',
'o'=>'-o-border-top-right-radius'
当然,由于开始在书写规则的时候使用的是简化的方案,于是在读取中就需要对 webkit、moz、o 进行判断,看这个在数组中到底是值还是键名,是键名就直接取得其值,是值就按默认规则生成需要的字符串。问题就出在这里。
在规则数组中循环,做内部判断并去css中反查在这种场景下不现实(特别是css巨大的时候)。我能想到的只有连续组合利用array_key_exists()和array_search()来验证,其中还得过滤掉单值和键值对中的值重复的情况,效率很是低下。
当然我实际在做的时候因为无从入手,于是干脆就绕过这个问题,直接用函数对这个简化书写的规则数组重新格式化了一遍(题外话,格式化的过程中还遇到了诸如 $this->$propname 这种形式的类内部属性名称引用的问题,后来强行用 & 指针解决了,但是中间遇到了巨大的疑惑,作为野生的自学党表示压力很大,下回做个例子再问)。
实际项目里算是绕过了,但是作为在写代码时遇到的问题,还是想提出来向高手们征求下看法,
如何快速地从外部去判断一个字符串在数组里的三种情况:不存在,键名,值……