采用 Webkit 核心的浏览器主要有苹果的 Safari 和 Google 的 Chrome，Webkit 核心有着良好的性能，并且在某些细节对用户非常友好，页面输入框（input 标签）聚焦高亮和文本框（textarea 标签）缩放功能就是其中的两个对用户非常友好的设计。可是这两个设计在对用户友好的同时，却会对页面设计产生影响。
下面是默认情况下，Webkit 浏览器里输入框获取焦点时的情况。
我们可以发现 Webkit 对输入框的高亮已经使页面呈现出的样式和设计样式不同了。如果你的网站已经对输入框获取焦点时定义了特殊的样式，不妨把 Webkit 这个多此一举的功能屏蔽掉。加上下面的 CSS 就可以轻松地把高亮去掉。
jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时，你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时，在编写过滤规则时你必须先对 “[]” 进行转义，所以我们应该这样定义选择器：“$(“input[name=names\\[\\]]”)”。
WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。
在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。
有时我们需要令一个宽度固定的容器里的子框架居中（例如一个 Div ，或者其他 block 级元素），如果子框架只有一个的话，我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。
但如果我们要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用 CSS box-align: center 来实现这种效果。
可是目前还有相当一部分主流浏览器不支持 box-align 属性，那么我们应该如何编写 CSS，使这种效果能兼容大部分的浏览器呢？
为了使多个 block 级元素排列在同一行里，我们习惯使用 float 属性使子框架浮动，然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG，这样反而要投入额外的时间去调试 IE6 的 Hack。
虽然我们还可以通过 display: inline 来避开 IE6 的 BUG，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。
继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。
在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。
box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时，浏览器将会把这些子容器的 box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的啰嗦，其实一看 DEMO 就懂）。也就是说，我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。
CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。
通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：
1 2 3 4 5 | <body> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </body> |
在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。
最近发现了一个让 IE6~8 也能呈现 CSS3 Multiple Backgrounds（复合背景）的方法，当时我小小的震惊了一下。看来 IE6 曾经的辉煌不单是微软的捆绑和网银的支持造成的，在当年，它强大的功能也令其它浏览器难以追赶。废话不说了，先说说 CSS3 里的标准做法。
在 CSS3 标准里，Background 属性被赋予更加强大的功能，在 CSS2.1 的基础上，我们可以对一个对象同时使用多个背景图片。例如如下的样式：
1 2 3 | #multiple-bg { background-image: url(top.png), url(middle.png), url(bottom.png); } |
添加符合背景图片的时候先从最顶层开始添加，按从高到低的顺序写样式。大家可以看这个 Demo。可以尝试用 IE 打开看看效果。
在网页里使用圆角效果是使网页更加美观的一个简单而有效的方法，可是由于 IE 和一些老式浏览器的存在，如何使页面在各个浏览器里的效果一致一直困扰这网页设计人员。最近我在制作主题时面对一个艰难的抉择，因为我要在主题里使用大量的圆角，我应该如何去协调圆角在不同浏览器里的效果？下面我将列举一些产生圆角的方法，并阐述一下它们的优点和缺点，各位观众在以后遇到这种问题的时候可以根据自己的时间或者技术需要进行取舍。
关于 CSS 圆角在《再谈 CSS 圆角》一文里已经有详细的阐述。但纯 CSS 的圆角一些老式浏览器根本不支持。使用框架叠加的话不但会使页面结构变得非常复杂，而且大量的多余框架也会给一些后期开发带来困难。而使用圆角的图片作为背景则很难在一些灵活多变的页面里进行应用。因此 CSS 圆角目前只能在一些框架（主要是宽度）比较固定的页面里，通过图片的方式来实现。
如果你想改变一个 HTML 元素的可见性，你会把这个元素的 CSS 属性改为 visibility: hidden 还是 display: none ？这两个属性有什么不同？在页面元素可见性改变时你如何应对？
这里有个 Demo 可以比较 visibility: hidden 和 display: none 的区别。点击页面上部的链接，页面里绿色的 Div 将会进行相应的改变。请留意一下当绿色的 Div 属性分别被设为 visibility: hidden 和 display: none 时对其它元素会有什么影响。
CSS3 很强大，但目前各个浏览器对它的支持程度不同一直是 CSS3 不能被应用的主要原因。今天 Bolo 推荐两个在线跨浏览器 CSS3 规则生成器。
CSS3, please! 只有一个页面，上面以标准的 CSS 语法罗列了一些目前常用的 CSS3 属性在各种浏览器里的 hack ，通过点击各个属性上的 {toggle rule off/on} 可以禁用或启用该属性，页面的 logo 会做出相应的变化。
Recent Comments