2009年4月14日星期二

CSS矩阵布局的畅想

翻译自http://snook.ca/archives/html_and_css/matrix-layouts/ 转载请注明出处

这篇文章不是你所想的。这也不是一些您可以执行的便捷小巧的CSS技术。反正。这是一个想法,我一直在努力。一个想法-我所希望实现的-有一天你和我能够建立更好的网站。

我来说说我自己的设计想法

嗯,为什么?

谁能整好知道他们要做些什么吗?显然,我会的。这是好事。有些人抱怨并事实没有提供解决方案。利用CSS的布局也有其不足之处。我深入过基本的table布局。float和基本定位的布局。我清楚存在的局限性。但我很少抱怨它。

我喜欢其他更好的吗?是的。我不会抱怨。这是我提出的一个解决办法。埃里克罗迈耶想要一种布局系统,我将尽力给他想一个(和我们其他人也可以享受它) 。

我们已经有布局的方式难道不接近W3C吗?

是。我们模板(即高级)的格状布局定位模块。我认为,前者是过于复杂,而后者必须定义(也是不太方便) 。

很难提出一种布局,使它的规范接近现有的系统,这是近一个月以来罗迈耶的missive (疯狂的想法提出) 。每当我有时间(比如驾驶,睡觉前,在卫生间),我想尝试,并弄通它怎样实现。这是令人惊讶的。偶尔我会想到一个主意。我想怎样实现继承,怎样与其他系统定位,并设想将原有思想打破。

然后,灵感突现。那天晚上我花了一个小时把我的想法写下来。我讲给这几个人。没有人理解。我画了草稿一些人明白了,但他们仍然不是很清楚。我调整了一些,并增加更多的使用情况。我一个个地讲给他们 (但,他们并不完全理解我的想法。 )我愿意分享给大家。

那么,什么是矩阵布局呢?

矩阵布局就像基本table布局结合绝对定位。它只会增加一个属性,并尝试实现现有的概念(margin,padding,border和其他的属性) 。他将为你所有的模板提供完美的解决方案吗?不,我已经看到的有些地方是不合适的。但它会比我们现在用的要好。

以下就是基本的创意 :你用定位属性把每个格子放到应该在的位置。让我们来看看下面的例子。

例如布局3列和第二栏中有三小格。
这是一个3栏的设计,但中列有一行标题。我用字母来标记他们的顺序。现在,让我们用矩阵布局的观念来看看,写出如下代码:

#a { position: matrix(1,2, 1,4); }
#b { position: matrix(2,2); }
#c { position: matrix(2,3); }
#d { position: matrix(2,4); }
#e { position: matrix(1,1, 2,1); }
#f { position: matrix(1,5, 2,5); }

这个大块被每行每列的最高数目分成一个个小格子。矩阵值是二维的。第一维是它的左上角,第二维是它的右下角,第二维没有了就用第一维。(换句话说,只表示一块区域。)

如果你已经看到了这个先进的布局草案,你可能会看到一些小的相似之处。这不是强大的高级布局,但希望这简单的改进能够尽早实现。这种看起来像表的基础的布局,但它有独立的序列(这个例子中没有其他属性) 。

工作进展

这的确是一项进展中的工作。将继续发展;我再完善这个想法。我脑子里很清晰,却表达不清。

确实有很多需要改进。我能马上想到一些。负数margin怎么解决呢?我不知道。如果box的数量不增加高和宽又怎样变化呢?我更怀疑,但我不知这些方案当前浏览器支持不支持。

目标

最后,我想浏览器开发者能整合矩阵布局到下一个版本的浏览器。我提出这个想法,希望能够推广,让反得到馈,并逐渐壮大。

让一起加油吧。

没有评论:

发表评论