Tag: CSS

CSS 中英文排版大冒险

marisa-as-default-header

(credit: twitter 戀歌)

事出有因，我最近在设计软件（例如 Sketch）和页面的中英文排版上花了不少时间。

具体地说，我是想弄清楚在中英文混排时，为什么文字、图标等设计元素这么难对齐，这么多设计工具的行为与我们想象不同。

本文是对 CSS 相关排版的研究。Sketch 我已经写了一个插件去绕过 OS X 特有的排版问题。

阅前提醒：本人在排版方面的研究仅是浅尝辄止，欢迎高人点评错漏。

Continue reading “CSS 中英文排版大冒险”

IE与:active的小故事

IE4发明了a元素(链接)上的:hover与:active（pseudo-class，伪类），它成为了CSS1的标准。

CSS2把这个标准扩展至所有元素，IE是最晚支持它的浏览器，直到IE8才加入。

本来这个故事已经完结，然而IE却不想让故事画上句号——

今天在开发时遇到一个奇怪的问题：CSS按钮，在鼠标按下时本该有“:active”的属性，然而IE9却不卖帐，按中间总是没反应（:active属性不触发），按边缘却可以。

同样的问题，我尝试在Twitter Bootstrap等网站重现，却怎么都不成功。

研究了半天CSS和Javascript源码，依旧毫无进展。

直到我对比自己的HTML和Bootstrap演示的HTML，才明白过来——

我的设计比Bootstrap多一个span元素在链接里。

这时再查对应测试，果然IE8，IE9以及IE10，都是不支持从子元素触发:active的（不向上传播）。这个问题亦存在于Opera，但只有在子元素为display:block时才触发。

解决办法？

  • 避免在CSS按钮下增加占用大面积的元素（Twitter Bootstrap的icon很小，所以问题不明显）；
  • 用“类”代替“伪类”，再用Javascript补救缺失的事件。

参考：

Pears on WordPress，“梨子”主题玩转你的前端设计

除了用来当写作平台与内容管理系统外，WordPress还能用来做什么？几年前的P2主题告诉我们它能拿来当微博，今天Pears主题的则把“文字内容”从WP中去掉，把HTML和CSS代码搬到了主桌。

简单解释——Pears把WordPress变成了HTML/CSS开发者收集与试调代码的平台，安装了这个开源主题之后，可以在后台加入对应的HTML与CSS代码，再到前台试调并即时查看效果。相对专业的开发软件自然还是有差距，但作为收集与开发一些有意思的前端设计，还是件不错的小工具。

如作者所述，这个主题基于默认的twentyone主题，实际使用过程中的细节流程有待提高（例如说做个首页提交系统，避免到后台添加代码）。

 

日常主题更新v2

感谢各位回复，根据各位的测试结果进行了调整。依旧以IE9，Firefox 4，Opera 11和Chrome 10作为测试工具。完成后很神奇的发现IE6到IE8居然还能用，于是直接发布了。手机/移动设备的访问体验应该也有提升，喜欢老版设计的旅客请利用顶部的简洁版。

All Hail Media Queries

假如说HTML5的走红与白菜化是互联网发展和软件商推广浏览器的阴谋得逞，那Media Queries最近一年的热门就多亏各种互联网移动设备的提携了。Media Queries是什么？从定义角度出发，它是W3C推荐的用于检测互联网设备功能与属性的CSS3语法。换成普通人能理解的话，则是“一个网站，多种形态”（参见“一国两制”），不再需要专门为移动设备（更简单的说法，屏幕小分辨率低的设备）专门制作网站入口，仅使用一个主网站就能自动适应各种设备。

话说回来，当今的智能手机与网本无不配置了功能强大的浏览器；绝大多数网页设计未使用Media Queries，它们也能从容应付。Media Queries的存在，则更像是对设备定制软件的挑战——同样易用，横跨平台。直到最近我还以为Media Queries的应用仍处在半吊子的状态，但从这个网站收集的例子上看，设计师们已经把这种技能纯熟的运用在实际例子中了。2011年，看来会是个网站穿上“松紧带”的年份。

via mediaqueri.es

CSS 2.1的隐藏技能：多背景，多边框，等高容器

相比CSS3的新特性，CSS 2.1标准下的pseudo（伪类选择器）已经通用于所有主要浏览器的稳定版本（FF 3.5，Safari 4，Chrome 4，Opera 10以及IE8），这样一来我们就可以三次装饰同一个容器而不用建div巢了。Nicolas Gallagher最近写了一篇文章，看完两个DEMO（1,2）之后我清楚认识到自己没掌握CSS 2.1的事实。

为什么IE的盒子模型是错的

ppk曾经说IE的传统盒子模型比W3C的定义好理解，但为什么IE的盒子还是比W3C的糟糕呢？因为IE盒子的定义连IE盒子的支持者自己都搞不清楚。与文中所述相反，IE盒子并不包括margin，而只是纯粹的计算padding与border的占位。为什么IE传统盒子这么烦？因为需要反向推导一个盒子的内容宽度，而浏览器渲染时期望尽快知道内容的宽度。再有，IE传统盒子硬是把微软自己的开发团队都搞晕了，有些bug还穿越出现在标准模式下，哦，你不知道IE6的标准模式使用W3C的盒子定义？

支持IE传统盒子的同学，没有为IE5.x开发过的同学，请你考虑这个问题：如今CSS3支持图片border了，使用IE盒子模式，浏览器应该怎么计算内容宽度？CSS3是为设计者方便提供帮助，请不要以box-sizing为借口，为IE5.x的顽固不化辩护。

延伸阅读：