2016-06-18 Tips, CSS Comments 浅谈伪元素的常见问题 在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。 另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成, ... Read more ...
2016-06-17 Ghost Comments Ghost更新为0.8.0 抽空更新了一下Ghost的版本,现在最新版本是0.8.0,测试版则是0.9。看了一下更新列表,感觉依旧只是例行升级。我已经有好几个版本没有更新,因为在阿里云下载一些依赖包是非常吃力的一件事,但这次更新还是能目测发现到一些新内容。比如后台多了Apps的设置,集成了Slack。比如修复了之前版本导航无法排序的bug等等。不过这几次的更新对于单人博主来说都是些无关痛痒的功能,大多是对多个作者协同工作的优化,即Ghost虽为专注博客的系统,却也绝非是小巧到专注于个人博客。 更新有些警告和提示,比如邮件功能。 ... Read more ...
2016-06-04 SwordAir, Design, Logo Comments 2016新的站点Logo 又到了换图标的季节:) 自网站建立到现在,我也已经更换过3次图标,这次距离上次2014年已经过去了2年时间,现在算是赶紧去跟上当前的设计趋势——在这一点自己也不能免俗,这一次的新Logo完全是浓浓的win10风格,同时这个logo也是我换到现在最为满意的一个了,当然未来怎么样还很难说,毕竟喜新厌旧人之常情。 这次不再追求表现Sword Air,而单单只表现Sword,“剑”的概念,这使得Logo的意义更为明确。综合了各种对logo的希望,我绘制了草稿并耗费了整整一天才将其完善。而且这次不是我自己在那里闭门造车,设计的同事Allen提了不少好建议, ... Read more ...
2016-05-14 HTML5 Comments HTML5 input 搜索框 众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type="search"也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支持,即便全部支持,差异也还是免不了的。这里仅以Chrome,Firefox以及Edge为参考。 ... Read more ...
2016-04-23 Wood Comments 以木为样 前段时间大学同学和我换链接,看了我的博客说我其实是个木匠,然而准确地说自己依旧是一个前端开发者,虽然有一颗木匠的心:) 在离开阿里后的一段时间里,对木头的喜爱达到狂热,当时萌生出想要搜集所有木头标本的念头,并简单的付诸实践。当然最后的结果也很容易预料,并不成功。要是为了几块稀有木材花了太多钱的话,自己都觉得肉疼。最后折中方案,买了一些较少见的木材样本。诸如粉红象牙木之类的动辄上千的木材,买不到小样,只能在心里想念一下。 将木材消磨成3cm x 3cm ... Read more ...
2016-04-17 IE8 Comments 一个IE8的新起点 上周,淘宝宣布不再支持IE6以及IE7,作古的浏览器访问淘宝会看到升级浏览器的提示,当真算得上是一个时代的终结,而这个时间点距离我自己写的告别垂死的IE6与IE7足近5年之多。作为从IE6时代一路走来的前端工作者,在这样的变迁交汇点难免徒生各种感慨,还有——落寞。 怀着复杂的心理我们需要告别日以继夜为之奋斗的抑或是狂喜抑或是抓狂的岁月,努力甩开在某种程度上已经充当技术壁垒的浏览器兼容,现在开始,将是一个IE8开始的新起点。 甩开IE6和IE7,web开发者特别是前端得到了哪些解放?为此我简单罗列了一些最为常见的情况。 inline-block,我们终于可以摆脱*display:inline; ... Read more ...
2016-03-19 WOFF, Font Comments WOFF2与icon字体化 5年写过一篇WOFF和Google Font API,当时WOFF还只是刚出现,如今,各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件,就会发现现在又多了一个WOFF2的格式。没错,就如其字面意思,就是WOFF2.0。 先简单回顾一下主要的web字体文件的格式: .eot,Embedded Open Type,主要用于早期版本的IE,是其专有格式,带有版权保护和压缩。 ... Read more ...
2016-03-19 Design Comments 404页面设计 前段时间组里在搞404页面的设计,我纯属打酱油也重在参与了一回,顺便可以拾起一些日渐荒废的技能。温故而知新,虽然很久没有用AI,但好在并没有显著的退步,倒是绘制了百来个图形在速度方面反而有所加快。 404是一个用户不太会到达的地方,设计实际上可有可无。比如google万年破机器人,不仅用作404还用作其他状态。比如github是火星,你来错地方啦~配上的是搜索功能。做之前也确实参考了很多,这类错误页面情绪上大都积极向上充满喜感,以缓解出错的那种困惑感。 想了十几个方案,最终用到是“404 ... Read more ...