<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>花儿开了 &#187; compress</title>
	<atom:link href="http://blog.istef.info/tag/compress/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.istef.info</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sun, 06 Jun 2010 05:52:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
	<atom:link rel='hub' href='http://blog.istef.info/?pushpress=hub'/>
		<item>
		<title>如何写一个很小的 CSS 文件</title>
		<link>http://blog.istef.info/2007/09/24/how-to-create-small-css-files/</link>
		<comments>http://blog.istef.info/2007/09/24/how-to-create-small-css-files/#comments</comments>
		<pubDate>Mon, 24 Sep 2007 15:39:54 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[compress]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.istef.info/2007/09/24/how-to-create-small-css-files/</guid>
		<description><![CDATA[看了这篇文章，想想自己也经常和 CSS 打交道，对于压缩 CSS 还是有一点心得。总结一下，和大家分享。 我们知道，在 XHTML+CSS 布局流行的今天，CSS 已经成为一个网站事实上的“门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢？这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量，同时缩短用户打开你网页所需的时间。既节省了流量开支，又获得了更好的用户体验，何乐不为呢？下面我们一起看看有哪些缩小 CSS 的方法。 简化你的注释很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*//*&#8212;comments&#8212;&#8212;&#8211;*//*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：/*Comments*/这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。 简化颜色代码在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”：color: #ffffff;color: #ff88ff;事实上，在 CSS 中是可以简化这个写法的，我们可以写成：color: #fff;color: #f8f; 使用单行属性代替多行属性在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：padding-top: 10px;padding-bottom: 10px;padding-left: 0;padding-right: 0;我们可以写成：padding: 10px 0 10px 0;顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：padding: 10px 0;上下左右都相同时，甚至可以写成：padding: 10px;对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 [...]]]></description>
			<content:encoded><![CDATA[<p align="center"><img height="181" alt="2007-9-34" src="http://blog.istef.info/wp-content/uploads/wlw-upload/CSS_143CE/2007934.jpg" width="429" border="0"> </p>
<p>看了<a href="http://www.divitodesign.com/blog/2007/09/create-smaller-css-files/">这篇文章</a>，想想自己也经常和 CSS 打交道，对于压缩 CSS 还是有一点心得。总结一下，和大家分享。</p>
<p>我们知道，在 XHTML+CSS 布局流行的今天，CSS 已经成为一个网站事实上的“门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢？这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量，同时缩短用户打开你网页所需的时间。既节省了流量开支，又获得了更好的用户体验，何乐不为呢？下面我们一起看看有哪些缩小 CSS 的方法。</p>
<ol>
<li><strong>简化你的注释</strong><br />很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：<br /><em>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/<br />/*&#8212;comments&#8212;&#8212;&#8211;*/<br />/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/<br /></em>在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：<br /><em>/*Comments*/<br /></em>这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。
<li><strong>简化颜色代码</strong><br />在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”：<br /><em>color: #ffffff;<br />color: #ff88ff;<br /></em>事实上，在 CSS 中是可以简化这个写法的，我们可以写成：<br /><em>color: #fff;<br />color: #f8f;</em>
<li><strong>使用单行属性代替多行属性</strong><br />在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：<br /><em>padding-top: 10px;<br />padding-bottom: 10px;<br />padding-left: 0;<br />padding-right: 0;<br /></em>我们可以写成：<br /><em>padding: 10px 0 10px 0;</em><br />顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：<br /><em>padding: 10px 0;<br /></em>上下左右都相同时，甚至可以写成：<br /><em>padding: 10px;</em><br />对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。
<li><strong>当值为 0 时可省略掉单位</strong><br />例如：<em>padding: 0;</em>
<li><strong>同时设定多个元素的属性<br /></strong>举例说明。例如：<br /><em>h1 {<br />&nbsp;&nbsp;&nbsp; margin: 0;<br />&nbsp;&nbsp;&nbsp; padding: 0;<br />}<br />h2 {<br />&nbsp;&nbsp;&nbsp; margin: 0;<br />&nbsp;&nbsp;&nbsp; padding: 0;<br />}<br />h3 {<br />&nbsp;&nbsp;&nbsp; margin: 0;<br />&nbsp;&nbsp;&nbsp; padding: 0;<br />}<br /></em>更赞的写法是这样：<br /><em>h1,h2,h3 {<br />&nbsp;&nbsp;&nbsp; margin: 0;<br />&nbsp;&nbsp;&nbsp; padding: 0;<br />}</em>
<li><strong>删除空白和换行<br /></strong>这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：<br /><em>h1&nbsp; {<br />&nbsp;&nbsp;&nbsp; margin: 0;<br />&nbsp;&nbsp;&nbsp; padding: 0;<br />}<br />blockquote {<br />&nbsp;&nbsp;&nbsp; background-color: #ffcccc;<br />}<br /></em>应该处理成：<br /><em>h1{margin:0;padding:0;}<br />blockquote{background:#fcc;}<br /></em>事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。
<li><strong>设定过期时间，使用 GZip<br /></strong>如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。</li>
</ol>
<div class="wlWriterSmartContent" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:1ed3da80-b5c5-4fc0-9839-a47cfcb736ef" style="padding-right: 0px; display: inline; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px"></div>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2007%2F09%2F24%2Fhow-to-create-small-css-files%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2007%2F09%2F24%2Fhow-to-create-small-css-files%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2007/09/24/how-to-create-small-css-files/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached
Page Caching using memcached
Database Caching 1/11 queries in 0.004 seconds using memcached
Object Caching 305/319 objects using memcached

Served from: blog.istef.info @ 2012-02-13 18:01:20 -->
