书写高效的CSS

这篇文章已经在草稿箱里放了好久,考虑一下还是发布吧。这是翻译的文章,原文在这里Efficiently Rendering CSS


我们写的CSS有多高效?换个说法,浏览器渲染我们的CSS会有多快?我承认这个问题我考虑的不够多

这个问题本应该是浏览器厂商考虑的——他们的浏览器越快,用户就越喜欢用他们的产品。Mozilla有一篇关于这方面最佳实践的文章,一直坚持Web应该更快的Google也有一篇

我们一起看看他们阐释的一些主要观点,然后探讨一下这些原则的实用价值

从右向左

浏览器如何读取你的CSS选择器?我们需要明白的最重要的一点是从右向左。比如这个选择器ul > li a[title="home"],浏览器首先读取的是a[title="home"]。这个首先被读取的部分我们叫它key selector,它是浏览器最終要选择的元素。

ID最快,Universal最慢

有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal

READ MORE>>

用jQuery和CSS3给图片添加圆角

你可能已经注意到我博客上的图片是带有圆角的,以免你没看过,先来张照片看看吧,这似乎真的是我第一次拍照片。

waitan

这可是用我们纳税人的血汗钱堆出来的灯火辉煌又毫无实际用途的外滩啊,有这些钱我能买多少MBP,买多少法拉利、兰博基尼啊TAT 看来我也不是什么好东西。。。

READ MORE>>

给网页加一些类似Vim的快捷键

其实很早就想加点快捷键方便一下了,这种能够增加便利性而实现起来又不复杂的功能为什么不加呢。这里http://github.com/tzuryby/jquery.hotkeys

然后是一些如此的代码

var d = $(document);

d.bind('keydown', 'j', function(){
  d.scrollTo({ top: '+=100px', left: '+=0' }, 10);
});
d.bind('keydown', 'k', function(){
  d.scrollTo({ top: '-=100px', left: '+=0' }, 10);
});

d.bind('keydown', 'g', function(){
  d.scrollTo($('#container'), 400);
});
d.bind('keydown', 'shift+g', function(){
  d.scrollTo($('#footer'), 400);
});

没javascript经验,请见量。。。

READ MORE>>

要有反抗IE的霸气

自从用了自己写的Blog,自从换上这么一个性感主题,我就决定把IE拒于门外了。我的努力没有让我失望,你们网站的访客有如此纯洁的吗,娃哈哈呀娃哈哈~

browsers

我们没有理由忍受如此龌龊的浏览器。还是那句话,你自己都不考虑自己的工作环境了,别人再为你考虑岂不是比你还傻逼(我很高兴ibus五笔里默认有这个词)

凭什么让全世界的程序员为微软的错误买单,少给我来什么IE是事实的标准,中国就是你这种逆来顺受的人太多了!!!!!!!

READ MORE>>

震精了!CSS竟然可以这样

不得不承认,我奥特曼了,似乎一直没怎么学习新的东西,我现在会的都还是上学那会随便看的一点点。我已经很久很久没真的学点东西了!!!我的Linux都一个多月没更新了!

看看这些可爱的泡泡,纯纯的CSS。。。

speech bubbles in pure css

READ MORE>>

CSS等级进度条

现在的网站论坛一般都会有用户等级这一说,如果单纯的只是用文字或一个等级图片似乎不够形象。要为网站论坛的用户等级作一个形象的展示,弄这么一个进度条则能很好的说明问题

记得在一些论坛上见过这种类似的,但是当想要找的时候又不知道应该到哪去找,也不知道这东西应该用什么名字。不要看这么个小东西,从头实现起来还是费了点时间,虽然到最后一看結果不过如此。。。下面是简单的实现方法

def user_level_bar(user)
  <<-EOF
  <div class="fullscore">
    <div class="score" style="width:#{user_level_length(user)}px;"></div>
    <div class="img">
      #{user_level_text(user)}
    </div>
  </div>
  EOF
end

这是个rails的helper,虽然主要是说CSS,但是这进度总规是动态的吧。。。

READ MORE>>

在Linux下用vim做Flex开发

基于某些原因,我不得不迅速的学点flex开发,在这3天里没日没夜的了解了一点皮毛。首先就是开发工具的问题,貌似很早的时候就看到Adobe放弃Linux版本Flex builder的消息,现在到官方看了看果然已经死在了labs中。

Flex Builder 3 for Linux alpha 4 was released on 8/14/2008. Please download alpha 4.

而Flash本来就没有Linux化的打算。Adobe对Linux的无视似乎是有道理的,想想吧,面对强大的vim/emacs之流,adobe的产品竟争力何在。。。

写完习惯性的废话,下面是简要的配置
1、当然是先要有SDK了,这是免费的啊,下载后解包就OK

2、配置下写代码的工具vim
首先是要語法高亮,这有两个现成的syntax(放到.vim/syntax)actionscript.vimmxml.vim

然后就是actionscript和mxml代码的自动缩进问题了,网络上似乎没找到现成的indent文件(位于.vim/indent),不过基于as3与java很像,mxml就是个xml吗,所以直接把java和xml的indent文件拿来湊合一下吧,使用3天,效果很好。

READ MORE>>