http://www.xincss.com 关注工作中的琐碎，记录生活中的点滴 Mon, 05 Jul 2010 02:06:48 +0000 http://backend.userland.com/rss092 en 现在越来越多的人应用jQuery了，有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 总是从ID 选择器开始继承 在 class前使用tag 将 jquery对象缓存起来 掌握 强大的链式操作 使用子查询 对直 接的DOM操作进行限制 冒 泡 消除无 效查询 推迟到 $(window).load 压缩js 全面掌握 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 = ... http://www.xincss.com/?p=161 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）是一个 ... http://www.xincss.com/?p=154 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/?p=150 忘记了从什么时候起，系统里一些软件的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/?p=137 这是电 子商务类站点终极资源大全的第三部分，本部分继续搜集海量的设计资源，包含与电子商务网站设计相关的模板，主题，图标，素材，另外，本部分还包含 一些电子商务网站设计教程。本文的第一第二部分请参阅：电子商务类站点终 极资源大全（上）（中）。 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 ... http://www.xincss.com/?p=123 新闻来源: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 – 基于 ... http://www.xincss.com/?p=120 新闻来源: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 ... http://www.xincss.com/?p=118 译自：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 Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持) 中文版演示 下载(完全支持) Aptana (跨平台); Coda, via TEA for Coda (Mac); Espresso, via TEA for Espresso (Mac); 下载(部分支持，只支持“展开缩写”) TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代); TopStyle; Sublime Text; GEdit; Dreamweaver CS4 editArea在线编辑器; Zen Coding在线编辑器中文版 现在让我们看一下这些工具是如何工作的吧。 展开缩写 展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因 是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的 较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。 这里是一个支持的属性和操作符的列表： E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(div.header, ... http://www.xincss.com/?p=111 一直以来本地调试php程序都喜欢用phpnow, 如今顺应趋势我也装了Windows7，却发现装phpnow并不顺利，Windows7默认用户权限较小，一般提示权限不够时，右键选择“以管理员身份 运行”即可解决，但是右键运行phpnow的安装程序时，却是黑窗口一闪而过。经过一番折腾，终于搞定，以下图解Windows7下如何安装 phpnow。 1 到C:\Windows\System32下找到cmd.exe,右键选择“以管理员身份运行”，如图所示： 2 切换到phpnow的安装目录，这里以E盘安装目录为phpnow为便. 两条命令： 切换到E盘：e:+Enter 切换到phpnow目录：cd phpnow+Enter 然后运行init.cmd: init.cmd+Enter 图示如下： 3 全自动安装，然后设置SQL密码，即可见到熟悉的”PHPnow works!”页面了。 http://www.xincss.com/?p=103 前些日子在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属性一起写到一个样式表中。 扩展阅读 Vendor-specific extensions and W3C Vendor-specific extensions to CSS3 Vendor-specific properties 1. 选择器 CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。 属性选择器 三个新的属性选择器被添加到CSS3： [att^="value"] 匹配包含以特定的值开头的属性的元素 [att$="value"] 匹配包含以特定的值结尾的属性的元素 [att*="value"] 匹配包含含有特定的值的属性的元素 值的属性的元素 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: ... http://www.xincss.com/?p=89