Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

关于前端CSS预处理的一些零碎想法

  这个博客程序由于是2012年写的,所以里面一些很蛋疼的代码以及当年兼容IE6的代码。于是我懒得改直接就在前端用JS对其一些样式做批处理了。这么做似乎确实很管用,不过我似乎已经有现成的LESS前端版这个轮子了,也许根本不需要再造一个。
  我遇到的是这样的情况,一些字体无法在其它平台兼容,而且程序CSS中又出现了多处单独的字体定义。修改整个CSS的话工程太大,因此需要一种简单的解决方案。因此通过程序扫描样式表,对字体做替换。类似这样:
<style>
body {font:12px/1.5 Consolas;}
</style>
<script>
//执行这段代码前通常会做环境检测
var forEach=[].forEach;
forEach.call(document.styleSheets,function(e){
  forEach.call(e.rules||e.cssRules,function(e){
    e.style.fontFamily=e.style.fontFamily.replace("Consolas","Menlo");
  });
});
</script>
<h1>Test</h1>
  由于是演示我就懒得写太多兼容代码了,直接用了forEach,请在标准浏览器上测试。但是首先,我并不提倡这种写法,只是遇到一些古老代码的兼容处理时才迫不得已使用的。也许有人会问,为什么不直接在字体定义时就直接把这些字体都加上呢?比如: body {font:12px/1.5 Menlo,Consolas;}   确实,这是推荐写法。但实际上整个CSS中会出现很多个单独设置字体的地方。如果在这些单独设置字体的地方都加上一长串字体设置显然是蛋疼的。当然,也可以将一些字体组合定义为单独的类名,在HTML中需要的地方使用。这就是另一个问题了,这里先不讨论,就当是无法修改HTML的情况吧。
  于是,CSS批处理的需求就出现了。这确实解决了我的问题,由此我甚至还想利用一些自定义的CSS-var来做特殊解析。但突然想到LESS之类的东西也在做这同样的事情,瞬间觉得自己弱爆了。嘛,还是先去看看LESS的前端版比较好。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^