月归档:九月 2012

HTML5 重构的真相与糟糕的「语义化」新标签

推荐看看这篇讲 HTML5 重构的文章,说到了目前 HTML5 新标签遇到的诸多问题。 http://www.netmagazine.com/features/truth-about-structuring-html5-page “We shouldn’t use them.” 一句道破 HTML5 新标签面临的许多窘境。当你真正采用它们重构一个大型项目时,往往会发现这些所谓的“语义化”新标签是多么矛盾和啰嗦。尤其是对有代码洁癖、选择强迫症的人来说,会带来了一堆棘手的问题。 Update 2013.02.25:这不~本文发布后短短几个月,名为 <main>、<template> 的新标签又蹦出来了。

发表在 前端开发 | 标签为 | 6 条评论

【视频】《Perfect Workflow in Sublime Text 2》视频教程全集打包

Sublime Text 2 是今年非常火的一款编辑器,这款轻便的编辑器提供了诸多功能实用的功能,「tutsplus」也做了一套教程,可以深入了解这款编辑器的各种功能。在线看的话有点慢,所以我把它打包到网盘了,如有失效请告知。 目录见这里:https://tutsplus.com/course/improve-workflow-in-sublime-text-2/ 百度网盘打包下载: http://pan.baidu.com/share/link?shareid=61833&uk=1479479056

发表在 软件技巧 | 标签为 , , | 14 条评论

从右键菜单快速在 Sublime Text 2 中打开目录

在《Perfect Workflow in Sublime Text》系列视频中,我看到了第三讲通过 Mac OSX 的「系统服务」快速在 Sublime Text 2 中打开目录的方法。跟着试了一遍,总是出错,其实还有更简单的方法,使用「Automator」自带的「打开 Finder 项目」模板即可。 首先打开「Automator」,在弹出的文稿类型中选「服务」; 在左侧的模板栏搜索「Finder」,找到「打开 Finder 项目」,拖到右侧空白区域; 设置打开方式为「Sublime Text 2」,上面设定为“服务”收到选定的「文件或文件夹」位于「Finder」; 保存项目,在目录或文件上右键就可看到「在 Sublime Text 2 打开」的快捷方式了。 如果「系统服务」项目太多出现了二级菜单,可以到「系统偏好设置…」-「键盘」-「服务」中去掉不需要的选项。 p.s. 活用「Automator」可以轻松实现更多功能。

发表在 macOS | 标签为 , , , | 5 条评论

一种通过伪元素实现的更好的图片替换技术

昨天收到一条垃圾评论,内容是「多更新,要不然还以为您老人家去保卫钓鱼岛了呢」。所以今天说什么也得写一篇证明我还没那么热血。 在过去很长一段时间里,我们都习惯用负值 text-indent 的方法来进行图片替换。在最新的 HTML5 Boilerplate 中,我看到了一种新的图片替换技术。它采用 CSS 伪元素来实现,相对于以前的图片替换技术,它很好的解决一些手机浏览器的 bug,且没有属性覆盖的问题,并且不需要额外的标签。 .ir { overflow: hidden; *text-indent: -999em; } .ir:before { content: ""; display: block; width: 0; height: 100%; } 在下面的范例中可以看到,伪元素设定为块元素,高度同容器一致,所以把文字顶到第二排去了,再结合 overflow:hidden; 将溢出的部分隐藏掉。面对不支持 :before 伪元素的 IE6/7,采用传统的负值 text-indent 方法。需要注意的是,采用这个图片替换技术后不能再对该元素设置 padding-bottom,否则文字会显示出来一部分。 这个图片替换的技术可以替换所有元素的背景(IE8+),不会出现需要 !important 的情况,对 SEO 非常友好,且向下兼容至 IE6。没有什么学习成本,现在就可以在自己的项目中换上这个技术了。

发表在 前端开发 | 标签为 | 6 条评论