『听风且吟』技术版

在SharePoint 2010的User Profile页面中存在一些提示，本文的内容就是如何去掉这些提示而又不影响其他功能，这是一件简单而又意义不大的事情，但我却不小心想复杂了，前后花了几个小时，用jQuery写了几行代码，中间还发现bug修改了一遍，终于发现走了弯路，用区区3行CSS搞定。

今天是CSS裸奔日，在这一天，全世界许多网站会同时褪下华丽的CSS衣裳，露出各自本来的原始的面目。 在我看来，CSS裸奔日是对Web标准的真正理解的一种体现。

拆散它们！ 不久之前，专业的网页设计师还在兴高采烈的将HTML，CSS和JavaScript代码掺杂到一个单独的文件中，命名为index.html，并称其为网页。今天你仍然可以这么做，不过要有心里准备去接受同行们比较没有礼貌的洗礼。 有一天，网页设计师们突然注意到这些混在一起的代码分别做了以下三件事请： 描述页面的内容。 指定内容的表现形式。 控制内容的行为。 接着他们实现了这三种类型代码的分离，这种做法让他们的工作更加轻松，并且让他们的网页在各种条件下更好的工作，即使用户的浏览器禁用了JavaScript。 这项原则被极客们叫做：分散关注。 图 1.1. 分散关注 虽然分散关注已经被实现，但我们却没有这么做。 比如我正在很开心的编辑HTML代码来描述网页内容，突然间我发现，如果给文本稍微加点灰色的阴影一定很漂亮。虽然这会让我分心，我还是决定这么做。 那么哪一种方法更加容易呢？在一个独立的CSS文件中修改页面的样式表？还是把这些样式属性写到我正在编辑HTML代码中？ 就像在工作会议中要注意举止一样，保持你所编写的不同类型的代码彼此分离。一旦你明白了这些好处，你就能有毅力去坚持这种写法。 三层 无论对于何种编程，尽可能保持不同类型的代码彼此分离都是个不错的想法。它使人们在今后的项目中更轻松的重用部分代码，减少了代码冗余，也更容易在几个月甚至几年之后发现和解决问题。 在Web中，还有一个理由让你保持代码分离：适应人们访问网络的许多不同方式。 在你的访客中，大多数会使用支持CSS和JavaScript的完善的浏览器，但也有许多人会因为企业的限制，迫使他们使用旧版本的浏览器或者禁用JavaScript。 弱视用户经常使用屏幕阅读器或屏幕放大镜来浏览网页，对于这些用户来说，你的视觉设计反而帮了倒忙。 一些用户或许并不需要访问你的网站，他们喜欢通过你提供的RSS来阅读内容。当创建这些feed的时候，你要把HTML内容发送给这些用户，而不是JavaScript或CSS代码。 除去内容因素，吸引更多访客的关键是网站要分为三层，即我之前提到的三种不同类型的代码，如图1.2所示。 图1.2. Web中的三层 当创建站点时，我们通过这些层来从下到上的工作： 首先我们以HTML的格式创建内容。这是基本的层，无论访客使用什么样的浏览器都可以查看。 接着，通过使用CSS来添加一个表现层，我们可以着力让站点看起来更漂亮。 最后，我们可以使用JavaScript来添加一个交互和动态行为的层，让站点使用起来更简单。 如果我们保持HTML，CSS和JavaScript代码彼此分离，我们会发现当浏览器无法处理表现层或者行为层时仍然可以轻松的确保内容层的可读性。 下面我们来逐个分析这三层，探寻分离代码的最佳方法。 内容 HTML 在网页中，每一部分需要阅读并理解的内容都是些HTML代码。这并不难。网页设计师遇到了麻烦是因为他们忘记了K.I.S.S.（Keep It Simple，Stupid，保持简单和愚笨）原则，在HTML代码中塞满了非内容的信息，或者把一些页面内容转移到了CSS或JavaScript代码中。 一个普遍存在的将非内容信息塞满页面的例子是表现性HTML-在HTML代码中描述它的显示方式。这其中还包括过去流行的HTML标签，如<b>, <i>, <u>, <tt>和<font>： <p>无论如何， <a href=”666.html”><font color=”red”>不要点击这里</font></a>！</p> 或者在style属性中应用CSS样式： <p>无论如何，<a href=”666.html” style=”color: red;”> 不要点击这里</a>！</p> 还可以通过容易理解的类名来应用CSS样式： <p>无论如何，<a href=”666.html”>不要点击这里</a>！</p> ※ 容易理解的类名？ 上一个例子看起来似乎不错，但它还是有点问题。如果后来你想把链接的颜色改为黄色，你要么一并修改类名和对应的CSS样式，要么就别扭的仍然叫做red但是实际上它却会让链接变成黄色。 [...]