列元素所用属性之谜

在table表格元素中，有一个col元素（它还有一个孪生胞兄colgroup元素），在 W3C 标准中，这个元素被称为列元素，用于定义表格中的某些列中的表现形式，在现行及常见的教程中，认为col元素可以使用常见的全局属性，以及align、valign、width等属性（乃至HTML 4.1 及 5.0 规范文档中，也同意该元素可以使用全局属性），很多DEMO也用它来举例说明如何让表格中的某列居中对齐、右对齐或改变某列的文字颜色，而事实上在大家常年的实践中，已经证明了一个很恐怖的事情…align也好valign也罢，甚至连全局属性中的color属性都完全不起作用，这到底是发生了什么事。

照例先上结论：

  • 在 CSS 2 中，列元素就仅能使用border、background、width及visibility这四个属性，其它属性（如对齐及字色都无法生效）。
  • IE6、IE7及IE8(Q)遵循常见教程，可以使用各种对齐和文字相关设置。
  • IE9开始及现在所有常用非IE浏览器均支持:nth-child(n)选择器，可以用该选择器实现列选择，并支持所有全局 CSS 属性。
  • IE8(S)无解（因为它不支持上述选择器），除第一条所描述的 4 个 CSS 属性之外，无法统一改变列的对齐及字色。
  • 而col及colgroup元素，除了对IE6、7、8进行兼容之外，已经没用了。

阅读全文

给设计师们的代码指南（三）—— 定位与布局

之前说了什么是 CSS ，也介绍了 CSS 的盒模型，下面理所当然地要进入 CSS 的核心内容，定位与布局。其实说完这个部分，CSS 就没什么东西可说了，剩下的都是些细枝末节或者很直观的东西。对，把最抽象的这部分理解了， CSS 就没有任何难度可言了。

如果你的制图习惯比较良好（良好的意思是有比较完整地执行这里的规则），有好好对图层进行分组，那么你就已经对你的设计稿完成了最初步的切版工作。按照你切的版，把元素一个个码好，你的页面就搞定了。然而实际上的页面并不是像PSD设计稿那么安分，它有可能这个部分要一直固定在屏幕顶端，那个部分的内容时多时少，因此才要学会 CSS 的“布局语言”。

阅读全文

给设计师们的代码指南（番外）—— 我的代码问题在哪

这是一篇番外，主要用于平复一下回家以后面对堆成山的工作的我那从天堂掉到地狱般伤痛的心情…

很多人在写代码的时候都会遇到这个问题，就是“为什么我的 CSS 没效果？”、“为什么我的 CSS 出来跟我写的不一样？”，而在看别人的页面的时候，我们有时也会想要知道，“哇噢，这么炫酷，他是怎么做的”或者“这里究竟是padding还是margin？”等等问题，其实这些问题都可以自己找到答案，方法则是使用浏览器自带的开发者工具。

现在的主流浏览器都配有开发者工具，只要按下F12就可以打开，所有的前端工程师都会使用这个工具来调试自己的页面，其实里面的功能是非常非常强大的。下面我将以Chrome为代表介绍，其它浏览的工具大同小异，看一下就会啦~~

PS:本文属于番外，可能有前文中尚未涉及的内容…不必惊慌反正你总有一天会学到的~

阅读全文

台湾归来

之前休了整整一个礼拜的假跑去台湾，虽然本来说好要在埔里与母上大人相见，但因为我到埔里的时候已经是下午，而下午正是她玩滑翔伞的黄金时段…所以她淡淡地说了一句，你自己玩去吧，便这样弃我于不顾。

这次游玩因为时间不足的缘故，只趴了台北和台中一线，台中线使用的是台湾好行溪头-日月潭套票，省却了很多路途上的烦恼~订房综合了艺龙、booking、agoda三家网站的信息（因为订房时间太晚了…），按照行程勉强定上了价格还算划算的屋子（不得不说单人出行在房费上真的相当浪费…除非一路青旅）

台北整体旅游业相当发达，一般一个城市里有两三家旅游信息中心就算非常多的了，可台北加新北的旅游信息台加起来估计得逼近二十个了（虽然第一次在西门捷运站里的那个信息台找了很久，开始以为是像其他城市一样在地面上，最后发现原来在地下捷运站里）…玩起来一点障碍都没有，跑到一个地方挨个抽一遍文宣，地图加景点特色还有介绍就都全了。这可能是我第一次出去玩没有买地图……

在台湾的这段时间里，可以明显感觉到台湾一些很人性化的地方。比如很多店家门口都有发票回收箱，不要的发票可以直接塞箱子里，旅游景点也有文宣回收箱。捷运外面就有电子告示牌提示每条线还有多久抵达本站，站台车门前也都贴了很长的排队线，人再多也不容易排乱。自行车可以上捷运，而且有专门的排队线和车厢。公交车的站牌都是圆筒状，可以直接转筒看~等等等等，加上国语通用这点简直不能更幸福，是最近几年游玩最舒心的一次（完全不用担心迷失街头居无定所被人偷抢之类的问题QwQ）。

当然其实台湾人也一样，看到空座位会想去抢，看到红灯而四周无车的时候也想去闯，但是似乎碍于周遭的眼光，博爱座经常是空着的，就算坐着人只要看到有老人上车也会立刻站起来。总的来说，排队、排号这样的行为在台湾算是非常稀松平常，但如果有可以稍稍钻一点点小空子的地方，很多人也会去钻一下。回来以后最大的感想是，北京的地铁完全输在糟糕的规划设计上，本来人流量就大还按照很小的流量设计，车厢承载能力严重不足，站台容纳能力非常之差，简直就是智障级别的规划，就算用再高科技的信号管理系统缩短发车间隔也没办法解决（更何况这个信号系统还老出问题）。

关于游玩的具体细节我做了一个 Google Map 分享…照片和景点感想会慢慢添（因为照片一部分在手机里一部分在相机里乱七八糟的我马上还要换电脑…）。这里记录的店家和景点都是我去过而且觉得有意思值得记载下来的，特别要说的是这次刚好赶上台中的台湾美术双年展，还有台北的国际艺术博览会，前者免费后者凭航空公司的 boarding card 就可以免费参观，加上在台北故宫博物院…我烧了整整三天在各种展览展会里诶 >v<||||（所以其实我有站在新光三越楼下遥拍一下台北101大楼表示我是个称职的游客…）

最后我想谈谈台湾的人，在台湾能够非常明显地感受到台湾人的亲切与热情，在出租、缆车上，在店前排队、山道凉亭各种地方，他们都会很热情地来搭讪，知道我是一个人来玩的也都会发出感慨（大概有人是在感慨为什么是一个女生出来都没有男朋友陪…），不管你有什么问题都会超热情地解答，简直是不能再友好（虽然我的期待值只是不要因为我是陆客而摆一张臭脸），虽然我是个不太喜欢跟陌生人很热络地聊天的人，但是台湾人给我的感觉还是挺舒服的~

我会记得跟我聊人治与法治的男孩，记得对我说一定会好起来的大叔，记得带着刚刚半岁的小BB就跑出来玩的个体商夫妇，记得把我叫住闲聊还给我包子和啤酒的前台~台湾真的是个非常可爱又有趣的地方，当然那些问题与不足，只能说两岸都有，只能各自面对。

最后的最后当然是要感谢一下在台中热情陪我逛夜市的大美女 tigerfat，还有强烈感谢给我非常多路线、游玩、逛吃建议，并且身体力行带我逛艋舺龙山寺并兼任导游的超级美女人妻 Akane ！！人又美又超级会吃会玩，而且一起探讨了很多设计上的事~基本上没有她的帮助我这次台湾之行大概要少一半的乐趣 ><

台妹真的是美啦~林志玲算什么啦噗

给设计师们的代码指南（二）—— 代码里的图层

献给那些被代码折磨的设计师们的第二弹~设计师一直觉得代码很难搞，一点都不直观，但其实网页代码与 PS 文件是有相似之处的，这篇文章就会从这份相似性入手，来谈谈 HTML 中一个最基础的概念——内联元素与块级元素，而与之对应的 CSS 当中的概念便是行框与盒模型。

BTW：在网上看到有人说到 HTML 4 + CSS 2.1 与 HTML 5.0 + CSS3 的问题，我会根据需求和实际情况具体说明，而文章整体上是趋向于 HTML 5.0 + CSS3 的，而HTML 5.1 在语义化中所作的努力，我也会尽量写进来（但是因为个人了解实在有限，所以如果出现错误还请不吝赐教）。

简单来说，如果你的老板/客户要求你兼容IE6、7、8，那就几乎无法使用 HTML 5，普通的 HTML 也会出现各种奇怪的问题，作为一个设计师的你也可以直接义正言辞地说，臣妾做不到啊~~（IE6 兼容在世界各地的前端工程师眼里都是眼中钉肉中刺上辈子的仇敌这辈子的冤家）

阅读全文

给设计师们的代码指南（一）——HTML与CSS简介

之前一直说要开坑，但是手忙脚乱的脑内拟了一段暴长的Opening全被我扣押在脑海里了。精减下来只有一句话谨以此文献给那些被代码折磨的设计师们，和那些无法与前端交流的设计师们。本文将从0出发，并把内容和难度限定于设计师需要并可以理解的范畴内，我并不打算写一本前端教材（因为不够格），所以请各位尽可能轻松阅读。

阅读全文

左“隣”右“鄰”

前阵子朋友在微博发问“隣”跟“鄰”究竟有什么不一样，要怎么用，先大概查了一下汉字词典，结论比较一致：

  • “鄰”和“邻”分别是台湾规定的《常用國字標準字體表》和大陆规定的《现代汉语常用字表》所收录的标准字，也就是说分别是两岸的标准用字。
  • “隣”字在《康熙字典》中，标注为“鄰”的俗字，在现代汉语里也被定义为异体字。
  • “隣”字则是被收录在日本《改定常用汉字表》中（从最早的的《当用汉字表》到后来的《常用汉字表》一直都有收录），是日本规定的标准汉字。

现在问题来了（

为什么会出现这样莫名其妙的字形差异…？

于是我稍稍考据了一下…

阅读全文

可视化CSS3动画生成神器 - Stylie

自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，各路人马对它的热情都极为高涨，和JS动画相比，它写起来更简单（在没有jQuery库的情况下），同时在大多数情况下性能上也有很强的优势。transition和transform相对比较简单，除了矩阵变换（一般人也用不到）之外，别的都易学好懂，而使用了@keyframes的动画，简直就是设计师和工程师的大杀器，关于这东西有多杀，可以参考之前腾讯的大神们搞的一个CSS3动画帧数科学计算法这样的玩意儿，内含计算器一枚，内文之纠结复杂，我相信一般兼职半个前端的大设计或者初入行的小前端都是难以看懂的…

而且其实主要问题是，那玩意儿是为步进动画准备的，做一张精灵图，然后每隔一定时间跳一张…其实这样算不上一个真正的css动画，何况animation属性中的steps()功能可以比较好地解决这个问题。而一直以来，都没有一个好的css动画生成工具（别跟我提Muse，它需要阅读《工具的自我修养》…）所以今天我想推荐的就是这个Stylie，一个可视化自动生成CSS3动画的工具。

阅读全文

再次迁移

每次搬迁都是不甘心和一万个不情愿，也许也是个轮回，从第一次想要做个属于自己的网站开始。那都是15年前的事儿了，和我现在的年龄比起来，近乎是个不正常的数字。那个时候自己琢磨着学用 FrontPage （因为 Dreamweaver 太大，而且从始至终地难搞），觉得有个 frame 简直就是神迹，那时候觉得页面里的某个元素出现滚动条都很奇特（磕磕碰碰地学着用 iframe ），而那些闪着光到处乱飞的文字也如同赌场前花枝招展的美女，吸引我踏进那个无边的圣堂。

当然那时自己做的网站都是纯静态的，因为用了 frame 所以似乎可以说有那么一丁丁点模块化的思路，一个文件夹里列满了html文件，那就是成就感。后来的事就不那么美好，找服务器，找域名，那时的网络服务是井喷式发展，跟现在打车软件或者外卖服务抢客户的方式没有什么本质不同，到处都有免费空间，到处都有免费域名，而我，竟然在这步上被死死卡住，始终没能成功把那塞满了心血的文件夹放到新世界里。这就成了我心里的墙，也成了夙愿。

虽然我从小就对自己的能力相当自负，但终究不是一个特别能冲肯干的人，已经记不清当时为了找一个能用的免费的（你不能指望平时没有多少零花钱过年压岁钱都很少上三位数的小孩会愿意掏一年几十的费用…）空间和域名花了多久，只是记得最后放弃的那个时候，伴随而来的深深的挫败感，很好，人生中第一个巨大的失败。

后来退而求其次，不建个人站点了，写个博客玩玩吧，于是辗转多个服务商，墙内外主流博客服务商几乎都有我的影子，当然这10来年的日记在兜兜转转中也不知道掉了多少。再后来长大了许多，开始对博客的样子有了要求，不再满足于服务商默认的那几款模板，再后来网络越来越复杂，再后来，哦就没有了。书写体验不好，样式不好看没有美感，加上体内懒惰小人的茁壮成长，原因有很多，按小学老师的话说应该是，别找客观原因——其实我在那之后的7、8年里都不明白什么叫“客观”。

这次重新搭建，算是圆梦之旅了…老的文章内容不会再迁，总之暂时就先这样。使用的是 Github Pages + Hexo 的组合，评论插件使用的是多说，唯一烧了包的地方是域名（揉钱包），现在也会觉得，git 也没什么难，md 更是简单，当然这之中要感谢无数的教程编写者…我作为一个兼职译者却很不喜欢看各种文档，在 github 官网还有 hexo 官网查看各种信息的时候有一种简直要了我老命的感觉…………还好结局是不错的，如果这个站点再死，我想…

算了，操那心终究没用。
Welcome to my new world!
私の新しい世界へようこそ！