月归档:三月 2011

为WordPress文章使用不同的固定链接后缀

一个简单的方法让你使用另类的地址为不同分类的文章使用不同的固定链接后缀。如下: http://sunxingfan.com/708.avi(不是视频)http://sunxingfan.com/1.txt(不是文本)http://sunxingfan.com/518.doc(不是文档)http://sunxingfan.com/674.tweet(...) 设定方法 在Wordpress后台依次进入“设置”——“固定链接”,将“常规设置”选择“自定义结构”,设定为/%post_id%.%category%后保存。 进入“分类目录”,修改分类别名。例如:图片分类设定为jpg,视频分类设定为rmvb,资源分类设定为torrent,亦可使用css、html、php、cfm等作为技术分类。 给文章设定好分类,避免一篇文章多个分类。 预览效果,检查有无错误。比.html那种伪静态更加拉风。 一些问题 如果修改后日志页打不开,显示404。说明你的服务器伪静态配置有问题,需要修改.htaccess或者nginx.conf。 此伪静态路径理论上十分不利于SEO,请自行斟酌,建议对搜索引擎收录不敏感的博客使用以起到拉风&Drawn Bee的效果。我是在日记博客里使用的。 使用.avi、.rar、.doc等后缀复制地址时会导致迅雷的跳出,使用.php、.com、.net则无此问题。

发表在 WordPress | 标签为 | 20 条评论

说说Firefox4和IE9

近日Mozilla与Microsoft分别放出了自己的最新版浏览器Firefox 4与IE9,Firefox4以两倍于IE9的下载量向人们证明自己依旧有大量拥趸。尽管Windows 8推出时,IE9肯定会捆绑奉送,但IE的占有量日益下降确实不争的事实。在Safari兴致不高,Opera仍在无私为别人创新的情况下,浏览器似乎已经进入的三国争霸的状态。当然,纵览大势和笑谈趋势都不是我喜欢做的事,我就用最肤浅的目光简单说说Firefox4与IE9。 界面体验 Firefox 4与IE 9外观变化都不大,基本上继承了传统的设计样式。在如今以UCD、UED、UJ8D为关键词的环境下,用户体验似乎比过去单纯的美学体验更加重要。Firefox的新版界面依旧朴素到极致,好在有丰富的外观主题库和插件来定制。IE由于更加封闭,所以只要把默认样子做得好看一点,毛玻璃效果搞得很不错。即便不喜欢这样也没有关系。IE外壳多嘛~你升级到IE9改用360、搜狗浏览器就OK了。 Firefox 4的地址栏的右键菜单终于加入了“粘贴并转到”选项,方便使用。从可视范围来看,省略状态栏后的Firefox布局更像Chrome,但标题栏的存在使其浏览面积依旧稍小于后者。在这一点上Safari做得很好,保留标题栏的前提下仅比Chrome差一点点(显示书签栏后两者等高),如图。 在这一点上,IE9就做得比较疯狂了。直接把标签栏同地址栏整合了,还把刷新、停止按钮放到地址框里去了。从美观上说确实很酷,但是易用性简直差到家了。 首先,以我对“用户体验”、“易用性”的理解,越常用的按钮越要便于寻找和操作,在不易造成误点击的前提下理应做得大些。刷新和停止按钮比导航按钮使用的几率要高,IE9却把它们和Favicon放到一起,实在无法理解。如果你把网站的Favicon做成收藏按钮的五星那样,用户兴许会以为可以点击哩。此外搜索按钮同样被整合到地址框里也让我不能理解,我个人还是更喜欢Firefox那种单独摆放的布局。 其次,收藏按钮放到右侧跟主页、设置按钮在一起很容易勿操作造成打开主页。也是不好的体验。 将标签栏与地址栏合并的设计十分大胆,但我想用户需要非常宽屏的显示器吧。本人有密集恐惧症呢,一堆标签挤在那该有多烦人。 所以尽管IE9的外观相较Firefox4有更大“突破”,可我却觉得我需要一个易用性更好的壳。 渲染改进 在网页渲染方面的改进和性能的提升,很多地方有比较我也不再多言。在对新技术的支持上显然二者都让我感到诚意和满意。 我做得CSS3版忍者神龟,在IE9下竟然可以正常显示图像了,除了渐变,圆角、旋转、盒阴影都有不错的表现,真是泪流满面啊。要知道很多CSS3属性其他浏览器还要借助私有属性,而IE9支持的却是原生[1],终于走向了正确的道路。 p.s.其实IE for Mac 5.5就尝试过这一道路,可惜当时一心想垄断浏览器标准的微软为此将Mac版负责人调离了岗位。 此外,HTML5部分属性在IE9也得到支持,目前对HTML5支持最全面的依旧是Opera浏览器(最新Opera 11)。 Firefox4对标准的支持一直很好,这次更新后感觉到速度有了明显的提升,没有过去那么臃肿的感觉,更像Chrome了。我有些犹豫是换回Firefox还是继续用Chrome,FF的高定制性依旧是Chrome无法超越的。 总的来说,Firefox4令我最满意,而IE的进步则较明显,但是易用性依旧有许多的问题,好在可以借壳解决。本文写得有点乱,只要是我对Firefox4的改进还没有更深入的体会。留待以后修改吧。 [1]:这里并不是说IE9对CSS3属性的支持比其他浏览器好,而是因为CSS3标准尚未正式确立,而IE的产品更新周期较长,所以提前作为原生属性对CSS3进行了支持。而Chrome和Firefox均可等到标准正式确立后通过一次小更新将私有属性换为原生支持。CSS3和HTML5的标准预期将分别在明年和大后年正式确立。

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

macOS 常用软件推荐(2020.01.01 更新)

使用Mac系统两个多月了,虽然Macbook Pro的配置非常强悍,但我对软件的要求并不苛刻。我不追求界面的华丽,只希望它启动快速运行流畅且便于实用。 继续阅读

发表在 macOS | 标签为 | 50 条评论

CSS3版忍者神龟

前几天闲来无事,用CSS3做了一个忍者神龟。搞完无聊,又弄了简单的动画效果。各位看着玩吧,Chrome和Safari下是完整效果 http://lightcss.com/tutorials/turtles/。 就是这个样子了,用圆角和渐变等属性做出静态效果然后加上简单的动画,非常简单。只要有耐心可以绘制更复杂的图像。有时间我会搞一搞。

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

投票:我们是否需要为所有浏览器添加条件注释?

CSS-Tricks最近发起了一个投票:我们是否需要为所有浏览器(目前仅IE支持)添加条件注释,就像下面这样: <!--[if Fx 3.6]> <link rel="stylesheet" href="firefox-v3.6.css"> <![endif]--> 投票在原文的侧栏http://css-tricks.com/new-poll-conditional-tags-for-all-browsers/ 我认为浏览器对网页的表现应该向统一的方向发展,既不会让访客感到迷惑,又可以降低前端开发的成本,此举没必要。

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

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

写在前面 由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径。废话不多说,下面是一些方法区分浏览器的方法和我的看法。 主要途径 CSS Hack 直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为 #content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */ *background:yellow; /* IE7和IE6 */ +background:green; /* IE7 */ _background:blue; /* IE6 */ } 还有一些hack不太实用,就不一一列举了。 CSS Hack的缺点是CSS文件无法通过W3C验证,代码阅读时会很奇怪。 条件注释CSS文件 条件注释是写在html里的只会被IE识别的代码,一般在<head>区域通过不同的条件注释导入不同的CSS,不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”: <!--[if IE]> <link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /> <![endif]--> 由于IE8下CSS问题较少,一般只需要为IE6、7写一点修正代码。如果需要,可以在ie.css里用CSS Hack对IE6/7进行差异处理。 <!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]--> 条件注释CSS文件的缺点是会增加至少1次http请求,影响渲染速度,而且维护时不够方便。 条件注释<html> 条件注释<html>跟上面的方法原理一样,只不过这里是给<html>注释不同的class。 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> 这样在CSS中使用下面的代码即可区分版本 #content{background:red;} .ie9 #content{background:orange;} .ie8 #content{background:yellow;} .ie7 #content{background:green;} .ie6 #content{background:blue;} 你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求,而且不需要任何hack。 最佳方法 毫无疑问,最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起,ie的fix代码与正常规则临近,便于维护,而且没有hack可以让代码符合标准(使用zoom、私有CSS3属性依旧无法通过验证T_T)。 标准浏览器[1]:本文指Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。 文章中性感的火狐壁纸来自wallpapers-diq.com。

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

给网站添加X-UA-Compatible标签

X-UA-Compatible是神马? X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用。可以在微软官方文档获取更多介绍。 为什么要用X-UA-Compatible? 在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。 使用下面这段代码后,开发者无需考虑网页是否兼容IE8浏览器,只要确保网页在IE6、IE7下的表现就可以了。 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 时至今日,IE6已被微软判了死刑,我们在重构时应首先考虑更完善的IE8下的体验,然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰,那么将出现前端工程师需要面临4个IE版本的疯狂局面(且4个版本显示差异较明显)。 给网站添加X-UA-Compatible标签 我建议使用下面的X-UA-Compatible标签: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame[1]。 网页中添加方法 在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。 这样的方法简单快捷,但是弊端是代码将无法通过W3C验证。其实这并不是问题,毕竟标准只是标准,如果只有这一个“错误”完全不会有任何不良的影响。 当然你可能像Sivan一样有代码洁癖和一定程度的标准癖,那么我们还可以从服务器端进行这个设置,请继续往下看。 Apache服务器设置方法 嗯⋯⋯我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件,添加下面的内容保存即可。 <IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch MSIE ie Header set X-UA-Compatible "IE=Edge" env=ie BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule> </IfModule> Nginx服务器设置方法 现在很多朋友使用Nginx作为搭建环境,当然也是OK的。找到\nginx\conf\nginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可 add_header "X-UA-Compatible" "IE=Edge,chrome=1"; 不清楚具体位置的请参考paul irish的配置文件。 好啦,上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务,如果代码的兼容性很强那么不用也罢。 Chrome Frame[1]:Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

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