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的顽固不化辩护。

延伸阅读: