存档
今天介绍一个网页辅助设计框架，960 Grid System。什么是960 Grid System，简单的来说，是用来辅助设计师快速的创建网页原型的辅助系统，960这里是网页的横向尺寸，960px，为什么是960这个数字，而不是1000或者900？ 来温习下数学推演： 960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍： 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480 共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为： N(960) = N(2^6 * 3 * 5) = 26 同理可以得到： [...]
这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。 Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。 这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。 那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。 兼容性测试 不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。 function boxmodel(){ var newDiv = document.createElement(‘div’); document.body.appendChild(newDiv); newDiv.style.width = ’20px’; newDiv.style.padding = ’10px’; var divWidth = newDiv.offsetWidth; document.body.removeChild(newDiv); return divWidth == 40; } 通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。 有了上面的这个主意，我们能类似的写出如下测试用例： float clear position overflow line-height 当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。 document.createElement() document.getElementById() xmlHttpRequest() window.onresize() window.print() 通过上述测试，我们可以知道是否可以正确显示客户的应用。 我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。 利用这些测试结果 整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。 为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。 DEMO1 [...]
众所周知，所有的浏览器都有一些关于CSS功能的额外扩展，例如（-ms-interpolation-mode），这些通常来自于那些未在CSS标准中明确完整的定义的特性和功能或者是在标准中已经完整定义但浏览器只是部分支持。CSS2.1标准中规定，以上这些不完全合乎标准的特性都必须使用一个供应商前缀(Vendor Prefix ‘-ms-’ for Microsoft, ‘-moz-’ for Mozilla, ‘-o-’ for Opera)。 下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。 Property Type W3C Status -ms-accelerator Extension -ms-background-position-x CSS3 Working Draft -ms-background-position-y CSS3 Working Draft -ms-behavior Extension -ms-block-progression CSS3 Editor’s Draft -ms-filter Extension -ms-ime-mode Extension -ms-layout-grid CSS3 Editor’s Draft -ms-layout-grid-char CSS3 Editor’s Draft -ms-layout-grid-line CSS3 Editor’s Draft -ms-layout-grid-mode CSS3 Editor’s Draft -ms-layout-grid-type CSS3 [...]
原文地址：http://sixrevisions.com/css/20_websites_learn_master_css 相信不少人，哪怕是职业的网页设计师有的时候也不免会觉得CSS有那么点玄妙，有很多小trick并不是那么容易一下子掌握的。 三人行必有我师焉，那就从一些前辈那里学点东西吧，20个CSS和网页设计相关领域的站点，希望能给大家带来一些帮助。 1. A List Apart CSS Topics 老牌CSS站点，从1999年开始一直致力于整理收集面向标准网页开发的优秀文章。 2. CSS Help Pile 收集整理了大量的CSS相关资源，而且归档非常清晰，查询非常方便。 3. CSS Basics 通过一系列教程讲述了CSS的基本概念和基本原理。非常不错的一篇入门教程，我当年也获益良多。 4. Holy CSS Zeldman! CSS相关资源站点，不是《网站重构》的那个Zeldman，不要搞错咯。 5. Eric Meyer: CSS 一位有名的CSS作者的blog，值得一看。 6. 456 Berea Street – CSS category 很流行的CSS站点展示，这类的网站有非常多，多看多收获。激发一下创作灵感。 7. /* Position Is Everything */ 网页很多时候困惑和苦恼都来自于Position问题，那让我们专门来看看这类问题吧。 8. HTML Dog CSS Tutorials 是不是想起了上个世界有个老派的html编辑器，这里有着适应不同程度读者的教程。 9. Learn CSS Positioning in [...]
最近和爱玩游戏的师弟搞了个小游戏博客 [ 游戏247 ]，因为工作也比较忙，还是简单的用了wordpress作为建站方案。虽然也写了一段时间Blog了，但是说实话，因为工作比较繁忙，对于wordpress一直也没好好的去研究过。发布游戏的时候遇到了一个问题，因为flash小游戏说大不大，但也不小，如果首页上全是一堆Flash让访问者去等待下载也是挺不好的一件事情。而且不少小游戏是有背景音乐的，要是百家争鸣的，不免有些聒噪。 我想Wordpress应该肯定有比较好的插件来解决这个问题，抑或有什么小技巧来解决该问题，如果有谁知道的话，倒也不吝告我一声。我来说说我怎么解决该问题的。 首先我希望首页每篇blog都不显示flash，只显示一个游戏截图，就像图上这般: 然后点击进入文章全文的时候，隐去这个截图，而是直接显示flash小游戏，这样正所谓伊人双面。 我想了个最简单的方法，增加了一个css样式 #single_post_div .preview_pic {display:none;} #index_post_div .game_flash {display:none;} 利用css选择器，正好在不同的场景下显示不同的内容。这样的技巧通常会用在HTML网页打印CSS样式中，例如： 我希望在打印网页时，只打印正文，而将头部啊，侧边导航栏等等都隐去，我通常会这样 /*hide various parts from the site #header, #footer, #navigation, #rightSideBar, #leftSideBar {display:none;} */ 虽然是个很粗陋的技巧，但是也挺有效的。
2008年8月28号，微软发布了IE8 beta2，相比三月份主要面向开发人员的Beta 1增加了大量新功能，涉及易用性、安全性、兼容性、管理性等各个方面，以及一些独特的工具。 先来介绍一下对于最终用户的新功能吧，也许是我们对ie一直以来的低要求导致了这次发布的新功能真的有点让我震了一下，真的很棒。 网站切片(Web Slices)：开发人员可以将网页的一部分标记为网站切片，让用户随时很方便地监视相关信息，点击收藏夹栏即可看到丰富的网站切片内容，开发人员也可籍此和用户建立紧密联系。 非常酷的新功能，我不知道firefox下是否已经有类似的插件了，我的生活浏览器一直是遨游，firefox只是用来工作，也许孤陋寡闻了，但是这个功能真的让我觉得会让网站开发有了新的触角。对于很多内容性的，比方说ebay或者淘宝这样的网络销售，甚至于起点这样的在线阅读网站，这种内容的预览和随时更新，远比RSS阅读器来的自然。 ————————————————- 增强的搜索框：搜索框会在用户在键入关键词的时候实时提供搜索建议，包括图片，另外搜索框现在还会提供来自用户收藏夹和浏览历史的搜索结果。 有点类似划词搜索那样，我相信随着未来网络硬件基础的不断提升，这种无孔不入的网络内容聚合将掀起又一轮网络变革。 ========================================================== 其实本意是去看看ie8对于网页设计师来说有什么新的变化的，没想到几个新功能真的是让我忍不住把赞美之词给了它们。言归正传，让我看看ie8在工作上会不会给我们一些震撼。 早在今年3月份，ie8 beta1就给开发者带了不小的期待，比如这个极像Firebug的内置调试器（上帝是派你来拯救我们的吗？）。 这样的界面恐怕不用多说什么，大家肯定看了之后有种终于盼到了的感觉。这个产品的到来将终结Firefox在设计师和开发人员中无可替代的局面。 具体有哪些改动让我们来看一下，因为内容较多，这里仅列出提纲（翻译自微软网站 http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers.aspx） 注：目前下列链接仍为微软网站，等我再过一下翻译更换链接 Developer Checklist: 兼容性: 使用IE8来浏览您的网站。 如果您的网页和原来在IE7中的表现不同，您可以启用兼容模式。 更多内容，参考此处 [兼容性Compatibility] 。 如果开启兼容模式后，您的网站和在IE7下的表现和行为都完全一致的话，那您可以将IE7 meta tag加到您的网页上去。Emulate IE7 meta tag. 另外，您可以使用各种方法来校验用户的浏览器工作模式 Versioning and Internet Explorer Modes. 如果您的网页仍然存在问题，那请使用这些测试工具帮助您找到问题 testing tools. Ajax开发: 阅读更好的Ajax开发 Better AJAX Development. 阅读原生JSON支持，这也是我坚信将取代xml的传输协议 Native JSON Support. 顺手转一位大大3月份的汇总小结 IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute [...]
