CSS 和 JS 文件合并工具
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一.
本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理.
如何让开发者兼容你的浏览器
Webkit 雄起, 在移动网络领域借助 iOS 和 Android 系统的普及, 已经占据绝对主导地位成为事实标准, Mobile Web 的开发人员更倾向于开发专门针对 Webkit 浏览器的移动网站.
或许因为很多网页在 IE10 上表现不理想, 微软呼吁 Web 开发者要做好各种浏览器的兼容, 防止 Webkie 成为移动网页的 IE6. 很讽刺, 当年以浏览器优势来阻击竞争对手的微软会向开发者发出这样的请求.
Read More...
Google HTML/CSS 代码风格指南
Google 今日发布 HTML/CSS 代码风格指南 (Google HTML/CSS Style Guide), 事实上这不是一套完整的开发规范, 我们可以认为是一份简单的开发建议.
与我在《使用 Google Closure Linter 校验 JavaScript 代码》中提到的 Google JavaScript Style Guide 一样, 这份只能内容很少, 我用了不到一个小时就看完了, 从这份短小的代码风格指南找到一些有意思的内容. 下文我会列举两项.
Firefox 请求 CSS 中的图片时发出的 Referer
转 VPS 后, 我开始折腾静态文件, 将站外图片逐渐迁回本站, 和站内静态文件一起统一管理, 并通过 Apache 的 .htaccess 做了防盗链. 无奈地, 很多朋友在 Firefox 看不到样式调用的图片. 经过一番排查, 发现不同浏览器对 CSS 文件中图片的 referer 判断存在差异.
960 网格系统即将过时
960px 网格系统 (960.gs), 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 当显示屏和分辨率变得更大, 我发现 960 网格系统已经不能完全满足我的需求. 20px 的槽让内容区域实际只有 940px, 对现代的 Web 设计来说太窄小了. 在设计 Themify 主题的时候, 我发现一种新的网格布局, 相当适合用来设计当今的 Web 布局.
CSS3 下拉菜单
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
CSS3 基础知识
上周我 (作者) 发了一个关于 CSS3 下拉菜单的文章, 有些同学抱怨我没有对 CSS 代码进行详细的说明. 那好, 本文将普及一些新属性的基本知识: text-shadow, box-shadow, and border-radius. 这些 CSS3 属性经常被用来增强页面布局, 并且很容易理解.
用 CSS 背景属性代替图片 SRC
不久之前, 我介绍了一个使用 WordPress 原生缩略图的小技巧, 关于如何使用 WordPress 上传图片生成的缩略图作为文章列表中的预览图, 并且留下了两个问题给同学们思考, 第一个问题是:
如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...
CSS 属性 background-position 的 W3C 定义
最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.
CSS: 突破框框的设计
你是否已经对现在的柱形和框框布局感到厌烦? 是时候学一下如何冲出盒子的束缚, 做一些有创造性的东西出来了. 以前, 我收集了一些几乎完美的设计都是盒式的. 这次我将会提供一些带演示文件速成的 CSS 技巧, 让大家知道如何突破框框设计, 发挥创意, 使用图片和 CSS 位置属性.
CSS 菜单列表设计
这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.
CSS Naked Day 2009
又是 4 月 9 日, 一年一度的 CSS 裸奔节, 今年已经是第四届了.
我去年已经参加过了, 好玩! 也通过这个活动找到了网页上不少的问题. 如 textarea 的 rows 和 cols 忘记设置了, span 和 div 标签混用等问题. 而今年... 我不参加了. 不是不想参加, 只是我现在的网页做了一些 SEO 处理, 把网站的 "衣服" 扒掉绝对会很难看, 就免得恶心大家了. 再说, 最近 Great Firewall 升级, 网页访问速度不佳, 就不想折腾了.
CSS Hack 兼容浏览器经验分享
由于 Firefox 的崛起和 IE 兄弟们的各自为政, CSS Hack 再次得到网页制作人员的重视. 兼容浏览器对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.
目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. 
玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.
纯代码打造圆角边框
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的.
Cascading Style Sheets