首页 > 后端开发 > php教程 > 有否PHP实现的自动生成CSS3兼容性前缀?

有否PHP实现的自动生成CSS3兼容性前缀?

WBOY
发布: 2016-06-06 20:52:16
原创
943 人浏览过

CSS3有很多好用的新属性,比如圆角、阴影、动画等,但是这些属性在不同浏览器中都是通过-moz-、-webkit-等的私有标签进行支持的。因此需要跨浏览器实现的时候,必须一条属性分写好几遍。例如:

-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
登录后复制
登录后复制

有一个好用的网站(http://prefixr.com/),可以帮助生成这些代码。但这是非实时的生成,需要手动加入自己的文件中。因此遇到修改的时候就相当繁琐。

有没有一种php的实现,在css中只书写标准属性,例如

/* test.css */
div
{
  box-shadow: 20px;
}
登录后复制
登录后复制

通过php读取css文件并自动识别后,实时输出如下代码:

/* test.php?file=test.css */
div
{
-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
}
登录后复制
登录后复制

这样在css的编写、调试、修改中就变得相当地快捷,并且能快捷地生成发布用文件。将来浏览器支持发生变化时,也只需修改一下相应的规则,然后简单生成一次文件即可。

现在比较麻烦的是CSS属性的复杂性,参考 http://prefixr.com/ 首页上的示例就涉及到了其中的多数。
如何通过正则实现自动匹配和添加?
或者有没有大致的实现思路?

回复内容:

CSS3有很多好用的新属性,比如圆角、阴影、动画等,但是这些属性在不同浏览器中都是通过-moz-、-webkit-等的私有标签进行支持的。因此需要跨浏览器实现的时候,必须一条属性分写好几遍。例如:

-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
登录后复制
登录后复制

有一个好用的网站(http://prefixr.com/),可以帮助生成这些代码。但这是非实时的生成,需要手动加入自己的文件中。因此遇到修改的时候就相当繁琐。

有没有一种php的实现,在css中只书写标准属性,例如

/* test.css */
div
{
  box-shadow: 20px;
}
登录后复制
登录后复制

通过php读取css文件并自动识别后,实时输出如下代码:

/* test.php?file=test.css */
div
{
-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
}
登录后复制
登录后复制

这样在css的编写、调试、修改中就变得相当地快捷,并且能快捷地生成发布用文件。将来浏览器支持发生变化时,也只需修改一下相应的规则,然后简单生成一次文件即可。

现在比较麻烦的是CSS属性的复杂性,参考 http://prefixr.com/ 首页上的示例就涉及到了其中的多数。
如何通过正则实现自动匹配和添加?
或者有没有大致的实现思路?

PHP 实现的不是很清楚,但是有一个 javascript 实现的 LESS,在编写的时候调用特殊 js 文件实现快速调试,部署的时候可以直接输出成 CSS 文件。

这功能应该交给IDE生成,phpstrome就可以通过插件完成这个需求

建议使用less等预处理工具;

可以尝试:

  • http://ecomfe.github.io/est/

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板