Tag Archive for 'css'

使用PHP压缩CSS的三种方法

一个网站通常包含多个css文件。网站越复杂,这些css文件也会越庞大,对它们进行适当的压缩,可以节约不少带宽(在访问量巨大的时候尤为明显)。

下面介绍三种使用PHP压缩css的方法。

第一种方法:

修改css的文件名,比如把 v2op.css 改成 v2op.css.php。调用的方式如下:

<link rel="stylesheet" type="text/css" media="screen" href="/v2op.css.php"/>

然后修改此v2op.css.php,在文件开头加上
<?php
if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
header("Content-type: text/css");
?>

在文件最后面加上
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

第二种方法:

同样是先修改css的文件名,把v2op.css 修改为 v2op.css.php。

然后在文件开头处加上下面这段代码(注意文件的编码,这里是utf-8,根据你自己的需要修改)
<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

第三种方法:

新建一个php文件,例如 v2op.css.php,然后include进来你的css文件,复制如下代码

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* 此处修改为你自己的css路径 */
  include('v2op.css');

  ob_end_flush();
?>

我个人更喜欢这种方式 :) 

当然,如果您嫌麻烦,也可以使用现成的工具去优化css,比如 csstidy

超链接样式的正确顺序(link-visited-hover-active)

超链接A的4个CSS属性是有顺序的。
错误的顺序会导致一些问题,例如:超链接访问过后 hover 样式就不出现。

正确的顺序应该为,link-visited-hover-active。

a:link {
color: #676777;
text-decoration: none;
}

a:visited {
color: #676777;
text-decoration: none;
}

a:hover {
color: #90909F;
text-decoration: underline;
}

a:active {
color: #676777;
text-decoration: none;
}

温故而知新:

  • a:link 设置 a 对象在未被访问前的样式。
  • a:visited 设置 a 对象在其链接地址已被访问过时的样式。
  • a:hover 设置 a 对象在其鼠标悬停时的样式。
  • a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

延伸阅读:《web标准常见问题集合》

IE双倍浮动边界的bug

可怜的IE有这样的一个bug,通常会搞的你很郁闷。

bug描述:如果你对一个元素(比如div)设置了浮动,例如float:right,那么你再对它设置margin-right:10px;在ie中显示的效果就会变成margin-right:20px;就是10px被ie诡异的翻了一倍。

解决方案很简单,在这个元素里加入一行:display:inline; 即可搞定。

想了解更多的内容就阅读《The IE Doubled Float-Margin Bug》