时间:2021-07-01 10:21:17 帮助过:38人阅读
这个是我正在试做的CSS3展开非标准属性的php
已有的输入数据如下:
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 这种形式的类内部属性名称引用的问题,后来强行用 & 指针解决了,但是中间遇到了巨大的疑惑,作为野生的自学党表示压力很大,下回做个例子再问)。
实际项目里算是绕过了,但是作为在写代码时遇到的问题,还是想提出来向高手们征求下看法,
如何快速地从外部去判断一个字符串在数组里的三种情况:不存在,键名,值……
感谢@joyqi大的关注。按建议直接放上实际代码。
这个是我正在试做的CSS3展开非标准属性的php
已有的输入数据如下:
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 这种形式的类内部属性名称引用的问题,后来强行用 & 指针解决了,但是中间遇到了巨大的疑惑,作为野生的自学党表示压力很大,下回做个例子再问)。
实际项目里算是绕过了,但是作为在写代码时遇到的问题,还是想提出来向高手们征求下看法,
如何快速地从外部去判断一个字符串在数组里的三种情况:不存在,键名,值……
实际上你所说的单值,也是存在键的,只不过php中可以省掉按顺序存储的键名
foreach ($a as $key => $val) { if (is_int($key)) { // 处理单值 } else { // 处理键值 } }