月度归档:2013年06月

ie6/ie7/ie8/ie9/ie10+和firefox和google chrome等一票浏览器hack方式整理

看标题就可以感觉到随着浏览器家族的不断膨胀,随之而来的前端开发兼容处理也貌似愈加复杂,嗯!貌似愈加复杂,其实整理一下也只是换汤不换药,今天整理两套hack方式,个人喜欢第二种,但是要先介绍第一种。

一.嵌入式hack方式(不推荐)

所谓嵌入式hack就是最早被人们所使用的方式,在此只整理ie的hack,其余一票高级浏览器同入口式hack方式

_width: 100px;     /ie6/
*+width: 100px;    /ie7/
*width: 100px      /ie6、ie7/
width: 100px;    /ie8/
width: 100px\9;    /ie6、ie7、ie8/
/* 由于本人不喜欢这种hack所以没有继续测试ie9+浏览器hack */

二.入口式hack方式(推荐)

优点,入口处控制,各个浏览器hack代码耦合性低,便于维护,说白了就是看着舒服,想看实例就看0101后花园首页源代码

首先在源代码中将原有的<html>进行如下替换:

<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

然后css代码如下,我想你一看就能理解,不做解释

.box {
    background-color: white;    /所有浏览器/
} 
.ie6 .box {
    background-color: brown;    /ie6浏览器/
}
.ie7 .box {
    background-color: green;    /ie7浏览器/
}
.ie8 .box {
    background-color: blue;     /ie8浏览器/
}
.ie9 .box {
    background-color: pink;     /ie9浏览器/
}
.ie .box {
    background-color: #CAF4ED; /所有ie浏览器/
}
@media all and (min-width:0) {
    background-color: black;   /非ie6、7、8的其余高级浏览器/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
    background-color: red;     /Google Chrome、Safari等一票webkit内核浏览器/
}

入口式hack方式的优雅想必大家已经领会了吧^-^Y

 

js的面向切面编程AOP

本文省略了AOP概念介绍,建议有AOP经验的同学查看本文。

本人只是从理论上了解了一下Js的AOP编程,没有实际项目经验,所以就粗略介绍,以作抛砖引玉。

本文仅从before和after两个切面进行举例

代码:

Function.prototype.before = function( func ) {
	   var __self = this;
	   return function() {
		      if ( func.apply( this, arguments ) === false ) {
		         	return false;
		      }
	       return __self.apply( this, arguments );
	   }
}

Function.prototype.after = function( func ) {
   	var __self = this;
	   return function() {
		      var ret = __self.apply( this, arguments );
		      if( ret === false) {
			         return false;
		      }
		      func.apply( this, arguments );
		      return ret;
	   }
}

window.onload = function() {
	   console.log(1);
}

window.onload = ( window.onload || function() {} ).after(function() {
	   console.log(2);
});

var Fun = function() {
	   console.log(3);
}

var fun = Fun.after(function() {
	   console.log(4);
   	console.log(arguments);
});

fun('bbs0101');

chrome下测试结果:

AOP编程样例

介绍js中call方法和apply方法的用法和区别

call方法:

介绍:调用一个对象的一个方法,以另一个对象替换当前对象。简单点说就是可以替换函数内的this对象。

语法:Fun.call([thisObj,arg1, arg2,….,argN);

参数:thisObj:将this对象替换为该对象;

arg:待传入的参数

样例:

<input type="text" id="myText"   value="input text">
<script>
function Obj() {
    this.value="对象!";
}
var value="global 变量";
function Fun1() {
    alert(this.value);
}
window.Fun1();   //global 变量
Fun1.call(window);  //global 变量
Fun1.call(document.getElementById('myText'));  //input text
Fun1.call(new Obj());   //对象!
</script>

apply方法:

介绍:功能与call方法相同,其中第一个参数也相同都是thisObj,唯一的区别就是传入参数不同,call方法中依次传入参数arg1,arg2…..argN,apply是传入一个参数数组[arg1,arg2….argN]

语法:Fun.apply(thisObj,[arg1,arg2,….,argN]);

参数:thisObj:同call方法;

[arg1,arg2,….,argN]:带传入的参数数组

apply相对call方法有一个好处就是可以直接传入函数对象arguments作为参数数组

样例:

function Fun1(name, age) {
    alert(name + '=====' + age); 
}
function Fun(name, age) {
    Fun1.apply(this, arguments);
}
Fun('a', 1); //a=====1

不确定尺寸图片及多行文字实现垂直居中和水平居中

本方法思路源自淘宝UED博客,略做改动,同时拓展到多行文字的垂直居中

css代码:

.box {
    width: 400px; 
    height: 400px; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #eee; 
    /* hack for ie */ 
    *float: left;
    *display: block;
    *font-size: 350px; 
    /* end */ 
} 
.box img { 
    *vertical-align: middle; 
}
.box span {
    *vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
}

html代码:

<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>
<div class="box">
    <span>我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进,我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进</span>
</div>

效果图:

图片垂直居中

注:

  1. 由于在高级浏览器下按display:table-cell;解析,所以外层div会以行级标签展示,所以在ie hack中添加*float:left;以在IE中实现相同效果
  2. 其中在IE下以font-size做为hack方式,其中height与*font-size的比为8/7,约等于1.14
  3. 针对多行文字垂直居中需要为内标签定义font-sizeline-height属性

用js正则表达式解析URL链接提取Host,Protocol等信息

要求:用javascript正则表达式解析URL链接,并从中提出关键信息

正则表达式:

/^(?:(\w+):\/\/)?(?:(\w+):?(\w+)?@)?([^:\/\?#]+)(?::(\d+))?(\/[^\?#]+)?(?:\?([^#]+))?(?:#(\w+))?/

测试用URL链接:http://username:password@www.bbs0101.com:1234/artical/js/index.php?key1=js&key2=css#anchor

测试代码:

var pattern = /^(?:(\w+):\/\/)?(?:(\w+):?(\w+)?@)?([^:\/\?#]+)(?::(\d+))?(\/[^\?#]+)?(?:\?([^#]+))?(?:#(\w+))?/;
var url = 'http://username:password@www.bbs0101.com:1234/artical/js/index.php?key1=js&key2=css#anchor';
var result = pattern.exec(url);

result返回值:

[
    "http://username:password@www.bbs0101.com:1234/artical/js/index.php?key1=js&key2=css#anchor", 
    "http", 
    "username", 
    "password", 
    "www.bbs0101.com", 
    "1234", 
    "/artical/js/index.php", 
    "key1=js&key2=css", 
    "anchor"
]

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

  • event.clientX/Y
  • event.pageX/Y
  • event.offsetX/Y
  • event.layerX/Y
  • event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

兼容性:所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变

兼容性:除IE6/7/8不支持外,其余浏览器均支持

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持

 layerX/Y:

layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变

兼容性:所有浏览器均支持

火狐firefox下按钮去掉虚线框和使文字垂直居中解决方案

在火狐下的input或者button默认显示并没有达到绝对的垂直居中,文字整体居中偏下的位置,而且当点击按钮之后,按钮上会出现一圈虚线,这很影响视觉效果,更重要的是你的设计师要你必须处理掉这两个问题。

解决方案:

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: none;
}

没有使用此解决方案时按钮默认效果如下:

火狐下按钮默认效果

火狐下按钮默认效果

当使用此解决方案之后的效果如下:

火狐下去掉按钮虚线和使文字垂直居中

火狐下去掉按钮虚线和使文字垂直居中

备注:这种解决方案是无意中在twitter前端框架Bootstrap的基础样式表里看到的,遂亲自测试一下,其中虚线框被成功去掉,经过对比文字会较默认位子向上偏移,反正按我要求基本上达到垂直居中了。

 

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)

首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

标准模式盒模型

在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box,另一个是border-box。

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

html5新增标签和html5新增input类型解释及用法

新增的结构元素:

<section> 元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。

<article> 元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章活报纸中的一篇文章

<aside> 元素表示article元素的内容之外的,与article元素的内容相关的辅助信息

<header> 元素表示页面中的一个内容区块或整个页面的标题

<hgroup> 元素用于对整个页面或页面中的一个内容区块的标题进行组合

<footer> 元素表示整个页面或页面中一个内容区块的脚注。一般来说,他会包括创作者的姓名、创作日期以及创作者联系信息

<nav> 元素表示页面中导航链接的部分

<figure> 元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例:

<figure>
<figcaption>PRC</figcaption>
<p>我爱北京天安门</p>
</figure>

新增的其他元素:

<video> 元素定义视频,比如电影片段或其它视频流。

<video src="movie.ogg" controls="controls">video元素</video>

<audio> 元素定义音频,比如音乐或其它音频流。

<audio src="someaudio.wav">audio元素</audio>

<embed> 元素用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="horse.wav" />

<mark> 元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键字。

<progress> 元素表示运行中的进程,可以使用progress元素来显示Javascript中耗费时间的函数的进程

<meter> 元素表示度量衡。仅用于已知最大值和最小值的度量。必须定义度量的范围,即可以在元素的文本中,也可以在min/max属性中的定义。

<time> 元素表示日期或时间,也可以同时表示两者。

<ruby> 元素表示ruby注释(中文注音或字符)。

 <ruby>漢<rt><rp>(</rp>厂<rp>)</rp></rt></ruby>

<rt> 元素表示字符(中文注音活字符)的解释或发音。

<rp> 元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

<wbr>  元素表示软换行。wbr元素于br元素的区别是:br元素表示此处必须换行;而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时(没必要换行),不进行换行,二档宽度不够时,主动在此处进行换行。

<canvas> 元素表示图形,比如图标和其它图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端javascript,以使脚本能够吧想绘制的东西绘制到这块画布上。

<command> 元素表示命令按钮,比如单选按钮、复选框活按钮。

<command onclick="cut()" label="cut">

<details> 元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。

<details>
    <summary>HTML 5</summary>
    我爱北京天安门
</details>

<datalist> 元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

<datagrid> 元素表示可选数据的列表,它以属性列表的形式来显示。

<keygen> 元素表示生成秘钥

<output> 元素表示不同类型的输出,比如脚本的输出。

<source> 元素表示没接元素(video和audio)定义媒介资源

<menu> 元素表示菜单列表。当希望列出表单控件时使用该标签。

<menu>
    <li><input type="checkbox" />red</li>
    <li><input type="checkbox" />blue</li>
</menu>

 新增的input元素的类型

emai> 类型表示必须输入E-mail地址的文本输入框

url 类型表示必须输入URL地址的文本输入框

number 类型表示必须输入数值的文本输入框

range 类型表示必须输入一定范围内数字值的文本输入框

Data Pickers 拥有多个可供选择日期和时间的新型输入文本框;

  • date——选取日、月、年
  • month——选取月、年
  • week——选取周和年
  • time——选取时间(小时和分钟)
  • datetime——选取时间、日、月、年(UTC时间)
  • datetime-local——选取时间、日、月、年(本地时间)