完美主义手残

本文属于 Having fun with CSS 系列：

我不知道有多少人在看这个网站，或者任何一个网站的时候，有打开开发者工具翻 CSS 的习惯。鉴于本站关于网页制作的文章还是挺多的，百分比可能高于平均。反正我自己是很喜欢这么做的。看别人的网站遇到美丽或有趣味的效果时，我必须大翻特翻，满足一下自己的好奇心，偶尔还抄走几句。至于为什么只看 CSS……因为我不会写 JavaScript，看到复杂或者特别抽象的脚本时会眼前一黑（喂），而且家用浏览器所附带的开发者工具能够非常抽丝剥茧地检视 CSS，对 JavaScript 的支持却远没有这么好。噢对了，以及以及，JAVASCRIPT 是甲骨文美国的注册商标，所以直呼祂的名字可能会带来麻烦！

玩笑开舒服了。事情的起因是前两天写那个复制代码按钮的时候，看代码框 CSS 不顺眼，修改了一下，更不满意了，回滚，完之后才想起来很久以前的自己也做过一模一样的修改并且同样回滚过了。这实在是……令人产生挫败的感觉。也许这篇文章应该改标题为《完美主义认知症》。想起还在 Blogger 的时候总结过当时写的一系列自定义 CSS，然而现在看来，不仅需要总结曾经做过的一些设计选择，也要总结（并提醒以后的自己）曾经做过的一些设计「不选择」。

举个例子。假设说有这么一段代码：

import numpy as np

def test_function(a, b):
    blah =  a + b + 233
    return blah

test_function(2, 3)

我想把样式改成这样：

import numpy as np

def test_function(a, b):
    blah =  a + b + 233
    return blah

test_function(2, 3)

来匹配目前的引用样式：（文本来源：組見本用創作文）

洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ごくまれに〈ウヰスキー〉という書き方を見かけるが、これとて差別化を意図したものではなく単にカナづかいの時代性にすぎない。
~ 問わずがたりの洋酒外史（基本バージョン）佐藤　章

但是代码块和引用块的区别在于，引用块通常拥有非常清晰的左右边界，所以像这样取消左右边框不会影响展示效果，反而显得美观。然而代码的右边界一般是不整齐的，有时候还需要滚动，左边也通常有数量不等的空格；因此如果没有一个明确的边框，就让人看不清楚哪行有缩进，或者整段代码有没有缩进，提高理解成本。当然，如果真的需要这段代码的话，选中或者复制一下就能看出来了；但是本来可以扫读的一篇文章，改动后却需要多一个步骤才能获取这些（并非可有可无的）信息，我觉得这样的网页设计是不够读者友好的。

把代码复制按钮改成了一直显示（而不是鼠标划过才显示），也正是基于类似的理由。任何人，不需要多余的操作，就能一眼发现这个代码块是可以交互的。我喜欢这样的设计。

在制作网页的时候，常常会面临这样的选择：是选择美观还是选择便利？作为一个以网页制作为爱好很多年的人，我理解希望自己的设计像素完美的想法，事实上我在改这个网站的 CSS 的时候也会时不时掏出尺子在屏幕上比划¹；但作为一个网络冲浪更多年的人，我同样切身体会过在一个好看但不好用的网站上寻找信息是一件多么难受的事情。当然，如果网站的展现形式本身才是重点，信息是次要的，就没有这个问题了。然而对于文字型博客而言，就算不考虑其余读者，只考虑一两年后的我自己，牺牲一点美观，来换取一点便利，似乎也是足够划算的。

很多个一点便利，汇聚起来，就成了一个比较好用的网站。希望吧。

向各位有同样需要的朋友推荐一款浏览器插件：jpedroribeiro/Baseliner。 ↩︎