TaobaoUED博客笔记(1)

作者:ITattoo 今天看了,淘宝前端的技术博客,看到一些有用的东西,做一些笔记。

1.表单在各个浏览器下的表现统一

See the Pen vNGjEw by iTattoo (@ZhouYanlang) on CodePen.

2.IE8以下圆角的做法

See the Pen Kdzomp by iTattoo (@ZhouYanlang) on CodePen.

3.acronym这个标签用来解释名词很爽,但是用得太少.我也一直想用来着,所以记下了.

See the Pen BoKrRe by iTattoo (@ZhouYanlang) on CodePen.

4.不用JS的漂浮层

See the Pen jbqzGP by iTattoo (@ZhouYanlang) on CodePen.

5.IE6下a:hover的bug

在制作数码热销排行的页面时,每种手机的图片都是固定的160×120大小,但是出于页面美观及内容可读性的考虑,在列表页上图片都压缩为原大小的50%显示;也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时,我们会按原图大小显示出来。

<div class="DigitalImage">
    <a href="#">
        <img src="http://pic.58pic.com/58pic/15/04/43/70t58PICkHd_1024.jpg" alt="#"/>
    </a>
</div>

原理很简单,设置a元素的position属性为relative,图片最开始显示为50%大小,使用默认定位;当:hover被触发的时候,图片更改为绝对定位, 同时显示为原图大小,为了使效果看起来像是对称的盖在缩略图上,同时设置top和left为缩略图的宽高的一半的负数。

.DigitalImage a {
    position: relative;
}
.DigitalImage a:hover {
    position: relative;
    z-index: 1;
    border: none;
}
.DigitalImage a img {
    position: static;
    width: 80px;
    height: 60px;
    border: none;
}
.DigitalImage a:hover img {
    position: absolute;
    z-index: 2;
    width: 160px;
    height: 120px;
    border: 1px solid #CCC;
    left: -40px;
    top: -30px;
}

以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果,可是如果没有这一句的话,在IE6中就无法触发hover。

<a href="#"> 淘宝网 <span> 淘你喜欢 </span></a>

在IE7/FF中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的, 也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性(下面的只加一个就行),例如:

a:hover {
    padding: 0;
    border: none;
    background: none;
}

此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。更详细的信息请参考:IE中伪类:hover的使用及BUG 。另外,通过阅读 position:relative/absolute无法冲破的等级,发现CSS还有改进的空间,改动后如下:

.DigitalImage a:hover {
    position: relative;
}
.DigitalImage a img {
    position: static;
    width: 80px;
    height: 60px;
    border: none;
}
.DigitalImage a:hover img {
    position: absolute;
    width: 160px;
    height: 120px;
    border: 1px solid #CCC;
    left: -40px;
    top: -30px;
}

改动的原理就是去掉了a样式定义,直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性),另外也避免了 position:relative/absolute无法冲破的等级 一文中提到的z-index的问题,所以你会发现改进后的样式中,z-index属性也去掉了。

6.类目之间的竖线

类目间的竖线无非都只有三种。

1、背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。缺点:最后一个还是要用class来隐藏掉背景。

2、符号 在每个a标签之间用”|”符号来填充。 缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。 3、a标签右侧的boder。 同背景图一样,只不过使用border-right来代替。缺点也同上。

看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。

7.淘宝的css属性顺序书写规范.

以前部门的同事们,每个人都有一套书写的规范,导致看对方的css代码非常吃力,所以就推行了一套书写标准 ,或许对您也有帮助。


*{
/*显示属性*/ display position float clear cursor …
/*盒模型*/ margin padding width height
/*排版*/ vertical-align white-space text-decoration text-align …
/*文字*/ color font content
/*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈。*/border background
}

到底其实属性的书写顺序规范就是:神仙?妖怪? – 身材怎么样!- 服装类型(比基尼?棉袄?) – 服装款式(黑色?白色?纽扣?拉链?) – 用了啥化妆品和发型.

8.css代码的简写

     css缩写的语法,对新手有一定帮助,老鸟就不用看了;

  • 0px不需要单位,直接:margin:0;
  • 盒模型的缩写,语法是margin:上 右 下 左;甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的;
  • 字体宽度normal用400代替,bold用700代替。
  • 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#0044DD可以缩写为#04D;
  • border边框的缩写,语法是border:width style color,类似boder:1px solid red;
  • 背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?);
  • 字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
  • list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

9.位置图片大小居中问题

.box { 
    display: table-cell; 
    vertical-align:middle; 
    width:200px; 
    height:200px; 
    text-align:center; 
    /* hack for ie */ 
    *display: block; 
    *font-size: 175px; 
    /* end */ 
    border: 1px solid #eee; 
} 
.box img { 
    vertical-align:middle; 
}
<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>

10.请给Array本地对象增加一个原型方法

它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组

Array.prototype.distinct = function() { 
 var ret = []; 
 for (var i = 0; i < this.length; i++) { 
 	for (var j = i+1; j < this.length;) { 
 		if (this[i] === this[j]) { 
 			ret.push(this.splice(j, 1)[0]); 
 		} else { 
 			j++; 
 		} 
 	} 
 } 
 return ret; 
} 
//for test 
alert(['a','b','c','d','b','a','e'].distinct())

11.开发及使用css框架中常遇到的问题。

1、页面外部引用样式过多。 譬如关于ul的margin定义,在格式化的css中会声明为0,而在基本样式的css中又可能会声明margin:5px 10px;所以在Yslow中会出现多次定义。

2、组件复用性的考量。 譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?

综合以上的二个问题,个人认为解决的方式便是封装,让该有的有,不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话,css的复用性又会变得很差,后期手工的封装会很痛苦。只能套用小马的一句话“具体情况,具体分析”。

人生真是矛盾啊..