网页HTML中电子邮箱(Email)地址的加密和混淆防采集

邮箱里垃圾邮件一直有很多,这让我不得不重新审视,发布在网页上的电子邮箱地址,为了避免垃圾邮件,我刻意将@更换成#,也许这在十年前是个不错的办法,但是随着神经网络和机器学习新算法的发展,这一类小手段也面临失效的风险,因为大部分都是通过修改电子邮箱地址的“@”符号,通过正则表达式筛选和特征值匹配,比如hotmail.com、gmail.com、163.com这一类疑似电子邮箱地址的特征,还是可以抓取到电子邮箱地址,所以在将Email发布到HTML网页之前我们要对其进行加密和混淆。

下面我以john@example.com为例,介绍几种加密和混淆的反垃圾邮件手段。

1. 生成图片

利用传统的图灵测试CAPTCHA,将防止采集的电子邮箱地址生成图片,利用机器不能识别的特性,来区别人和机器,生成图片的方式有很多,除了高大上的Photoshop外,甚至可以使用系统自带的绘图工具来完成,另外希望偷懒的话,还有一些在线工具可以帮助到你,比如《Top 10 Websites to Turn Your Email Address into An Image》

继续阅读

让IE6/7/8支持CSS3 media print(Media Queries)打印样式

某个项目需要支持打印样式,测试下来Chrome和FireFox正常,唯独IE8无法应用打印样式,也就是说识别不了@media定义的CSS样式节。

网上解决的办法也五花八门,我在这里整理一下,首先我们还是要从让IE支持media的的思路开始,首先JavaScript大将出马。

1. 项目css3-mediaqueries-js

该项目由Wouter van der Graaf发起(项目地址),旨在为了提供对于类似于IE 5+Firefox 1+Safari 2低版本浏览器的Media Queries支持,使用方式也很简单,直接引用脚本即可,当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了,所以我们可以使用IE特有的条件注释处理代码引用,比如下面的代码示例:

继续阅读

Web 2.0元素字体、边框与背景配色(调色板)

项目中设计经常要用到配色,尤其是字体颜色、边框和背景配色,当然对于Web 2.0时代来说,配色首先要让人看上去舒服,不刺眼。因为平常工作需要我收集了一些现成的配色方案供大家参考,部分配色来自于《Web 2.0 Colour Palette》,还有部分配色原始出处已经找不到了,如果有童鞋知道请告知一下,当然如果大家还有一些比较好的配色方案也可以分享一下哦。

继续阅读

判断浏览器客户端是否禁用JavaScript脚本

主流现代浏览器默认都不会禁用js脚本的,但是也有例外,除了用户主动禁用脚本外,还有就是维护模式下的安全浏览,这样会禁用页面上的js脚本。

禁用了脚本会发生什么?哦,JQuery无法使用?准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效,比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会,严重一点可能感觉像是过着盲人的生活,呵呵,不过有一点可以肯定的是未开启脚本的这部分用户少之又少,我们可以抛弃他们。你说什么?抛弃我们的客户?这怎么可以?别急,下面我要介绍的就是针对这部分用户的判断,以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了,我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用,见得最多的例子是用在统计代码上面,比如有下面的代码:

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

继续阅读

使用CSS Reset让网页布局变得轻松

其实作为网页前端设计人员最大的痛苦莫过于各种各样的浏览器,不过浏览器外壳(Shell)还好,糟糕的事情是有各种牌子的浏览器排版内核(Core),这或多或少给我们网页布局带来一定的麻烦,比如说不同的浏览器对于盒子模型的理解偏差。

好吧,我们完全没有比较把大量的时间花费在兼容浏览器上面,而且做到100%的全兼容会有一定的困难,对于CSS不太熟练的设计人员来说,与其耗费大量时间调试写CSS Hack,然后制造出一个极难维护且占带宽的样式文件,还不如将时间节省下来去喝杯咖啡,喝咖啡?开玩笑,那些在不同浏览器下呈现的乱七八糟的布局难道就不管了吗?当然不是这样,其实我们可以借助于CSS Reset(也称CSS重置、CSS重设、CSS清零)。

什么是CSS Reset?简单的来说它主要实现不同浏览器下不同布局模式的统一,这样将大大有利于我们布局跨浏览器的网页。

最经典的CSS Reset莫过于下面这一句了:

1
2
3
4
* {
  margin: 0;
  padding: 0
}

什么?你也是这么写的?好吧,我以前也一直这么写,但是现在我觉得应该淘汰这种写法了,为什么呢?除了少部分浏览器不支持*通配符外,这种写法带来了另外一个问题《* { margin: 0; padding: 0; } No Longer Cool》这篇文章介绍了性能上面有影响,总之我们还是换一种方法吧:-)

现成的CSS Reset有很多,其中《CSS Tools: Reset CSS》比较不错,其将所有可能的标签列出来然后Reset样式,从而取代了* { margin: 0; padding: 0; }的写法,另外对于不支持HTML5的标签的老式浏览器,其还将这些HTML5块级(Block)标签重置为display:block。这个CSS Reset的使用方法也非常简单,只要在你写CSS时引用一下这个Reset样式就可以了。

想了解更多的关于CSS Reset的故事,可以参观淘宝UED的《Reset CSS研究(八卦篇)》

想了解不同CSS Reset的表现,我相信* { CSS:resetr }这个网站还是值得参考的。

使用JavaScript脚本框架实现HTML5+CSS3网页兼容

现在网页技术发展的很快,连网页制作标准都有了HTML5版的了,不过很多朋友可能都在观望,担心新技术会不兼容于老爷车式的浏览器,同时也不愿意写上那么多的Hack来确保兼容,但是大家可能和我一样也垂涎于HTML5这个新技术带来的新特性,大家都在观望,希望出现个吃螃蟹的人,不过这样的人已经有了,在这里淘宝网就开始尝试用HTML5新技术布局了,就目前看来,各项技术良好,而且保持了绝大多数浏览器的兼容。如果我们想用HTML5布局网站但想少写或者不写CSS Hack什么的,有什么便捷的办法呢?这点已经有人为我们铺好道路了,网上一些JavaScript脚本框架减轻了我们的工作,可以让我们放心大胆的去实践新的HTML5技术了。具体的一些框架我总结了下,不全的话可以提出来:

1. html5shiv – HTML5 IE enabling script

让低版本IE支持HTML5标签,主要是一些类似于header、footer等这样的标签,不过测试下来,貌似IE5.5支持不是很好的,这个大家应该没必要介意了,这么古董的浏览器还是比较少的。

项目主页 : http://code.google.com/p/html5shiv/

当然你可以直接借助Google的代码托管库这样写到你的HTML5文档里:

<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

2. css3-mediaqueries-js – make CSS3 Media Queries work in all browsers (JavaScript library)

这个主要是实现CSS3的media Queries属性兼容的,说直接点就是为不同媒体设备实现不同的分辨率的CSS样式而准备的,比如台式机访问是一种分辨率样式,手机访问是另外一种分辨率样式,具体可以参考《CSS3 Media Queries》这篇文章。当然如果没有为指定设备的指定分辨率设置CSS,就可以不用这个脚本帮忙了。

项目主页 : http://code.google.com/p/css3-mediaqueries-js/

3. ie7-js – A JavaScript library to make MSIE behave like a standards-compliant browser.

看名字就晓得这个又是为IE准备的,的确,这个主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题,当然不单单是HTML5 + CSS3可以采用,XHTML + CSS2也可以试一试。

项目主页 : http://code.google.com/p/ie7-js/

也可以直接使用Google的代码托管库这样写:

<!–[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]–>

当你引用了IE9.js就不需要再引用IE8.js或者IE7.js了,因为IE9.js包含了这两个脚本的内容。

4. Modernizr

具体介绍可以参考《Taking Advantage of HTML5 and CSS3 with Modernizr》,幸运的是我找到了一篇翻译的中文资料《Modernizr——为HTML5和CSS3而生》,说到底这是个HTML5和CSS3的特性检测器,它能自动检测浏览器是否支持相应的特性并且还能将不支持特性的某些class样式符加上前缀no-,这样就大大方便了我们在面对不兼容浏览器时实现优雅的降级。

项目主页 : http://www.modernizr.com/ (可能无法访问)

目前主页可能无法访问,不过大家可以通过github上托管项目进行下载。

5. Google Font API

貌似这个和JavaScript没有关系,好吧,我承认这个是CSS的实现,目的是让网站使用一些用户电脑上没有的字体,不过前提是这些字体Google Web Font目录下必须存在,其实是调用的谷歌的一个接口,有了这个我们就能放心大胆的使用一些特殊的字体而不用担心用户有没有安装了。

项目主页 : http://code.google.com/apis/webfonts/docs/getting_started.html

去掉网页上链接或按钮的虚线框

经常用鼠标在链接或按钮上点击时会出现虚线框,很多朋友常常想去掉这个不雅的虚线框,但是我个人还是觉得去掉虚线框还是要谨慎为好,为什么呢,因为当你去掉虚线框后表面上确实美观了很多,用鼠标点击链接或按钮时顿觉清爽,但是这同时还带来了可访问性和易用性的下降,为什么这么说呢,因为有些童鞋习惯上用键盘快速的定位并访问相关的链接或按钮,当你去掉虚线框后,就意味着这些对象可能无法获得焦点(focus),或者浏览者可能无法感知到焦点的存在,当然也就不能被定位了。我们不能单纯的去做网站,做网页要考虑的问题很多,特别是做到无障碍浏览往往比较困难,如果真的要去掉虚线框而不失去可访问性的话,解决的方案可以考虑加上accesskey属性,当然旁边可以做些注解或者提示,让访问者能够使用快捷键方式访问这些不能被焦点定位的对象。

下面简单介绍下去掉虚线框的几种方式。

1.CSS样式表的outline属性(IE9、FF等浏览器推荐)

对于最新的IE9浏览器以及FireFox里可以使用outline:none,去掉虚线框,当然FF下还可以写成-moz-outline:none。

1
2
3
4
a:focus {
  outline:none;
  -moz-outline:none;
}

2.IE的hidefocus=true属性(IE8及以下版本推荐)

对于版本低于IE9的IE浏览器,我们可以使用hidefocus方法,就比如:

1
<a href="index.php" hidefocus="true"></a>

3.onfocus事件的this.blur();

这个方法效果比较好,但是感觉语义化不好,原理是在获得焦点时去掉焦点。

1
<a href="index.php" onfocus="this.blur();"></a>

好吧,介绍了这三种办法,下面我们可以分情况整合一下,比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。

1
2
3
4
5
6
7
8
9
10
11
12
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].hideFocus = true;
}
 
// 或者采用this.blur()的方式,比如像下面这样写
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].onfocus = function() {
		this.blur();
	}
}

上面的办法有个缺点,就是遍历了所有的A链接标签,可能有些链接我们依然希望它能够有虚线框,如何只让指定的链接去除虚线框呢?对于IE9及FF、Chrome、Safari等浏览器,我们依然可以通过outline:none的形式去除,当然我们可以定义一个指定的CSS样式比如.hidefocus,就像下面那样:

1
2
3
4
.hidefocus:focus {
  outline:none;
  -moz-outline:none;
}

然后我们就通过<a class="hidefocus" href="index.php">链接文本</a>这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢?其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。
遍历class的办法有getElementsByClassName,不过可惜的是IE9以下不支持这个方法,当然有人写过全兼容版本的getElementsByClassName,大家可以看看我这里找到的一个getElementsByClassName版本。

然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。

1
2
3
4
5
6
7
8
9
10
11
12
<!--[if lt IE 9]>
<script type="text/javascript">
addDOMLoadEvent(
    function() {
        var anchors = getElementsByClassName('hidefocus');
	for (var i=0; i<anchors.length; i++) {
		anchors[i].hideFocus = true;
	}
    }
);
</script>
<![endif]-->

这里的addDOMLoadEvent可以参考《使用DOMContentLoaded取代部分window.onload》,关于if lt IE 9条件注释可以参考《CSS设置样式时区分不同版本IE的办法》。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus = true的属性,然后配合CSS的outline:none,基本就完美了。