CSS

让 Rails 3.1 默认使用Sass

因为比起用符号(大括号)控制的代码层次,更喜欢清晰的缩进式层次,因此想把Rails默认的SCSS改成SASS,希望通过诸如 rails g scaffold sth 生成出来的样式文件是Sass格式而非Scss格式。

在Google上奋斗了2个小时,除了在Stackflow上找到一篇文让我还略受启发外(但这篇文中许多人提出了许多种不同的解决方法,不知为何我用下来居然全都失败了),其他的几乎很难找到。

然后我开始读railties的源码……研究了半天generator,一无所获……最后都找到base.rb里去了。此时我开始意识到可能方向发生了错误,转而往更高层的方向寻找,最后终于在sass-rails/lib/sass/railtie.rb中找到了

config.sass.preferred_syntax = :scss

这行代码跟Stackflow网站上某人提出的办法相差无几,于是按照他的方法放入我的rails应用的/config/application.rb中,就在Application类中,跟在其他config.xxx后面,把:scss改成:sass,然后运行rails g scaffold orz,果然见到invoke sass,狂喜~

require File.expand_path('../boot', __FILE__)

require 'rails/all'

if defined?(Bundler)
  Bundler.require(*Rails.groups(:assets => %w(development test)))
end

module MyApplicationName
  class Application < Rails::Application
    config.encoding = "utf-8"
    config.filter_parameters += [:password]
    config.assets.enabled = true
    config.assets.version = '1.0'
    config.sass.preferred_syntax = :sass
  end
end

今天稍稍更改了一下主题样式

其实也没有什么特别的原因,只是突然又一次(之前已经有过好多次了)迷上了Safari的字体平滑效果,所以决定更改一下字体。

平时最好用的小号宋体字在字体平滑后变得很难看(效果相当于把一个2倍大的宋体字平滑缩小,其实字体平滑差不多就是这么实现的吧),所以改用了微软雅黑。但是由于雅黑先天的略显肮脏和不整齐的毛病,决定把主字号从12px提高到13px,另外留了0.1em的字符间距(不是每个浏览器都有效)。

之后,顺便地把几级标题的大小和颜色优化了一下,还默认给.content内的p标签加上了2em的缩进(不要缩进的段落另外给class),优化了一下以前的一些css继承,比如几层标题的字号改成了用百分比统一管理。

现在暂时先改到这里,在Safari下的表现相当不错,其实在Linux下的效果也会不错,只是我记不住Linux自带的几个字体,所以没法写进font-family,有点可惜。至于普通的Windows浏览器,凑合着看了下也还不错,有什么问题再改吧~

网页设计审美反思

踏入Web设计师这一行,不知不觉已经有3年时间了。

因为最先接触的启蒙书籍便是Andy Clarke大师的《超越CSS》,以及享誉设计界的《CSS禅意花园》,因此我在Web设计的审美方面,一直是偏向于欧美式的。并且,国内一些老旧的、陈腐的设计与编码,更是加深了我学习前卫Web标准设计的决心。

长久以来我一直以为这种纯欧美式的设计风格,就是我最喜欢的。但是,当我数次更换了我个人博客的主题之后,今天我决定静下心来认真反思这个问题。反思自己的Web设计审美观。

最初的时候,我使用的是WordPress自带的Classic主题,只是自己稍稍修改了一些颜色,该主题的设计者就是《CSS禅意花园》的主要作者之一的Dave Shea。随后我又从WordPress的官方主题库中寻找了一番,选中了BytesForAll的一款Atahualpa主题。这是一款非常简练的主题,除了Logo、搜索、RSS按钮,还有一幅宽大的banner,再无任何图片元素。各个板块之间只是用虚线分割,浅浅的、淡雅的灰色虚线,它表现出的正是整个主题的核心。我在这款主题的基础上做了一些字体、字号、颜色还有图片的优化,让它对中文字体的适应性更好,然后使用了很久。

但是经过一段时间之后,我开始觉得这款主题并不能很好地代表我的审美观,首先它实在太过简单了,我希望的界面风格是要简约+华美,简约和华美并不冲突,既然天底下能有上海政府网这种又繁乱又丑陋的设计,就可以有既简约又华美的设计,只不过非常困难就是了。其次,中文Web设计永远的痛——中文字体,那些基于英文的主题上变换自在的字体与字号,直接拿过来换成中文就只有丑陋两字可以形容,因为不经字体平滑处理的中文没有任何一种字体能够放大到30多px却保持平滑。第三点则是,这种过于简洁的风格无法表达出我想要的一种温馨的、富有情感的效果。

最后,我选中了崔凯先生过去的作品Sunshine,尽管这个主题相比jQ等国外主题,看起来好像很平庸,似乎和国内常见的页面设计风格并无太大的区别,然而这配色与配图却让我产生了些许共鸣。崔凯先生似乎已经不再进行设计了,但我还是应该表示感谢之情。

是的,因为是个人的博客,是个人在繁杂的生活之余,抒发情感的地方,我希望它能够有一个相称的外观。

终于明白了,高于布局、配色、取材等等之上的,一切表象背后的核心,是的,这才是我在Web设计上的终极追求目标——情感。

我所追求的Web设计风格是一种带有情感的风格,一种可以让用户感受到作者想要表达的情感的风格,一种可以带动用户,让用户也渐渐融入作者的情感世界的风格!这不是贴张照片画两条线就可以做到的,不是画个矩形套上阴影和浮雕就可以做到的,不是放个本本中间挖空填点文字进去就可以做到的……

把情感溶入作品中,多少设计师毕生的梦想,这也是普通的设计师与艺术大家的差距吧。不只是平面设计、不只是绘画、不只是文艺、不只是音乐还是别的什么,每一件经由自己双手诞生的东西,哪怕是一行代码,是否有将自己的情感投入其中?是否有这样的意识与觉悟?

引用WordPress中文站下载页的一句话——代码如诗。

一些CSS3新特性介绍及当前浏览器兼容性

回想起我第一次听说CSS3,还是我最早开始学习HTML+CSS的第一本书,Andy Clarke大师的《超越CSS:Web设计艺术精髓》中介绍的,当时别说HTML5了,连IE8还在天上飞呢,然而CSS3却是确确实实被提上日程的东西。一晃好些年过去了,随着HTML5的热度逐步上升,新型浏览器一个接一个地发布,CSS3也再次引起了人们极高的关注。那么现在,我们究竟可以在这些新型浏览器中获得多少CSS3的新体验呢?

我们现在来试试在Opera 10.51、Firefox 3.62、Chrome Dev 5.0.366.2(在大多数的时候可以折射出Safari的表现,故不再单独测试Safari)、IE 9 Preview中,到底能有怎样的表现,又应该怎样去表现。

1、多重背景图

这个是我最早接触的让我眼前一亮的CSS3属性,尤其是有一阵子我想要同时在页头和页尾应用两套不同的背景图并居中的时候。

多重背景图的用法是这样的:

	#div {
	  background-image:
	    url(image1.jpg),
	    url(image2.jpg),
	    url(image3.jpg),
	    url(image4.jpg);
	  background-repeat:
	    no-repeat,
	    no-repeat,
	    no-repeat,
	    no-repeat;
	  background-position:
	    top left,
	    top right,
	    bottom left,
	    bottom right;
	}
	

目前Opera 10.51、Firefox 3.6.2、Chrome Dev 5.0.366.2都能够很完美地支持多重背景图,然而IE9至今还是无法实现,多少让我有些郁闷……

2、RGBA半透明背景色

这个东西我最早是在Opera 10.00的介绍里面了解到的,在实际应用中非常实用,很多地方都可以用到。而且这个新CSS现在受到了非常广泛的支持,上文中提到的浏览器包括IE9和Safari都可以完美地支持RGBA半透明背景色。

RGBA背景色的用法是rgba(red, green, blue, alpha),示例如下:

	#div {
	  background-color:rgba(255, 100, 0, 0.5);
	}
	

与RGBA颜色类似的还有可以使用HSL颜色,方法就是把rgba四个字母替换成hsl三个字母而已。

3、奇偶数选择器

表格隔行不同背景色是现在非常常用的一种表格样式,然而要实现起来却相当困难,不得不给每一行添加class,然后再利用后台程序生成。新的选择器解决了这个问题,并且在上述所有浏览器中可用。

示例表格
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table

奇偶数选择器的使用方法如下:

	#tab_test tr:nth-child(odd) /* 奇数行 */
	{
	  background-color:skyblue;
	}
	#tab_test tr:nth-child(even) /* 偶数行 */
	{
	  color:red;
	}
	

4、:target伪类

另一个非常有意思的小东东,不知道现在的Web设计师是否还记得这么个小东西,写一个超链接,将其href=”#test”,然后在页面中随便某个地方找个元素将其id=”test”,然后当你点击这个超链接,页面将会跳转到这个id=”test”的元素这里。:target伪类就是这个功能的一个延伸,它使得你点击这个超链接时,不只是改变页面位置,那个id=”test”的元素还会被赋予某些样式。

  1. 可能因为博客使用了伪静态的关系,这个实例出现了问题,你可以点试试看,不过也许不会出效果……查看示例

它的用法非常简单,在你想被改变样式的目标的选择器后面加上:target就行,比如你想让一个id叫test的元素改变,只要写#test:target就行,当然你也可以用div:target之类更广泛的选择器。这个小东西现在被以上全部浏览器支持。

5、阴影

平面设计时我们最常用的效果就是阴影了……新的CSS让阴影变得容易了,但是IE9还是无法支持到。

阴影的CSS3实现很要命,因为还是实验期的东西,所以Mozilla和Webkit都在CSS属性之前加上了标记以防止误用,而Opera则决定使用原版属性名,所以:

	#box {
	  box-shadow: #333 3px 3px 4px; /* Opera用 */
	  -moz-box-shadow: #333 3px 3px 4px; /* Firefox用 */
	  -webkit-box-shadow: #333 3px 3px 4px; /* Webkit系用 */
	}
	

6、渐变背景色

如果说阴影的写法你已经觉得很要命了,那么我要告诉你,那个毕竟还只是属性名不同……渐变背景色的用法相当混杂,最早响应官方的是Webkit,但是Mozilla也有自己的另一套写法,于是两者的写法不同……另外,IE9继续没支持到。至于Opera,我到现在也没尝试出来它的渐变怎么写,有可能还不支持吧。

	background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
	background: -moz-linear-gradient(top, red, blue);
	

7、被选中文字样式

一个优化细节的好东西,也许日后会被经常用于页面配色的微调吧,目前上述浏览器均已支持,不过Mozilla还是有前缀,Webkit则用了标准名称。

选择这段文字看看效果,对比下选择其他文字时的效果~~

	::selection {
	  background: skyblue;
	  color: pink;
	}
	::-moz-selection {
	  background: skyblue;
	  color: pink;
	}
	

除了上述的个别效果之外,CSS3还有很多更新的功能,包括立体边框、多栏布局、指向变形等等,不过IE6至今仍在警示着我们:革新还有很长的路要走……

放眼未来 编织现在

4.4 结束语

好了,我们已经到了这本书的结尾,接下来是什么?

是未来!

如果你和我一样享受着网页设计的话,你将会发现美好的时光等待着你。你拥有各种机会——几年前我们无法想象的机会——去创造人们喜欢访问的网站。

在CSS刚刚诞生的几年里,网站设计产业就发生了巨大的变化:辅助功能、表意的标签,已经目前Web专家每天都会碰到的CSS。一个真正的专家从来不会停止学习。如果没有不辞劳苦找寻各种解决方案并在休息的时候将这些解决方案慷慨地分享出来的人们,今天的CSS也不可能得到如此广泛的使用。我希望在未来,CSS开发人员能够找出更多令人激动的解决方案,你也可以追随他们的步伐,分享你所学到的东西。

开发和设计网站是一项创意无限的工作,无论你是在写代码,创建数据库,还是进行平面设计,你做的每一件事情都是创造性的。我拥有W3C CSS工作小组的受邀专家的身份,我能够帮助一个具有创造力的设计师,把他的声音带到会议桌,我非常欢迎大家分享自己的想法。如果未来的CSS版本是能同时满足视觉设计师和开发人员的需要的,那么它需要我们所有的人都参与到它朝哪里发展,怎么发展的讨论和争辩中,一起明确它的未来。因此我希望大家都尽力而为,不管贡献大小。

现在可以停止听我唠叨了,去开创未来吧!

——Andy Clarke(“Transcending CSS: The Fine Art of Web Design”)

《超越CSS:Web设计艺术精髓》,英国Web设计大师Andy Clarke所著的这本有着357页正文的经典著作,没有采用国内常见出版物的那种非常紧凑的布局,而有着较大的段间距,大量的各级标题都有特大号的字体与行距(就如Web中常见的那样),每一页都有近半的外边距用于插图和注释,可说文字量并不大,而且读起来绝对不会感觉枯燥。然而,我在一年半前购买的这本书,却到今天才读完(因为中途又去学习了其他的书籍,如《CSS禅意花园》)。

这本书并不是面向Web设计初学者的教材,它更多地在努力引导那些已经知道如何创建“看起来”很好的页面的Web设计师们去了解Web设计的灵魂,去理解怎样编写合理而简练的HTML,理解为何要去努力做到样式与内容分离,以及体验将在不久的未来来到我们身边的CSS3技术。

然而,对我来说,我却把它当成了网页设计的入门书籍给买了下来。

当时的我几乎一个HTML标签也不认识,完全不知道如何在Web页面中书写内容,甚至连“CSS”这个名词都刚刚从同学那里听说。为了完成“软件类课程设计”这门课的期末设计(我使用了PHP语言编写程序),我必须拥有一本教材引导我入门网页设计。然而,在没有仔细阅读前言和目录的情况下,我就因为这本书本身精美脱俗的设计而“无谋”地买下了它。

最后的事实证明,我是幸运的。

在中国买实体教材最容易遇到的问题是,几乎所有的教材的内容都是陈旧的,至少其思想是陈旧的,而且大量的泡沫产品也导致它们的内容是庸俗而千篇一律的。我是幸运的,因为我的起点就在许多人超前。《超越CSS:Web设计艺术精髓》讲述的是当今最先进、甚至是超前的思想,并且不是像说明书那样去讲解每一个HTML标签或每一个CSS属性的功能,而是在试图引导读者领悟如何正确地去思考:“这种内容上应该使用什么元素?”而不是“元素可以使用在哪种内容上”,这使得“思想”这种抽象的东西变得很容易领会。

对我而言,网页设计只是刚刚起步。等待着我去学习的东西还很多,比如我完全没有美术基础,比如我还很不擅长制作自适应宽度的布局,比如对于IE6这些原先已经快从我的记忆中被淡忘的浏览器的支持,比如我对于额外的标签还是非常依赖的(尤其是公司里做网页出的效果图特别喜欢圆角边框,并且几乎要求每一个页面都能适应从800×600到FullHD的所有分辨率)等等。

我身边那些设计网页的人,他们做出的效果图本身就是一个表格的体现,所有的东西全部长得方方正正,并且被按行按列整齐地排列在一起。我曾经设计过一个简单的两列布局,在页面的上半部分(大约700px),左列显示一些重要的文章的链接,右列则是滚动图片和联系方式等小Tips,他们的宽度比大约是3:2,而页面的下半部分则是左右对称1:1的两列不怎么重要的文章链接。结果当我把这个设计提交后,几乎整个办公室的人都诧异地问我:为什么上下两行的列不等宽的?

而我现在要去做的,就是打破这种表格布局时代留下的惯性思维。虽然我没有美术基础,然而对于从未接触过表格布局的我来说,从最初就建立一种不同的思维相对于转换思维要容易得多。尽管我只是不起眼的年轻人,但我将尽我最大的努力去影响我身边的人,让他们明白如何摆脱旧时代的束缚,为何要将样式与内容分离,为何要学习并遵循国际规范,为何要重视特殊人群等。

今天我在这里写下这篇读后感,是为了给自己设立一个标志,从这里开始,前方是新的世界。尽管你可能还是在我那用了他人现成设计的博客上,甚至是我的QZone上阅读到这篇文章,但是我已经开始制作真正属于我个人的主页了。尽管我还是从修改现有博客的样式开始着手(Blogbus的HTML结构非常漂亮,而QZone则是难以修改的表格布局),也许等明年我自己的网站正式上线时它还非常简陋甚至丑陋,但是我相信我可以克服这种艰辛,因为我已经无法也不需要去体验我的前辈们在那些连表格布局都困难重重、CSS甚至都不能正常显示的Netscape3上体验到的艰辛了。

在不久的将来,这篇文章将会如约成为我个人网站的建站序言,而且它的出现将会比HTML5和CSS3普及要更早一些。而我也将继续我的人生旅途,从迈向未来开始。