“网站前台打杂”现在有了一个很响亮的名字 - “网站前端开发工程师”，但是我是设计师还是开发者呢？以下是一篇讨论这个问题的问题，翻译的有些生硬，浏览不顺的可以看看原文。
翻译至:Are we designers or developers?,作者 Roger Johansson
在站点的关于页面(原作者的about)，我称自己为“开发人员/设计师/应时作家”。这有一点模棱两可，我仍然在寻找一个答案：当别人问我靠什么来维持生计时，我的回答。我是一个设计师？网站开发人员？网站程序员？全部都是？都不是？这是很难用一句简单的话来回答。
我的答案会基于谁来问，什么时候问，为什么问，在什么情况下问。有时我会说“我在网络上工作” 或者 “我是做网站的”，任意一个答案都是真的，但是并没有真正的表达我到底是干什么的。显然给出一个简单明了的答案很容易。
在某个方面，我是一个十足的设计师，虽然最近在做一些没有花哨图案的设计。很多人错误的认为设计单纯的等于图形设计，但是我认为设计也可以是使创意变成现实的过程。当我这么做的时候，我可以称自己为网页设计师。
不可否认，如果“网页设计师”的头衔对我来说只是对工作内容的解释，这违背了我从网络泡沫得来的经验。那经验提醒我许许多多的外行人投身到网络，只是因为膨胀的网络需要更多的人而已。这同时让我想到业余的爱好者们只会使用破解版本的Dreamweaver 或者 GoLive提供的WYSIWYG模式来制作一个网站。所以我发现很有必要称自己为网页设计师。
作为另一个选择，有时我称自己为“网页开发者”。但是问题在于很多人都认为网页开发者更多的做后台程序，而我却很少做此类的工作。但是这听起来比网页设计师更专业。
我们还有什么其他的选择？嗯，还有这么些头衔像UI程序员，前端开发者，UE设计师等等，太多了，然而可以正确表达出我在做什么的却很少，这样对于那些并不是从事网络相关行业的人，就很难理解了。
这真的能成为问题吗？大多数情况下，不是。但是有点棘手的是理发师或者你的邻居并不能通过这些来明白你到底怎么维持生计。虽然“我在网络上工作” 或者 “我是做网站的”看起来很好的回答了问题，但这并没有告诉他们，你做图形设计，程序，或者其他的。
所以我想问那些，并没有真正意义上的做图形设计，但是主要使用HTML, CSS, JavaScript, and accessibility来工作的读者，两个问题：
- 你 认为 自己是一个设计师还是一个开发者?
- 你 称呼 自己是一个设计师还是一个开发者?
如果你得到了一个明确的答案，那就向答案的目标进发吧。
首字下沉的效果很常见，特别是以前做WORD文档的时候，效果还不错的。网上目前流行的一种方法是用CSS的:first-letter,实现起来也不麻烦。
.dropcap:first-letter {font-size : 300%;font-weight : bold;float : left;margin-right: 3px;line-height:300%;}
为此，还有个首字下沉的wordpress插件。为了练手，想用jQuery实现看看，最后代码如下：
function dropcap() {
$('#content .post .tease').each(function(index) {
var paragraph = $('p',this)[0];
var node = paragraph;
while (node.childNodes.length) {
node = node.firstChild;
}
if (node.nodeValue) {
var text = node.nodeValue;
var first_letter = text.substr(0,1);
if ( /[a-zA-Z]|[\u4e00-\u9fa5]/.test(first_letter) ) {
node.nodeValue = text.slice(1);
$("").addClass("dropcap").text(first_letter).prependTo( paragraph );
first_letter = '';
}
}
});
}
过去的一段时间里一直很在意YUI（Yahoo UI Library），为了不辜负这段时间的窥视，终于决定要投入实际的应用。
首当其冲的是CSS Fonts，提供跨浏览器（cross-browser）的文字效果控制：
- 对于 A-grade browser 的完全支持。（关于A-grade browser的概念，看这里）
- 对于多浏览器，提供统一的“文字大小”和“文字间距”显示效果。
- 合理的字体设定，支持跨操作系统（cross-OS）的字体选择。
- 对”用户控制字体大小"的良好支持。（在浏览器中用ctrl+滚轮）
- 支持"Quirks Mode" 和 "Standards Mode"（W3C上对两种模式的对比）
如果你明白以上这些生涩的介绍，那么可以立马尝试一下了。如果是看的一头雾水(万分抱歉...)，推荐直接看原文介绍。
最后有人会说：“我引入了CSS Fonts以后，不能通过CSS校验了...”，关于这个我想说的是：“到底是机器人(Robot)重要，还是人(User)重要，各位自己斟酌了”。
在"Styling lists and creating nav bars"章节发现一个对我来说很有用的ie bug fix:li {display:inline;}作者的注释是"Removes large gaps in IE/WIN".马上试验了一下，真的解决了一个长久困扰我的问题。
以前在做一些纵向的导航菜单的时候，经常会用到一个锚（a）的hover效果，范例可以看这里
li a {display:block;background:#000;color:#FFD800;}
li a:hover,li.here a {background:#570B06;}
这里我们把锚（a）块级化以后，在IE7.0之前的版本中，锚（a）后面会有一个空白textnode，另起一行的问题，这样便把各个li的间距加大了。我以前的fix方式，就是把html结构里li前后的空格都消灭掉，做法比较烦人...
现在好了，只要li {display:inline;}就可以了，多看书还是有益的 :)
