CSS 属性 background-position 的 W3C 定义

最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.

我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:

1

[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

从编写规则我们可以看出, background-position 的值可以是代号, 数值, 百分比; 可以是一个单值, 双值; 还可以是 inherit.

background 属性中可以包含 background-position 属性, 其编写规则一致. W3C 列出的例子如下:

1
2
3
4

body { background: url("banner.jpeg") right top }	/* 100%   0% */
body { background: url("banner.jpeg") top center }	/*  50%   0% */
body { background: url("banner.jpeg") center }		/*  50%  50% */
body { background: url("banner.jpeg") bottom }		/*  50% 100% */

前两行列出了横向和纵向两个位置, 第一个是横向的, 第二个是纵向的. 后两行只有一个值, 另一个值缺省, 缺省值将被浏览器默认为 center.

我也是一直这样写的, 也就是当需要双值的时候写两个值, 不需要的时候单值. 但是今天发现这样书写的 CSS 代码会被 W3C 的 CSS Validator 认为是错误的, 将 Profile 设置为 CSS 2, CSS 2.1, CSS 3 进行校验都会出错, 出错信息如下:

Value Error : background Parse Error [empty string]

也就是说, 今后在 background 标签上不能再使用单值为图片定位, 否则不能通过 W3C 认证.

还没结束, 因为我对此好奇, 所以也在 background-position 属性上使用单值去校验了几次, 发现并不会报错. 也不知道 W3 组织是基于什么考虑, 让两个属性的编写规则进行差异处理, 否定了自己的文档而且还不能统一.

好吧, 我就改一下吧. 于是我在迷惑和无奈中把值补全了, 并不断地安慰自己说, 把东西写全是有好处的, 起码浏览器解析速度将有所提高 (尽管微乎其微).