朝心 http://www.xincss.com 关注工作中的琐碎，记录生活中的点滴 Mon, 05 Jul 2010 02:06:48 +0000 http://wordpress.org/?v=2.7 en hourly 1 jQuery性能优化 http://www.xincss.com/?p=161 http://www.xincss.com/?p=161#comments Mon, 05 Jul 2010 02:04:05 +0000 朝心 http://www.xincss.com/?p=161 阅读全文（6684字）]]>

现在越来越多的人应用jQuery了，有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.

  1. 总是从ID 选择器开始继承
  2. 在 class前使用tag
  3. 将 jquery对象缓存起来
  4. 掌握 强大的链式操作
  5. 使用子查询
  6. 对直 接的DOM操作进行限制
  7. 冒 泡
  8. 消除无 效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握 jquery库

1. 总是从ID选择器开始继承

在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.

<div id=“content“>
<form method=“post“ action=“/“>
<h2>Traffic Light</h2>
<ul id=“traffic_light“>
<li><input type=“radio“ class=“on“ name=“light“ value=“red“ /> Red</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“yellow“ /> Yellow</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“green“ /> Green</li>
</ul>
<input class=“button“ id=“traffic_button“ type=“submit“ value=“Go“ />
</form>
</div>

像这样选择按钮是低效的:

var traffic_button = $(‘#content .button‘);

用ID直接选择按钮效率更高:

var traffic_button = $(‘#traffic_button’);

选择多个元素

提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.

var traffic_lights = $(‘#traffic_light input’);

2. 在class前使用tag

第二快的选择器是tag选择器($(‘head’)). 同理,因为它来自原生的getElementsByTagName() 方法.

<div id=“content“>
<form method=“post“ action=“/“>
<h2>Traffic Light</h2>
<ul id=“traffic_light“>
<li><input type=“radio“ class=“on“ name=“light“ value=“red“ /> Red</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“yellow“ /> Yellow</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“green“ /> Green</li>
</ul>
<input class=“button“ id=“traffic_button“ type=“submit“ value=“Go“ />
</form>
</div>

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:

var content = $(‘div#content’);

用ID修饰ID也是画蛇添足:

var traffic_light = $(‘#content #traffic_light’);

3. 将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind(‘click‘, function(){…});
$(‘#traffic_light input.on).css(‘border’, ’3px dashed yellow’);
$(‘#traffic_light input.on).css(‘background-color‘, ‘orange‘);
$(‘#traffic_light input.on).fadeIn(‘slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ’3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(‘slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.
缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

// 在全局范围定义一个对象 (例如: window对象)
window.$my =
{
// 初始化所有可能会不止一次要使用的查询
head : $(‘head‘),
traffic_light : $(‘#traffic_light‘),
traffic_button : $(‘#traffic_button‘)
};

function do_something()
{
//现在你可以引用存储的结果并操作它们
var script = document.createElement(‘script‘);
$my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $(‘#some_ul li‘);
$my.other_results = $(‘#some_table td‘);

// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css(‘border-color‘, ‘red‘);
$my.traffic_light.css(‘border-color‘, ‘green‘);
}

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
.css(‘border’, ’3px dashed yellow’)
.css(‘background-color’, ‘orange’)
.fadeIn(‘slow’);

这样可以写更少的代码, 让我们的js更轻量.

5. 使用子查询

jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:

<div id=“content“>
<form method=“post“ action=“/“>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red” /> Red</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” class=”off” name=”light” value=”green” /> Green</li>
</ul>
<input class=“button“ id=“traffic_button“ type=“submit“ value=“Go“ />
</form>
</div>

例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);

提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

6. 对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素, 千万不要这么做:

var top_100_list = [...], // 假设这里是100个独一无二的字符串
$mylist = $(‘#mylist‘); //jQuery 选择到 <ul> 元素t

for (var i=0, l=top_100_list.length; i<l; i++)
{
$mylist.append(‘<li>‘ + top_100_list[i] + ‘</li>‘);
}

我们应该将整套元素字符串在插入进dom中之前全部创建好:

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist‘), // jQuery selects our <ul> element
top_100_li = “”; // 这个变量将用来存储我们的列表元素

for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_li += ‘<li>‘ + top_100_list[i] + ‘</li>‘;
}
$mylist.html(top_100_li);

我们在插入之前将多个元素包裹进一个单独的父级节点会更快:

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist‘), // jQuery selects our <ul> element
top_100_ul = ‘<ul id=”#mylist”>‘; // This will store our entire unordered list

for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_ul += ‘<li>‘ + top_100_list[i] + ‘</li>‘;
}
top_100_ul += ‘</ul>‘; // //关闭无序列表

$mylist.replaceWith(top_100_ul);

如果你做了以上几条还是担心有性能问题,那么:

  • 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以”离线”的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
  • 使用DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

7. 冒泡

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

像这样绑定事件是低效的:

$(‘#entryform input).bind(‘focus‘, function(){
$(this).addClass(‘selected‘);
}).bind(‘blur‘, function(){
$(this).removeClass(‘selected‘);
});

我们需要在父级监听获取焦点和失去焦点的事件:

$(‘#entryform‘).bind(‘focus‘, function(e){
var cell = $(e.target); // e.target grabs the node that triggered the event.
cell.addClass(‘selected‘);
}).bind(‘blur‘, function(e){
var cell = $(e.target);
cell.removeClass(‘selected‘);
});

父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

8. 消除无效查询

尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.

只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.

例如, 你的”文章”页面模板, 你可能会引用如下的代码在body结束处:

<script type=“text/javascript>
mylib.article.init();
</script>
</body>

如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.

<ul id=“traffic_light“>
<li><input type=“radio“ class=“on“ name=“light“ value=“red“ /> Red</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“yellow“ /> Yellow</li>
<li><input type=“radio“ class=“off“ name=“light“ value=“green“ /> Green</li>
</ul>
<script type=“text/javascript>
mylib.traffic_light.init();
</script>

你的全局js库可能会是这样子的:

var mylib =
{
article_page :
{
init : function()
{
// Article page specific jQuery functions.
}
},
traffic_light :
{
init : function()
{
// Traffic light specific jQuery functions.
}
}
}

9. 推迟到 $(window).load

jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括iframe)被下载完成后执行.

$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});

多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.

10. 压缩js

推荐一个js在线压缩地址: http://dean.edwards.name/packer/

11. 全面掌握jquery库

知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个jQuery的速查手册, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.

原文：http://www.artzstudio.com/2009/04/jquery-performance-rules/#use-tags-before-classes ]]> http://www.xincss.com/?feed=rss2&p=161 Web 开发与设计之 Google 兵器谱[转] http://www.xincss.com/?p=154 http://www.xincss.com/?p=154#comments Mon, 19 Apr 2010 02:39:23 +0000 朝心 http://www.xincss.com/?p=154 阅读全文（1622字）]]> Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。

1. Google Chrome Developer Tools

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar 的一个扩展，用于调试你的网页，包含一个 DOM 探测器，一个 JavaScript 调试台，可以设置执行断点和跟踪，一个类似 YSlow 的执行分析器。
2. Webmaster Tools

一个对网站拥有者来说非常有用的程序，可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序，发现搜索引擎爬虫遇到的错误，可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页，并发现你站点中的错误链接。
3. Google Web Toolkit

Google Web Tootlkit （GWT）是一个 Web 开发基础框架，为开发者提供了一些基础类库，GWT 同 Google 的其它产品，如 AdWords，FeedBurner，Google Ajax 类库等紧密集成，这里有一个 Google Docs 教程。
4. Google Code Search

帮助开发者搜索代码，支持正则表达式搜索，或在一个高级搜索界面中，很直观地搜索那些可能会让你事半功倍的公共代码。
5. Page Speed

Google 现在已经将网站加载速度算到搜索排名算法中，Page Speed 可以帮助你分析你的网站性能，基于 Google Web 性能最佳实践。
6. Browser Size

该工具帮你分析，你的网页在不同浏览器，不同浏览尺寸下的显示状况，非常适合看看自己的网页在不滚动的情况下，在各种浏览尺寸下显示到哪里。
7. Google Ajax Libraries API

Google Ajax Libraries API 包含多种流行的 JavaScript 库（目前有10种），并可以从 Google 高性能的 CDN 网络中加载，既节省了你的服务器带宽，同时，由于用户可能已经在别的网站加载过这个库，因此可以显著加快这些库的加载速度。
8. Google Website Optimizer

接着这个工具，你可以对自己的网站进行 A/B 测试，并对网站进行优化。
9. Sites

顾名思义，Google Sites 可以帮你创建一个托管的网站，可以将包括 YouTube，幻灯，Gmail 日历，Google Gear 小程序，Google Docs 一类的应用集成其中。如果将站点设置为不公开，你可以将这个工具用于个人文档工具。
10. Speed Tracer

以可视化方式，帮你分析你的 Web 程序中各种元素的加载或运行速度与实践，这里有一些关于这个工具的用例。
11. Project Hosting

这是 Google Code 项目的一部分，可以帮你托管你的开源项目，Web 开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。
12. Google App Engine

这是一个可用来托管自己的 Web 程序的地方，甚至可以使用自己的域名。这里有一个教程，讲解如何使用 Google App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web 程序。
13. Google Chart Tools

Google Chart Tools 可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。
14. Closure Tools

Closure Tools 是 Google Labs 的一个开发套件，包含3个工具，闭包编译器（一个 JavaScript 优化器），闭包函数库（用于 Ajax 程序开发）以及一个用于动态生成 HTML 的闭包模板。
15. Google Analytics

经典的 Google 流量分析统计工具。

]]> http://www.xincss.com/?feed=rss2&p=154 Google 推出中国大陆服务可用报告，每天更新 http://www.xincss.com/?p=150 http://www.xincss.com/?p=150#comments Tue, 23 Mar 2010 01:21:27 +0000 朝心 http://www.xincss.com/?p=150 阅读全文（241字）]]> google-china-service-availability

Google在退出中国大陆的同时，推出了一个叫做“Google China service availability”的服务，类似App Engine Status一样的界面，每天记录Google旗下所有服务在中国大陆的使用状况。绿钩表示可正常使用，红叉表示无法访问，黄扳手表示部分无法访问。

好吧，其实Web、Images、News也会根据关键字造成部分无法访问，所以严格的说，只有Gmail和Ads可以打绿钩钩的……

http://www.google.com/prc/report.html

]]> http://www.xincss.com/?feed=rss2&p=150 Photoshop 导致 系统ESC键无效 http://www.xincss.com/?p=137 http://www.xincss.com/?p=137#comments Thu, 11 Mar 2010 02:20:27 +0000 朝心 http://www.xincss.com/?p=137 阅读全文（372字）]]> 忘记了从什么时候起，系统里一些软件的ESC 键经常会失效（单独ESC会无效，Shift+Esc等组合键没问题），对于习惯了用ESC键来退出窗口的TM、IrfanView来说，感觉非常的别扭！开始以为是软件问题，重装过若干次后，问题依旧。

偶然发现，造成ESC键失效的罪魁祸首竟然是PHOTOSHOP（目前用的是CS 4），无奈，开始GOOGLE

最后凭着半桶水的英文，终于在某条评论中看到一丝曙光，是Plug-ins 插件文件夹的问题，于是对里面的插件一个一个实验（CS 4自带插件，未安装其他），锁定了问题插件：Extensions、Measurements。

因为自己PS只是拿来切图，这两插件估计没什么用，直接把这两个文件夹删了。问题解决，俺的 ESC 键终于又回来了~

【再次杯具，发现PS进行编辑后，如改变图片大小，ESC又不能用了……留帖待处理-_-】

]]> http://www.xincss.com/?feed=rss2&p=137 电子商务类站点终极资源大全（下） http://www.xincss.com/?p=123 http://www.xincss.com/?p=123#comments Thu, 25 Feb 2010 01:28:26 +0000 朝心 http://www.xincss.com/?p=123 阅读全文（1635字）]]> 这是电 子商务类站点终极资源大全的第三部分，本部分继续搜集海量的设计资源，包含与电子商务网站设计相关的模板，主题，图标，素材，另外，本部分还包含 一些电子商务网站设计教程。本文的第一第二部分请参阅：电子商务类站点终 极资源大全（上）（中）。

3. 图标与设计素材(续)

C. 通用图标（续）

200 Mini Icons – 一大套小图标，包含购物车等

Web Icon Set – 蓝色系的

Glossy Internet Icons – Set 4 – 方方正正的

Colorful Stickers Part 3 Icon Set – 即时贴形的

Flames Web Icons – 流火形的

Glossy Icon Set – 梅红色系的

Futuristica Icons – 机器风的

Shopping Icons – Smooth Series – 很精致的

Free Shipping Icon – 矢量包装箱

Web Assortment – 又一套

Halloween Shop Icons – 鬼节风的

Free Shipping Icon – 包装箱

D. 信用卡图标

Credit Card Icon – 256×256 PNG 格式的信用卡图标

Chalkwork Payments (Free) – 来自 Mezzoblue 的信用卡图标

Free Icons – e-commerce – Visa, MasterCard, and American Express 三大信用卡

Credit Card Icons Set – 72像素的信用卡图标

Credit Cards – 通用信用卡图标

E. 国旗图标

Country Flag Icons – 一套漂亮的国旗图标

243 Country Flag Icons – 大量国旗图标

World Flag Icons Pack – 一大套国旗图标

XP Flags Icon – 飘动的国旗图标

Flag Icons – 247个国旗图标，含 GIF 和 PNG

World Flag Orbs – 圆牌状国旗图标

Flags – 圆形国旗图标

110 Famous City Flag Icons – 城市图标

50 Flag Icons – 圆角国旗图标

Rounded Flag Icons – 一套圆形立体国旗图标，含 124×124, 48×48, 24×24 三种尺寸

F. 购物车，购物篮图标

Shopping Basket Icon – 256×256 尺寸的购物篮

Shopping Paper Bags Icons – 一套购物袋图标

Free Icon Set – 不同的购物车图标

Shopping Basket Icons 3D – 3维购物篮图标

Bubble Icon Series – Shopping Baskets and Carts – 来自 iStockPhoto 的购物篮，购物车图标

Shop Cart Icons – 一套购物车

Shopping Cart Icon – 很精致的购物车图标

E-Shop Icon – 另一套

Shopping Cart – 购物车

Shopping Cart – 小购物车图标

3D Shopping Cart – 3D购物车

4. 教程

A. 通用教程

Design an e-commerce Website in Photoshop – 在 Photoshop 中设计电子商务站点。

How to Build an Online Store with WordPress – 怎样用 WP 设计网店

How To Create an e-commerce Websit with WordPress in Under 5 Minutes – 5分钟做一个 WP 电子商务网站

B. 按钮

Add-to-Cart Buttons: Bigger is Better – 地址商务网站的购买按钮，越大越好

How to Design Buttons to Help Improve Usability – 如何设计按钮以提升易用性

Add to Cart Button Tutorial – The Best Converting Button to Use – 设计购买按钮

Scalable CSS Buttons Using PNG and Background Colors – 基于 CSS 的按钮

Add to Cart Photoshop Tutorial – 购买按钮 Photoshop 教程

Web 2.0 Button – Web 2.0 风格的按钮

]]> http://www.xincss.com/?feed=rss2&p=123 电子商务类站点终极资源大全（中） http://www.xincss.com/?p=120 http://www.xincss.com/?p=120#comments Thu, 25 Feb 2010 01:26:17 +0000 朝心 http://www.xincss.com/?p=120 阅读全文（1452字）]]> 新闻来源:hongkiat.com
这是电子商 务类站点终极资源大全的第二部分，本部分搜集的是海量的设计资源，包含与电子商务网站设计相关的模板，主题，图标，素材等。本文的第一第三部分请 参阅：电子商务类站点终 极资源大全（上）（下）。
3. 图标与设计素材 A. 电子商务网站主题
35 Free High-Quality E-Commerce Templates – Smashing Magazine 搜集的非常出色的电子商务网站主题。

25 Magento Templates for Your E-Commerce Business – 25 套 Magento 主题

20+ Best e-commerce (WordPress Themes, Templates, Icons, Flash Sites) Collection – 最佳电子商务主题集。

The Clothes Shop Theme – 基于 WP 的布艺网店主题。

The Furniture Store Theme – 基于 WP 的家居网店主题。

enVirashop – 用于 WP 的电子商务主题

wpShop Reloaded – 一套 WP 网店主题

RGBSTore e-commerce – 一套电子商务 HTML 模板，支持 Magento, osCommerce, Zen Cart 等

Boutique – 一套优雅的电子商务 HTML 模板

Sancart – 一套简单的 OpenCart 模板

OScomm E-Commerce Template – 一套 e-commerce HTML 模板

ClassyShop – 使用 960 网格框架设计的 e-commerce 模板

Store Theme – 一套来自 Templatic 的主题，能将标准 WP 换成在线网店

Crafty Cart Theme – 另一个将 WP 变成在线网店的主题

SimpleCart(js) – 还有一个

Market Theme – 这个也是

ShopperPress – WP 网店主题，支持 Google Checkout, PayPal, Authorize.net 等支付方式


B. 设计素材
e-commerce Web Elements, Dark Grey & Green – 一套绿色系的电子商务网站素材

Web 2.0 Button (e-commerce #2) – 一套电子商务网站按钮集

e-commerce Web Elements – 一套电子商务设计素材，可以自行配色

Web Pack (Price Table, Banner, Buttons…) – 一套黑白灰色系设计素材

Price Table – 价格表素材

Colorful Pricing Table – 多彩的价格表

Pricing Tables – 5 Pack – 5 套价格表素材

Pricing Tables – 价格表，包含功能清单

Super Bright Pricing Tables – 各种配色的价格表


C. 通用图标

Vector Free Shipping Bag Set – 矢量购物袋

Free Shipping Tag Icon – 矢量标签

13 E-Commerce Icons – 13 套电子商务网站图标

Universal Icons – Set 16 (Shopping) – 来自 iStockPhoto 的电子商务网站图标素材

Sale and Shopping Icons – Alto Series – 另一套

Shopping & Consumerism Icons – White or Black Series – 来自 iStockPhoto 的图标

Set of 77 Web Icons – Web 图标集

BlueSakura – 45个图标，包括购物车图标

Icon Set n9 – Commerce – 一套电子商务网站图标

Icon Set n8 – Commerce – 另一套

]]> http://www.xincss.com/?feed=rss2&p=120 电子商务类站点终极资源大全（上） http://www.xincss.com/?p=118 http://www.xincss.com/?p=118#comments Tue, 23 Feb 2010 05:10:56 +0000 朝心 http://www.xincss.com/?p=118 阅读全文（1312字）]]> 新闻来源:hongkiat.com
电子商务网站和普通网站一样，需要良好的设计，除此之外，电子商务站点还有许多额外的东西需要考虑，后台支撑程序，购物车，结算，产品目录，产品搜索与导 航，一个优秀的电子商务站点会引导用户快速找到他们需要的货品并顺畅地完成购买。本文搜集了上百种与电子商务网站设计相关的资源。


1. 设计灵感与借鉴资源
A。通用资源

20 of the Best e-commerce Websites - 20 个最佳电子商务网站

Cart Craze – 电子商务网站设计展示

23 Excellent Examples of How to Design Online Stores – 25个优秀的电子商务网站设计案例

20 Well Designed E-Commerce Websites – 20 个设计出众的电子商务网站

50 Inspirational e-commerce Website Designs – 50 个电子商务网站设计样例

35 Excellent e-commerce User Interface Designs – 35个出色的电子商务类站点UI设计


B. 按钮
107 Add to Cart Buttons of the Top Online Retailers – 107 个购物车按钮设计

80 Examples of Add to Cart Buttons for Design Inspiration – 80个购物车按钮设计样例

20 e-commerce Add To Cart Buttons For Your Inspiration – 20个购物车按钮展示

“Add to Cart” Button Showcase – 购物车按钮展示


2. 购物车与电子商务平台 A. 独立购物车
PrestaShop – 一个免费，开源购物车，灵活，界面直观。

OpenCart – 基于 PHP 的免费，开源购物车。支持产品预览，自动图片尺寸，支持可下载类虚拟产品。

Magento – 开源电子商务平台，包含免费的社区版和收费的企业版。

CubeCart – 购物车程序，有两个版本，包括一个免费版。

Zen Cart – 免费开源购物车，包括各种免费扩展。

osCommerce – 开源，免费的购物车，已经应用到超过 225000 在线商店。

Digistore – 基于 osCommerce 的免费，开源购物车。

StoreSprite – 一个免费但功能强大的，基于 PHP/MySQL 的购物车。

BossCart – 基于 PHP 的购物车，含免费版和高级收费版。

FatFreeCart – 一个通过复制粘贴代码就能实现的购物车，支持 Paypal 和 Google Checkout，无需注册和安装。


C. 插件
WordPress e-Commerce – 用于 WordPress 的免费，开源电子商务插件。

Shopp – 用于 WordPress 的超简单的购物车插件。

Ubercart – 用于 Drupal 5/6 的购物车插件。

Drupal e-Commerce – 用于 Drupal 的电子商务插件，支持 Paypal，Authorize.net 以及其它支付方式。

VirtueMart – 用于 Joomla 的免费购物车。

Seber Cart – 用于 Joomla 的小巧，易用的购物车。

Joomla jQuery Cart – JCart 是一个易于安装，定制的，免费的 Ajax 购物车。

]]> http://www.xincss.com/?feed=rss2&p=118 Zen Coding: 一种快速编写HTML/CSS代码的方法 http://www.xincss.com/?p=111 http://www.xincss.com/?p=111#comments Sun, 21 Feb 2010 08:42:35 +0000 朝心 http://www.xincss.com/?p=111 阅读全文（7144字）]]> 译自：Smashing Magazine中文：Zen Coding: 一种快速编写HTML/CSS代码的方法

请尊重版权，转载请注明来源！

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你 还是要手动敲入很多代码。

在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重 用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。

但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：

div#content>h1+p

…然后就可以看到这样的输出：

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能 为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114， 上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示， 一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似 youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

下载(完全支持)

下载(部分支持，只支持“展开缩写”)

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因 是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的 较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

  • E
    元素名称(div, p);
  • E#id
    使用id的元素(div#content, p#intro, span#error);
  • E.class
    使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
  • E>N
    子代元素(div>p, div#footer>p>span);
  • E+N
    兄弟元素(h1+p, div#header+div#content+div#footer);
  • E*N
    元素倍增(ul#nav>li*5>a);
  • E$*N
    条目编号 (ul#nav>li.item-$*5);

正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子 代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下 HTML代码：

1
2
3
4
 
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3 个<div>元素。你可以写成这样的缩写，div.item$*3:

1
2
3
 
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

 div#i$-test.class$$$*5

会被转换成为:

1
2
3
4
5
 
<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

你会看到，当你写a的缩写的时候，输出是<a href=””></a>。或者，如果你写img，输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描 述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写 定义看起来就像这样：

1
2
3
4
5
6
7
 
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

元素类型

Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片 段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于 代码片段的后面。

有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你 写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加 缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的 CSS和HTML缩写 和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做 法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript 代码片段：

1
2
3
4
5
6
7
 
var table = '<table>'; for (var i = 0; i < 3; i++) {
	table += '<tr>'; for (var j = 0; j < 5; j++) {
		table += '<td>' + j + '</td>';
	}
	table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器 bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关 闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有 选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标 签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容 放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写 div#header>ul#navigation>li.item$*>a>span：

1
2
3
4
5
 
About Us
Products
News
Blog
Contact Up

你将会得到以下结果：

1
2
3
4
5
6
7
8
9
 
<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

  • Ctrl+,
    展开缩写
  • Ctrl+M
    匹配对
  • Ctrl+H
    使用缩写包括
  • Shift+Ctrl+M
    合并行
  • Ctrl+Shift+?
    上一个编辑点
  • Ctrl+Shift+?
    下一个编辑点
  • Ctrl+Shift+?
    定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而 Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但 是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

部分支持(只支持“展开缩写”)

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的 源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源 代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是， 本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描 述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
  5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

  • Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
  • 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失；

DreamWeaver

好消息是，现在已经有了Zen coding for DreamWeaver插件，坏消息是，该插件支持的功能很少，只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外，没 有测试该插件是不是只支持CS4版本。不过比较好的是，作者将本插件的源码也放出了，你可以自定义一个Dreamweaver的插件。

事实上，官方的DW插件在Windows下有点儿bug，就是会出现空白的行，我简单的修正了下，重新编译了个包，在本机测试没问题，感 兴趣的童鞋可以下载尝试：http://www.boxcn.net/shared/c71z7×7sfe

PS:官方的DW插件已经更新，推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特别推荐：豪情同学将缩写给实践了一番，总结出了很多很棒的用例，推荐大家前去学习。

原作者介绍：

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者，他在优化方面有很大的热情：从图片、JavaScript效果到工作流程和节省时间的编码。访 问他的主页和他的Twitter。

]]> http://www.xincss.com/?feed=rss2&p=111 Windows7下安装phpnow http://www.xincss.com/?p=103 http://www.xincss.com/?p=103#comments Wed, 06 Jan 2010 11:01:13 +0000 朝心 http://www.xincss.com/?p=103 阅读全文（375字）]]> 一直以来本地调试php程序都喜欢用phpnow, 如今顺应趋势我也装了Windows7，却发现装phpnow并不顺利，Windows7默认用户权限较小，一般提示权限不够时，右键选择“以管理员身份 运行”即可解决，但是右键运行phpnow的安装程序时，却是黑窗口一闪而过。经过一番折腾，终于搞定，以下图解Windows7下如何安装 phpnow。

1 到C:\Windows\System32下找到cmd.exe,右键选择“以管理员身份运行”，如图所示：

cmd

2 切换到phpnow的安装目录，这里以E盘安装目录为phpnow为便.

两条命令：

切换到E盘：e:+Enter

切换到phpnow目录：cd phpnow+Enter

然后运行init.cmd: init.cmd+Enter

图示如下：

anzhuang

3 全自动安装，然后设置SQL密码，即可见到熟悉的”PHPnow works!”页面了。

]]> http://www.xincss.com/?feed=rss2&p=103 [转]提升你设计水平的CSS3新技术 http://www.xincss.com/?p=89 http://www.xincss.com/?p=89#comments Fri, 11 Dec 2009 13:02:43 +0000 朝心 http://www.xincss.com/?p=89 阅读全文（15292字）]]> 前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器 专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器兼容。彬Go本想将本文翻译成中文 版和大家分享，但发现已有国人完成翻译，所以就偷个小懒，转载一下人家的翻译，在此感谢前端观察的博主辛苦翻译本文，为大家贡献了如此珍贵的学习资料。

如果你热爱前端开发，你对CSS感兴趣，那么你肯定不可错过这篇文章。

级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上，我们也无法想象。

为什么会这样呢，当提到CSS的时候，过去我们是如此的不情愿和害怕尝试？为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式？为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级？

是时候在我们的项目中引入CSS3 特性了，不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做，特别是在它能够让网站更加灵活并减少开发和维护成本的时候。

在本文中，我们将研究CSS3的优势，并看一下一些网页设计师是如何使用它们的。最后，我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。

同时请参考我们之前的一篇相关文章：
使用CSS3将你的网站设计推向未来

使用浏览器专有属性

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。而且不幸的是，一些属性甚至到最后都可能不被W3C推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。

当然，这种方法的劣势是，将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟，我们不想在我们的样式表中重拾私有浏览器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用，并在20世纪九十年代成为一个传奇；它们依然让现存的很多网 站（在其他浏览器中）表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地，对吧？

然而，网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

作为专业的设计师，我们不得不注意：使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下，比如试验或学习，我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

扩展阅读

1. 选择器

CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

三个新的属性选择器被添加到CSS3：

  • [att^="value"]
    匹配包含以特定的值开头的属性的元素
  • [att$="value"]
    匹配包含以特定的值结尾的属性的元素
  • [att*="value"]
    匹配包含含有特定的值的属性的元素

值的属性的元素

css3-属性选择器

tweetCC 使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:

1
2
3
4
5
6
7
8
9
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。

连字符

CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。

比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：

1
2
3
div~img {
border: 1px solid #ccc;
}

浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6！

伪类

或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：

  • :nth-child(n)
    让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：

    :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
  • :nth-last-child(n)
    与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：

    div p:nth-last-child(-n+2)
  • :last-child
    匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1)
  • :checked
    匹配选择的元素，比如复选框
  • :empty
    匹配空元素（没有子元素）。
  • :not(s)
    匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
    p:not([class*="lead"]) { color: black; }
    .

Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:

css3-伪类

1
2
3
#primary .text p:last-child {
margin: 0;
}

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

扩展阅读

2. RGBA和透明度

RGBA 让你可以不仅仅设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

css3-透明度
Tim Van Damme在链接的hover效果上使用了RGBA

在这个网站上，Tim Van Damme在鼠标悬停效果上使用了RGBa；例如，在他的首页的network链接上:

1
2
3
4
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}

当设定一个RGBA 色彩的时候，我们必须依次设定红、蓝、和绿色的值，可以是0-255或百分数。透明值应该在0.0到1.0之间，例如0.5 代表50% 的透明度。

RGBA 和opacity 之间的不同是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。

这里有个例子展示我们如何给一个div添加80% 透明:

1
2
3
div {
opacity: 0.8;
}

浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox 2也不支持，但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜（filter）

扩展阅读：

3. 多栏布局

这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

css3-多栏布局
tweetCC 在其首页使用了CSS3 多栏选择器

tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：

1
2
3
4
5
6
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

我们可以通过这个选择器定义三件事情：栏数(column-coun)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。 如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。

为了在各栏时间添加一个数值的分隔，我们可以使用column-rule 属性，其功能和border 属性类似:

1
2
3
div {
column-rule: 1px solid #00000;
}

上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。

相关属性: column-break-after, column-break-before, column-span, column-fill.

浏览器支持: 多栏布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

扩展阅读：

4. 多背景图

CSS3 允许你使用多个属性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片.

在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:

1
2
3
4
5
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}

第一个图片将是离用户“最近”的那个。

该属性的一个更复杂的版本可以是这样的：

1
2
3
4
5
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

在这里，(100% 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。

因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。

浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效

扩展阅读：

5. Word Wrap

word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字，如连字符。如果使用了break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

css3-word-wrap
WordPress 后台在数据表中使用了word-wrap.

在WordPress 的控制面板中，word-wrap 属性被用于表格中的元素；比如在日志和页面的列表中：

1
2
3
.widefat * {
word-wrap: break-word;
}

浏览器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 将在3.5版本中支持它。

扩展阅读：

6. 文字阴影

尽管在CSS2中就已经存在，text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。

尽管这样，你需要确认，你的设计中的文字是可读的，以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。

css3-文字阴影
Beakapp 在它的网站中使用了text-shadow 属性：内容区域.

BeakApp.com 为内容区域使用了text-shadow 属性，为文字添加深度和维度 并让它变得醒目——而不是使用某种图片替换技术。该属性目前只在Safari和Chrome中可用。

该网站的主菜单使用的CSS如下：

1
2
3
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

这里我们使用阴影颜色(使用了RGBA，前面有描述)， 然后是右(x 坐标) 和底部(y 坐标) 偏移，最后是模糊半径

如果要在一个文字上使用多阴影，可以使用逗号分开。比如：

1
2
3
4
5
p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}

浏览器支持: Webkit核心浏览器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它，Firefox 将在即将发行的3.5版本中支持。

扩展阅读：

7. @font-face属性

尽管是最被期待的CSS3 特性 (甚至它在CSS2中就已经被引入了)， @font-face在网站上仍然没有像其它CSS3属性那样被广泛采用.这主要因为字体授权和版权问题：嵌入的字体很容易从网站上下载到，这是字体厂商的主要顾虑。

尽管如此，授权我呢提貌似已经开始解决了。TypeKit 承诺将制定一个方案，以使设计师和字体厂商更容易的统一授权问题，这将显著的充实网站设计中的排版并使@font-face 属性在实际工作中可用。

css3-font-face属性
Mozilla实验室JetPack 网站采用font-face规则来使用DroidSans 字体。

少数使用该属性的网站之一是新上线的JetPack MozillaLabs.

1
2
3
4
@font-face{
font-family: ‘DroidSans’;
src: url(‘../fonts/DroidSans.ttf’) format(‘truetype’);
}

要想在你的网站中使用嵌入字体，你必须独立的生命每个样式(比如， normal, bold 和italic)。请确保只使用被授权为使用到网站的字体并在需要的时候给字体的设计师一些表扬。

在定义了@font-face 规则之后，你就可以用普通的font-family 属性来引用该字体了：

1
2
3
p {
font-family: “DroidSans”;
}

如果一个浏览器不支持@font-face，它将使用font-family(CSS 字体库)属性中指定的下一个字体。对支持的浏览器来说，如果@font-face 字体是一个奢侈品（只有少数元素用到），这对一些网站是可行的；但是如果该字体在设计中占有一个主要的角色或者是公司的视觉特征的一部分，你就可能想使用 其它的解决方案，比如sIFR 或Cufón。尽管如此，请记住，这些工具对标题或较短的文字更适合，复制和粘贴此类内容比较困难而且对用户并不友好。

css3-新技术
在网站中使用此类字体不是很好吗？Dave Shea 使用Cufón 和Museo Sans来做的实验。很漂亮！

浏览器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持EOT 字体。 Opera 10 和Firefox 3.5 将会支持它。

扩展阅读：

8. 圆角（边框半径）

Border-radius 无需背景图片就能给HTML元素添加圆角。现在，它可能是使用最多的CSS3属性了，很简单的原因是使用圆角比较好而且不会对设计和可用性有冲突。

不同于添加Javascript或多于的HTML标签，仅仅需要添加一些CSS属性并从好的方面考虑。这个方案是清晰的和比较有效的，而且可以让你免于花费几个小时来寻找精巧的浏览器方案和基于Javascript圆角。

css3-圆角
Sam Brown的博客在标题、分类和链接处使用了border-radius.

Sam Brown在他的博客的标题、分类、链接和div中大量的使用了border-radius属性。使用图片来实现该效果将会比较费时的，这是在项目中使用CSS3属性是提高开发效率的重要步骤的原因之一

为了给类别链接添加圆角，Sam 使用了下面的CSS片段：

1
2
3
4
5
6
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

我们可以做的更进一步，添加原始的CSS3 属性和Konqueror 属性扩展，如下:

1
2
3
4
5
6
7
8
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

如果我们想在我们的元素中的某个特定的角上应用此属性，我们可以单独的指定每个角：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}

浏览器支持： border-radius只有所有版本的IE浏览器和Opera不支持，Webkit和Gecko核心的浏览器都支持。

扩展阅读：

9. 边框图片

border-image 属性允许你在元素的边框上设定图片， 让你从通常的solid, dotted 和其它边框样式中解放出来。该属性给设计师一个更好的工具，用它可以方便的定义设计元素的边框样式，比background-image 属性(对高级设计来说) 或枯燥的默认边框样式更好用。我们也可以明确的定义一个边框可以被如何缩放或平铺。

CSS3-边框-图片
SpoonGraphics 博客为它的图片边框使用了border-image 属性。

在SpoonGraphis blog中，border-image被用于图片边框，如下所示：

1
2
3
4
5
6
#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}

要想定义border-image，我们必须指定图片地址，图片的那部分将被剪切并用于元素的每一个边上，以及图片是否被缩放或平铺。

为了制作一个使用下面的图片作为边框的div ，我们应该使用下面的代码(我们将为这个例子添加Opera 和Konqueror 支持):

CSS3-边框

1
2
3
4
5
6
7
8
div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}

该属性的最后一个值可以是stretch (默认), round (只有一个平铺了整数倍的图片被填充在允许的地方) 或repeat。在我们的例子中，上下左右边框图片被拉伸。如果我们只想顶部和底部边框被拉伸，我们可以使用下面的CSS:

1
2
3
4
div {
(…)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}

我们可以可以单独的指定每一个角，如果我们想为每一个角使用不同的图片：

1
2
3
4
5
6
7
8
9
10
div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}

如果浏览器不支持border-image 属性，它将无视这些属性，并只应用定义的其它边框属性，比如border-width 和border-color.

浏览器支持: border-image 目前只有Webkit核心浏览器支持。不太确定Firefox的下一个版本是否支持。

扩展阅读：

10. 盒阴影

box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。

CSS3-盒-阴影
10to1 为它的导航北京和hover状态使用了box-shadow 属性.

10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:

1
2
3
4
5
6
7
8
9
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}

box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。

在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：

1
2
3
4
5
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}

浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。

扩展阅读：

11. 盒子大小

根据CSS 2.1 规范，在计算盒子的总大小的时候，元素的边框和padding应该被加入到宽度和高度之中的。但是众所周知，旧的浏览器却以它们自己的非常有“创意”的方式来解释这个规范。box-sizing属性允许你指定浏览器如何计算一个元素的宽度和高度。

CSS3-新特性
WordPress 在控制面板的所有的输入框元素中使用border-box 属性。

WordPress 后台区域在它的所有text类型的input标签和textarea标签上使用了该属性:

1
2
3
4
5
6
7
input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

第三个属性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通过其他选择器，WordPress 的样式表同样添加了Konqueror 属性： -khtml-box-sizing。

box-sizing 属性可以两个值中的一个：border-box 和content-box。 Content-box如CSS2.1中的定义的那样渲染宽度。Border-box 从设定的宽度和高度中扣除padding和边框(如老式浏览器那样。)。

浏览器支持：box-sizing 被IE8、Opera、Gecko核心和Webkit核心浏览器支持。

扩展阅读：

12. 媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。比如，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了：

1
2
3
4
5
6
7
8
9
10
11
#sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}

@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}

你也可以指定使用虑色屏的设备：

1
2
3
4
5
6
7
8
9
a {
color: grey;
}

@media screen and (color) {
a {
color: red;
}
}

潜力是无限的。这个属性是很有用的因为你你不在需要必须为不同的设备写独立的样式表了，而且你也无需使用JS来确定每个用户的浏览器的属性和功能。一个实现一个灵活的布局的更加流行的基于Javascript的方案是使用智能的流体布局，让布局对于用户的浏览器分辨率更加灵活。

浏览器支持： 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性而且在将来的版本中，也没有支持的计划。

扩展阅读：

13. 语音

CSS3的语音模块CSS3可以让你为屏幕阅读者指定语音样式。你可以控制语音的不同设置，比如:

  • voice-volume
    使用从0到100的数字(0 即静音)、百分数或关键词(silent,x-soft,soft,medium,loud 和x-loud等)来设置音量。
  • voice-balance
    控制来自哪个声道(如果用户的音箱系统支持立体声)。
  • Speak
    指示屏幕阅读器阅读相关的文字、数字或标点符号。可用的关键词为none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.
  • Pauses and rests
    在一个元素的被读完之前或之后设定暂停或停止。你可以使用时间单位(比如, “2s” 表示2 秒钟) 或关键词(none,x-weak, weak, medium, strong 和x-strong)。
  • Cues
    使用声音限制特定元素并控制器音量。
  • voice-family
    设定特定的声音类型和声音合成(就像font-family)。
  • voice-rate
    控制阅读的速度。可以设置为百分数或关键词: x-slow, slow,medium, fast 和x-fast.
  • voice-stress
    指示应该使用的任何重音(强语气)，使用不同的关键词: none, moderate,strong 和 reduced.

比如，告诉屏幕阅读器使用男声读取所有的h2 标签，用左边的喇叭，用软调按照指定的声音，可以像下面这样指定样式：

1
2
3
4
5
6
h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}

不幸的是，这个属性现在只有非常少的支持，但是显然值得关注因为我们可以在将来提高我们网站的易用性。

浏览器支持: 现在，只有Opera 浏览器（Windows XP and 2000）支持语音模块的部分属性。为了使用它们，需要使用-xv- 前缀，比如-xv-voice-balance: right。

扩展阅读：

结尾

CSS3 属性可以极大的提高你的工作流，让一些最耗时的CSS任务不费吹灰之力就能搞定，并且可以使用更好、更简洁和更轻的代码标签。一些属性尚未被广泛的支持，甚至是最新的浏览器，但这并不意味着我们不能用它们进行试验或者为使用先进浏览器的用户更高级的功能和CSS样式。

在这点儿上，请记住，培养我们的用户 也同样是有用和必须的：网站无需看起来在每个浏览器里都要保持一致，而且如果一个差异不（负面）影响美学和网站的可用性，它就应该是被考虑的。如果我们继续浪费大量的时间和金钱以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案)， 用户将没有升级他们的浏览器的任何需要/动机，这样我们就不得不在旧的浏览器变为古董级浏览器以及强大的现代浏览器变为标准之前等待很长的时间

我们试验和使用新的CSS3属性越早，它们就被流行的浏览器支持的更早，我们也就能够更早的广泛使用它们。

推荐阅读及资源：

关于原作者

Inayaili de León是一个葡萄牙的网页设计师。她对网页设计和前端编码真的非常感兴趣，而且喜欢漂亮和简洁的网站。她居住在伦敦。你可以在Web Designer Notebook上看到她的更多文章，并follow her on Twitter.

]]> http://www.xincss.com/?feed=rss2&p=89