Fomly

今天在cnbeta上看到《Web 开发与设计师速查手册大全（上）》（原文地址）里面有很多资源下载，但是是分开的，所以就自己打了个包上传到大米盘上。这里顺便给大米盘做个广告，真的很不错的一个网盘，速度快界面也很友好，而且支持迅雷电驴等直接下载。我可不是枪手，只是实话实说而已。
文件列表如下：

1. CSS Help Sheet 02.pdf
2. css_cheatsheet_v2.pdf
3. csscheatsheet.pdf
4. css-cheat-sheet-v2.pdf
5. HTML Help Sheet 02.pdf
6. html_colors_cheatsheet_v2.pdf
7. html_entities_cheatsheet_v3.pdf
8. html-cheat-sheet-v1.pdf
9. javascript_refererence.pdf
10. javascript-cheat-sheet-v1.pdf
11. JavaScript-DOM-Cheatsheet.pdf
12. jquery_1.3_cheatsheet_v1.pdf
13. mootools-12-cheat-sheet-pf.pdf
14. php-cheat-sheet-v2.pdf
15. PHPRefCard.pdf
16. prototype_cheatsheet_1.6.0.2.pdf
17. qrg0007.pdf
18. rgb-hex-cheat-sheet-v1.pdf
19. SEO_Web_Developer_Cheat_Sheet.pdf
20. xhtml_1.1_cheatsheet_v3.pdf
21. XMLquickref.pdf

下载地址： 点击我 | SkyDriver

目的很简单，用于修复IE6对background-image中的24-bit PNG支持问题（无法透明）。

使用也很简单：

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); /* EXAMPLE */
/* string argument can be any CSS selector */
/* using .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->



主要原理是使用VML，因为VML中很好的实现了对PNG格式的支持。

已知问题：

1. 不能用于body上的CSS样式中含有PNG图片
2. <TD>和<TR>中的表现也不是很好
3. 没有实现background-position: fixed;

Link: DD_belatedPNG

Download: uncompressed (~9Kb ) …  compressed (~5Kb)

Link: CSS Background image on html image element?
很另类的一个用法，用CSS为图片增加背景图片，念起来都有点拗口;)

img {
display: block;
background: url(‘parallax.gif’) no-repeat bottom left;
padding: 93px 100px 75px 100px;
}

看来代码其实很简单，把图片定义成display: block，再加上padding就OK了。

效果到这里去看:  little demo

Link: improve web application performance（Wordpress的站，自己加代理）

作者提到了几个提高Web程序性能的方法：

1. Minimize HTTP based Requestss

2. HTTP Compression

3. Correct Formatted Images at the Right Place

4. Compress CSS, JavaScript and Images

5. CSS at Top

6. Javascript at Bottom

7. Content Delivery Network: (CDN)

8. Ajax

9. Ajax vs. Callback

10. Reduce Cookie size

11. Use Cache appropriately

12. Upload compiled code rather than source code

13. Conclusions

具体内容请到作者网站查看。

Link:Print Watermarks with CSS

通过CSS来控制打印时候水印，作者不是通过把水印作为背景来打印，因为只有在打印的时候，特别设置了打印背景才会打印出水印。所以作者直接把水印放在一个DIV里面，通过定义外链CSS的media来实现的.在网页显示的时候，把水印DIV设置为Display:none;而在用于打印的CSS里（即在media=print的外链CSS里），调整DIV层的位置来实现。同时还利用CSS 的fixed position，使打印的每页里都出现水印。
这是用于打印的CSS里定义的水印样式片段，为了兼容多种浏览器，用了许多CSS hacks

div.watermark{
display:block;
position:fixed;
z-index:-1;
width:100%;
height:100%;
}
div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */
div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */
div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */

@media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */

div.watermark div{
position:absolute;
left:0;
width:99%;
}

这里有Demo，进入之后，点击浏览器里的打印预览就能看到效果。

Link: The 5 Best Firebug Extensions

5个Firebug 的扩展，Firebug是Web开发时用于查看编辑调试HTML、CSS、JS最牛X的Fx扩展。这次这5个可以算得上是扩展的扩展了;)

1、YSlow(homepage)

YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

用于分析页面，生成报告，以此来让你调整代码，建立高性能的网站。

Install YSlow

Read the rest of this entry »

Link:CSS improvements in Firefox 3

前不久Fx3正式版发布，好像马上要通过吉尼斯记录认证了，先恭喜一下。下面是一些Fx3在CSS方式的改进。

• The display property’s inline-block and inline-table values are now implemented.
• The font-size-adjust property now works on all platforms; previously it was only supported on Windows.
• rgba() and hsla() support for color (bug 147017)
• :default pseudo-class support (bug 302186)
• -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available values have been added to width, min-width, and max-width (bug 311415 and bug 402706)
• HTML soft hyphens (­) are now supported.
• Pre-formatted tabs work much better in proportional fonts, following the CSS 2.1 spec.
• The ime-mode property is supported.
• The CSS text-rendering property for HTML is now supported (bug 387969).
• -moz-border-*-start and -moz-border-*-end CSS properties are implemented (bug 74880).
• -moz-initial is now implemented for almost all CSS properties (except quotes and -moz-border-*-colors) bug 80887.
• window.getComputedStyle() now supports all supported CSS properties (bug 316981).
• content’s none value is now supported (bug 378535).
• cursor’s none value is now supported (bug 346690).
• Background images now properly clip to a -moz-border-radius (bug 24998).
• white-space’s pre-wrap value is now supported (bug 261081).
• Selectors like :first-child, :only-child, :last-child (bug 73586), :empty (bug 98997), or the + combinator (bug 229915) are now updated dynamically (bug 401291).
• Negative z-index values are supported correctly.

PS:说实话，里面只有个别属性用过，很多属性都认不得。嘿嘿