关于界面的价值观与方法论
567891011121314

把CSS全部归零

7March2009

我曾经佩服过google ads,它可以再任何网页上出现,而它的样式却不会被寄主网页的CSS给破坏。后来发现它其实是用的iframe,呵呵。

不过倒是引发了我一个思考:如何保证一个区域里的样式不会被外部样式“入侵”。要做到这点其实说难不难,说容易也不太容易。关键是两点:

1. 将该区域里的所有样式全部设为最初的默认值;
2. 保证上面的样式的优先级为最高。

所以呢,下面是一个尚未完善的例子:

#clearAllStyle *,
#clearAllStyle a:hover,
#clearAllStyle a:link,
#clearAllStyle a:visited,
#clearAllStyle a:active  {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    
    float: none;
    clear: none;
    display: block;
    
    margin: auto;
    padding: 0;
    border-width: medium;
    border-color: inherit;
    border-style: none;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    
    color: #000;
    background-attachment: scroll;
    background-color: transparent;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    
    font-size: 12px;
    font-family: sans-serif;
    line-height: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    white-space: normal;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: baseline;
    overflow: visible;
    visibility: visible;
}
#clearAllStyle span,
#clearAllStyle em,
#clearAllStyle strong {
    display:inline;
}
#clearAllStyle a
#clearAllStyle a:hover,
#clearAllStyle a:link,
#clearAllStyle a:visited,
#clearAllStyle a:active {
    display:inline;
    text-decoration:underline;
}

这个代码还处于待完善的阶段。我没有对其进行全面的测试,不过基本上能够保证绝大多数的情况了。

注意几点:
1. 我这里考虑的是将所有的CSS属性设为默认值,而并不是将所有的HTML标签设为它们默认的样式。因为其实从实践的角度,每个浏览器里HTML标签的默认样式都是不一致,不可能也没有必要将其回复到默认样式。保证样式不被外部样式入侵,这才是我们的目的。
2. 所谓的“属性的默认值”,是指在没有明确定义某个属性时,这个属性默认呈现出来的那个值。上面的值都是根据《CSS权威指南》里得到的,不过并不是所有的值都有默认值,没有的我就自己加了一个自己想要的那个值。
3. 有一个比较麻烦的问题:某些属性无法被子元素继承,比如text-align。倘若接下来有如下定义:

#clearAllStyle .copyright {
    text-align: center;
}

对于.copyright的子元素,就会仍然靠左。解决的办法是一个很傻的写法:

#clearAllStyle .copyright,
#clearAllStyle .copyright * {
    text-align: center;
}

看起来不好看,但是应该没什么大问题。
4. a标签在IE6下,其伪类的定义会被认为是最高优先级,所以需要显式声明。(感谢OoSleePinG指出)
5. 其他还有些元素需要被归为display: inline,比如del。但是,如果我其实不用它,就没必要写了。

如果大家有什么看法,欢迎进一步讨论。

诚聘有设计感的美工

28February2009

上次有讲过招前端的段子。这次再说说招设计师吧。

坦率的说,对设计师的要求更难用文字描述。所以也不能太苛责,不然你自己试试看,很不好写的呢~不过,下面这些就不是技术性问题了:

熟练使用PS、AI、CD、FW、FLASH… 等图形设计工具
要求会的软件还挺多。我觉得CD就算了吧,很少听说网页设计用这个的。而且,Flash不算是“图形设计工具”吧?

有较强的色彩感和创造力,有良好的视觉设计感觉,丰富的创意头脑,对图片渲染和视觉效果有深厚认识
我有经历过面试的时候,面试官讲的话比自己多一倍。我能想象如果去参加他们的面试,也会如此。翻来覆去的讲四遍,不就是要求“优秀的设计能力”嘛?
呃,另外,谁对“图片渲染”有深厚认识的,请举手~我有个同学在美国读博学图像处理专业,准备去Adobe,他大概对此有深厚认识吧~

作品新颖、有创意、很好的色彩感、时尚感、布局观
前面都好说。只是,什么叫“布局观”?这个词挺滑稽的,呵呵。

熟练操作网页三剑客
没记错的话,三剑客是指“Dreamweaver 4”“Firework 4”和“Flash 5”?那得再给配一台Windows 98的电脑哦。

北京水立方附近高薪招聘网站美工!
这只是个标题,我没点进去细看……

精通Adobe各类设计软件
是在代招Adobe用户体验测试志愿者?

能够使用Photoshop之类的软件,创建页面中使用的常见背景,如圆角边框,LOGO。
是因为上一个被贵公司开掉的人不会做圆角边框吗?
不过,有个细节值得注意哦。这段话里讲说,圆角边框和LOGO都是“常见背景”,可见对CSS sprite精神有深刻理解。

设计师(要求用AI,男生优先)
这个…一定非得用AI么?
而且,单凭“男生优先”这句话我就想告他们。

当然,我们公司多是电脑肓,有个什么硬件软件问题的,也需要这位同仁出手帮助一下。
据我所知,大多数的设计师对电脑软硬件都一窍不通。这就是为什么他们都喜欢用不大会出问题的Mac。

诚聘“DIV+CSS”制作人员

21February2009

忽略掉这个题目吧,我是标题党。

我最近不停的被猎头骚扰,不明白为啥我这么低调的一个人也能被猎到。猎头MM们一开口就问招前端开发,去不去啊~我就只能礼貌的找个借口,比如“杭州太远啦”之类的(偷笑~~好啦,我真的没有不尊重谁的意思,确实目前不想挪窝啦)。

最近这段时间,貌似前端开发很很吃香,到处都见在狂招。这两天发烧在家躺着,无聊就逛了下经典的招聘版。忽然突发奇想把我觉得好玩的招聘语句搜罗了一下。

先说哦,我就事说事,我也不记得这些词句是从哪一则消息上找来的。而且只是技术上来考量,至于有些1500块就想招个人我就不去评论了,日子各有各的过法嘛~

精通DIV、CSS, 熟悉W3C标准,需要兼容PC:IE6.0、IE7.0、Firefox2.0、Firefox3.0、Safari。 MAC:Firefox2.0、Firefox3.0、Safari
光精通“DIV、CSS”就能兼容这么多浏览器,也够难为人家了。说起来,“精通DIV、CSS”也算是当下前端招聘最标准的措辞了。所以我决定,土豆网的前端招聘也要用这一说法:

下面是“精通DIV、CSS”的面试题:
1. 哪些标签里是禁止放DIV的?如果放了会有什么后果?
2. 哪些CSS属性对DIV标签是无效的?

这才叫做“精通DIV+CSS”嘛~~哇哈哈

熟悉AJAX,能够熟练使用一种AJAX框架,如YUI/jQuery等
它们是“AJAX框架”?

DOM应用熟练,对页面重点元素有一定理解,如select等
其实这个我还真没明白。为什么select是“页面重点元素”?难道,不是“DIV”么?(哈)
另外“DOM应用熟练”也不是太懂。

熟悉Web 2.0标准
啥都不说,这个就直接拜吧~~

精通Ajax、JavaScript、Xml、DOM等前端技术,掌握面向对象编程思想
这个排比句很有趣。而且,为啥要求“Xml”?连“DIV”都不要求吗?
另外,要求精通带有面向对象思想的JS,这倒让我相信他们确实在寻找世界一流的前端。

了解程序编码对html代码规范的要求
其实,我也不知道程序编码对HTML代码规范有什么要求…望指点。

1. 两年以上UI设计从业经验,具有商业软件产品UI设计经验,能独立完成软件界面的设计;
2. 精通HTML,XML,CSS,Javascript, 熟悉JSP,AJAX等;

这是同一则招聘信息里的。它好像招的是软件UI设计师。姑且不说软件UI设计师为啥需要会HTML和CSS(或许是Web应用吧),还要人家熟悉JSP,就太为难了。

不过呢,这让我想起我刚毕业的时候写的简历。啥经验都没有,只能把自己所有的鸡毛蒜皮都写上,其实绝大多数都跟应聘职位完全无关的。所以比较能理解那些要求人家什么都会的招聘信息。

如果一个像素的误差会让你寝食难安,所有职位要求都可以降低一档
我是明白他看重对细节认真的态度。但是后面半句实在让人费解。其他的职位要求就这么不堪一击么?再说了,“精通DIV+CSS”再往下降一档是什么?熟悉?

另外还有两个比较知名的公司,招聘信息本身还OK,只是职位名称有点好玩:一个叫“网页重构工程师”,这大概是拜那本Web标准开山之作所赐吧,不过人家是叫“网站重构”啊~~

还有一个叫“UI/UE开发工程师”。UI开发,我能理解。但是UE开发就实在觉得太八竿子了。让开发人员来做UE,想把Alan Cooper气死么?

好啦,只是娱乐一下。但如果要说我在看低谁,其实没有。我觉得每个公司情况不同,所需的人才也不尽一致。只是不要像我刚毕业写简历那样把什么有得没的都堆上去。像下面这一则我就挺喜欢:

熟悉通用设计软件并掌握其中的一种或几种,并能够完成处理PSD2html
什么叫PSD2HTML?翻译成中文就是“切页面”。这条信息我就很欣赏,因为它很实在,没有堆砌那些自己都一知半解的技能要求。其实,你还别看不起“切页面”这个工作,并不是所有的PSD都能很容易的2HTML的哦~
而且还有专门以这个为专职的网站呢,看:www.psd2html.com收费还不便宜~