Semantic:来自未来的CSS布局框架

标签: App库 css CSS3 Grid Semantic | 发表时间:2011-08-26 14:11 | 作者:Norris Lin 小宇
出处:http://www.leiphone.com

CSS网格框架可以让你享受轻松的生活,但这依然无法掩盖它们的不足。让我们感到幸运的是,先进技术为我们引入了新的方法去布局网页。在我们前往了解先进技术前,我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷。

解读问题

问题1:它们不是语义架构

这是我从“纯化论者”口中听到过的最大的抱怨,自我在两年前创建1KB CSS Grid框架开始,CSS网格系统就规定标记和描述必须在一起。从grid_x的CSS类到HTML元素,表象信息与其他语义标记都是混合在一起,这些,都需要网页设计师自行添加。

浮动元素也必须同时清除,因为它常常会把不必要的元素添加到网页上。下图中的“clearing”DIV标签就是引用960.gs这套CSS框架:

 

问题2:它们是固定的

在固定宽度的布局下,CSS网格布局表现出色,在处理浮动元素的百分比时比较麻烦。然而,大多数的网格系统都提供浮动属性选项,这非常糟糕,当我们在网格中插入列时,网格样式常常因此而扭曲变形。在下面的1KB CSS Grid的例子中,“.grid_6”的宽度百分比被设置50%,而“.grid_3”则被设置为25%。

但是,当“.grid_3”出现在“.grid_6”单元格内时,这个定制的百分比就必须重新计算。虽然典型的网格系统只需要12条CSS规则就能指定所有列数的宽度,但一层的浮动网格就已需要144条规则(合理,但并不人性化)。

 

问题3:他们不会“响应”

响应交互的网页设计在今年甚为流行,虽然140 CSS GridAdapt.js等新工具能够让设计师根据屏幕尺寸或设备类型调整页面布局,但目前业内依然没有找到最优的布局方案。

错在工具

造成上面三大问题的直接“元凶”就是我们现有工具的局限性。或是通过给表现类添加标记,向我们的原则妥协;或坚守自我立场,完全放弃网格系统,这就是CSS留给我们的最后通牒。但是,我们并不能这样做,你说是吧?

确实是风云突变,虽然我们等待浏览器厂商为这个有缺陷的网格布局模块添加原生CSS语法支持,但我们期待的未来CSS技术现在已经降临了,通过LESS CSS框架,每个浏览器都可以支持所有CSS语法。

LESS给CSS带来了强劲的新功能

LESS是什么?

你或许听说过LESS框架,但却可能从未真正接触并使用过。它跟其他工具(如SASSCleverCSS)不同,LESS完全是为重塑CSS语法而生的。与其说是在造物,我们更愿意说LESS是CSS的集大成者。LESS的CSS让你可以在CSS里使用变量、执行运算操作,甚至是可重用的Mixins语法。下面就是LESS的一些样例。

变量

一旦定义了某个值,你就可以在样式表中定义变量来重用这个值。

 

上面的例子,编译后显示如下:

 

运算

在CSS里对颜色或者其他数值进行加减乘除

 

在这个例子里,1px乘以3的等同结果如下:

 

Mixins语法

Mixins语法是最强大的一个功能点,它可以让整段CSS语句被重用。使用简单,你只需在另一个类中引用一个mixin的类名,更让人惊喜的是,LESS还能让你向mixin语句中传入参数。

 

繁琐,浏览器新标准专属的CSS3语法充分证明mixins给我们带来的优势:

 

LESS的不足

刚接触LESS时,我对它也是抱有许多不信任的想法,但现在,我已经是它的忠实支持者。LESS样式简洁易读,而且支持代码重用。然而,LESS也存在一些需要注意的不足:

1. 必须被编译。为保证CSS代码不出任何差错,这是额外的一步。

2. 依赖LESS 文档和结构,已编译的CSS文件的体积可能比传统的CSS文件偏大。

编译LESS注释

若要编译LESS样式到CSS内,有三种实现方法。

  • 让浏览器负责执行编译工作
    正如它的命名,LESS.js 就是用JavaScript编写的,所以它可以在用户的浏览器直接编译成CSS代码。虽然这个方法让开发者很便利,但在作出决定前,我们不妨继续了解接下来的另外两种方法,这会比较恰当,因为在浏览器编译代码需要耗用一定的加载时间。
  • 在服务器端预编译代码
    我们可以使用Node.js在服务端预编译LESS.js,并且这已经移植到好几种服务端语言中。
  • 使用桌面应用编译
    LESS.app是一款Mac系统应用,它可以编译保存在你电脑中的本地文件。

介绍“The Semantic Grid System”布局框架

LESS框架对CSS语法的改革为更强大的网页布局方法的到来打下了坚实基础。而这个强大方法就是The Semantic Grid System框架。它就是CSS网格布局的新星。

1. 具备语义特征;

2. 布局方式,既可固定,也可浮动;

3. 可响应的;

4. 允许实时直接在样式表中修改列宽和列间距。

The Semantic Grid System使用 LESS的CSS方法提供一种新的页面布局方式.

配置网格样式

听起来不像是真的?我们来了解它是怎么运作的吧!

首先,导入“Semantic”网格框架到你的LESS样式表中。

 

接下来,为列、列宽、列间距定义变量,并为它们设置一个初始值。这个初始值,最终将变成960像素宽。

 

网格已经配置好后,我们在页面布局时就可以使用了。

使用网格样式

现在,网格已经配置好了,假设,HTML页面上有两个标签元素(如下),而你希望它们是并排布局的。

 

要实现并排布局,我们只需向.column()的Mixin语句中传入“列数”即可。

 

上面的LESS编译后的代码样式如下:

 

点击这里查看最终效果。这种方法的最大不同点在于它没有在标记中使用丑陋的.grid_x 类。取而代之,列宽直接在样式表中被设置好,完全将陈述标记和表现样式表独立开来。这也是它被称为semantic 的一大原因。

那么,这套框架的幕后秘密是什么呢?

为了满足你的好奇心,下面就是一些关键的mixins代码。幸运的是,这些函数都是隐藏在 grid.less文件里,所以无需,也永远不必进行编辑。

 

浮动布局的实现

上面的例子展示了Semantic框架的固定布局功能,而百分比的浮动布局方式也同样很简单。为了从像素跳转到百分比,我们需要在原来的代码中增加一个变量:

 

无需更多操作,编译后的CSS代码如下:

 

响应布局的实现

没有一套先进的网格布局框架是完整的,除非我们能根据用户屏幕或者其他设备的大小调整页面布局。现在通过Semantic.gs,我们可以先查询设备信息并设置极值,点击查看效果图

 

亲自尝试

就在几天前,Twitter推出了一个名为“Bootstrap”的项目,这个项目提供类似于Semantic的网格布局框架,这套框架也是使用LESS变量和Mixins构建。未来的CSS布局似乎越来越清晰了。

The Semantic Grid System给我们带来了最好的:强大且便利的CSS网格布局,以及将标记和表现分离的新想法。你也来下载“Semantic”吧,分享你的“Semantic”到GitHub,让我们知道你的想法!

Via:smashingmagazine

相关 [semantic 未来 css] 推荐:

Semantic:来自未来的CSS布局框架

- 小宇 - 雷锋网
CSS网格框架可以让你享受轻松的生活,但这依然无法掩盖它们的不足. 让我们感到幸运的是,先进技术为我们引入了新的方法去布局网页. 在我们前往了解先进技术前,我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷. 这是我从“纯化论者”口中听到过的最大的抱怨,自我在两年前创建1KB CSS Grid框架开始,CSS网格系统就规定标记和描述必须在一起.

Latent Semantic Analysis(LSA) - CSDN博客

- -
Latent Semantic Analysis(LSA)中文翻译为潜语义分析,也被叫做Latent Semantic Indexing ( LSI ). 意思是指通过分析一堆(不止一个)文档去发现这些文档中潜在的意思和概念,什么叫潜在的意思. 我第一次看到这个解释,直接懵逼. 假设每个词仅表示一个概念,并且每个概念仅仅被一个词所描述,LSA将非常简单(从词到概念存在一个简单的映射关系).

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .