css

    为select和input type=file标签添加样式

    21 Apr 2010

    select和input type=file两个都是html标签,但是它们在不同的浏览器上显示是完全不同,对于那些对UI要求非常高的网站来说,这是不可接受的。由于这两个标签的样式是由浏览器实现的,所以要想完全通过css来统一样式几乎是不可能的,所以我们这里需要借助javascript的帮助。

    看上去这个应该由两个标签组成,左边是一个text field,右边是一个上传的按钮,要想在所有的浏览器上都把input type=file做成这个样子好像没这个可能,可以想到的办法就是设置两个层,下面的层由一个text field和一个按钮组成,上面是一个透明的input type=file的层,高度和宽度正好覆盖下面的层就可以了。

    我是借助 javascript来生成下面的那个层

    $.each($('form input[type=file]'), function(i, elem) {
      $(elem).parent().append($("<div class...
    Read More

    Tags 


    css sprite best practices

    03 Apr 2010

    css sprite最佳实践(中文版)

    (Updated on 2010-4-4, thank Scott Ballantyne )

    The advantage of using the css sprite is to reduce a large number of http requests, so it makes the web page loaded much faster. I often find it it painful for me to compose a lot of images into one css sprite image and measure the x and y positions for each image.

    Last year, I wrote a css_sprite gem, but to use it you need to define all the images you want to do the css sprite in the configuration file, and it is not easy to use. Because of this, recently I rewrote the css_sprite gem, it is not necessary to use configuration file any more by default, th...

    Read More

    Tags 


    css sprite最佳实践

    02 Apr 2010

    css sprite best practices (english version)

    应用css sprite的好处在于可以大量减少http请求数,从而达到更快加载页面的效果。

    但是对于像我这样的懒人,你让我每次都一个一个把图片copy到一个css_sprite图片里,还得量一下这个每个图片对应的x和y坐标,实在是一种折磨。

    去年我就写了一个css_sprite的插件,但是由于需要在配置文件中定义所有需要组合在一起的图片,用起来还是很麻烦,不够傻瓜化。最近我把css_sprite插件重写了一遍,默认不需要使用配置文件,遵循rails的Convention Over Configuration的思想,可以做到全自动的css sprite操作。

    首先,让我们看看目录结构的Convention是如何定义的

    上图中蓝色部分就是Convention的css sprite目录,也就是在public/images目录下面的css_sprite目录或者以css_sprite结尾的目录(比如another_css_sprite),需要执行css_sprite操作。

    绿色部分则是需要被css sprite的图片,你可以动态的在css sprite目录下面增加或删除图片,css sprite操作...

    Read More

    Tags 


    button_to的使用

    02 Mar 2010

    页面间的跳转或者请求,用得最多的就是link_to和form_for,一个发送get或delete请求,一个post或put请求。但是碰到投票之类的链接,虽然是一个post请求,但是form里面却不需要任何数据,碰到这样的情况,我们希望像link_to那样一行搞定。

    也许你会通过link_to 'xx', 'xx', :method => :delete联想到link_to 'xx', 'xx', :method => :post,但是很不幸,没有这样使用的。还好,rails提供了一个简单的helperbutton_to

    button_to 'Vote', post_votes_path(post), :class => 'vote_icon'

    生成的html代码如下

    <form class="button-to" action="/post/1/comments" method="post">
        <div>
            <input type="submit" value="Vote" class="vote_icon" />
            <input type...
    Read More

    Tags 


    hover and png for ie6

    24 Feb 2010

    IE6可以说是前端设计师们的最大梦魇,不支持圆角,margin double等等问题,使得书写css的时候不得不专门针对IE6浏览器增加额外的规则。

    hover和png透明也是IE6所不支持的,解决方法如下:

    hover可以通过Whatever:hover脚本来hack,使用方法很简单,在ie6.css文件中定义

    .need_hover_element {
      behavior: url("/stylesheets/csshover3.htc"
    )

    png透明需要iepngfix脚本来hack,使用方法稍微复杂些,首先在ie6.css文件中定义

    .need_png_transparent_element {
      behavior: url("/stylesheets/iepngfix.htc")
    }

    接着在html文件中引入iepngfix_tilebg.js

    然后修改iepngfix.htc文件,修改其中的blank.gif文件路径

    IEPNGFix.blankImg = '/images/blank.gif';

    好了,你的网站现在能够使IE6支持hover和png透明了,不过当png文件是在hover...

    Read More

    Tags 


    Less -- Css的Ruby扩展

    18 Jun 2009

    Less是对Css的一种Ruby扩展,使得Css可以支持变量,Mixin,内嵌规则和数字操作。

    Less的特点在官网上[]http://lesscss.org/]1写得很清楚,这里就不再重复了。试用了一天,还不错,不过和Sass比起来还是有些差距的:

    1. Less只支持单文件,没有Sass中的import功能,所以Css重用上也只能局限在单文件中。

    2. Less内嵌规则不支持单行css定义

    div {
      input {color:red;}
    }

    这样写lessc编译的时候会报错,必须改成下面的写法:

    div {
      input {
        color:red;
      }
    }

    觉得这个应该算是一个bug吧。

    3. Less不支持多元素嵌套

    div.style1, div.style2 {
      input {
        color:red;
      }
    }

    它会被解析成

    div.line1, div.line2 input {
      color:red;
    }

    而Sass会解析成

    div.line1 input, div.line2 input {
      col...
    Read More

    Tags 


    Css消除Image点击后的虚线框

    11 Jun 2009

    网上很多文章关于这个问题都是说使用

    a img {border: 0}

    其实这是不够的,应该还要加上

    outline: 0

    对于通过a做成的button也同样适用

    Read More

    Tags 


    css sprite

    02 May 2009

    前文提到通过压缩合并js和css来减少HTTP请求,同样的,也可以通过合并image来减少HTTP请求。

    方法很简单,就是通过css的background来设置标签的背景,包括背景图片的文件名,是否平铺,从图片的哪个位置开始显示,图片显示的宽度和高度。我们可以把所有的图片都合并在一个图片里,然后用background来截取显示。

    这样,只需要进行一次HTTP请求就能拿到网站很多的图片了,而且合并之后图片的大小也比原来图片大小的总和要小得多,减小了网络开销。

    当然这样做也是有代价的,主要是网站的可维护性下降了,要修改图片会变得比较麻烦。其次,不能直接使用image标签,需要使用div+css来显示。所以你需要在网站的性能和可维护性之间做出权衡。

    另外,像背景平铺这样的工作,通过css sprite是做不到的,必须使用单独的image

    Read More

    Tags 


    用css截取字符串

    21 Aug 2008

    一般网页上显示字符串有两种方式,一是通过程序语言,如php, java来截取,二是通过css来截取。前者的缺点是页面上字符缺失,不利于SEO,而且遇到中英文混合时,往往造成截取长度不同;css的缺点是有可能在页面上看到截取一半的字。不过总体还是css的优点占优。

    下面是css截取字符串的代码:

    div {
      width:300px;
      white-space:nowrap;
      overflow:hidden;
      float:left;
      -o-text-overflow:clip;     /* for Opera */
      text-overflow:clip;        /* for IE */
    }

    如果你想在截取字符串之后加上...可以用以下的代码:

    div {
      width:300px;
      white-space:nowrap;
      overflow:hidden;
      float:left;
      -o-text-overflow:ellipsis;     /* for Opera */
      text-overflow:ellipsis;     ...
    Read More

    Tags