Be a Pure Person, Enjoy a Simple Life

分类 F2E 下的文章

03月 04

你需要知道的三个CSS技巧

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。


在CSS中用attr()显示HTML属性值


attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。

要想使用这个功能,你需要用到三种元素:一个:before:after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示<h3>标题上的data-prefix属性的值,你可以写成这样:

h3:before {
    content: attr(data-prefix) " ";
    }

    <h3 data-prefix="Custom prefix">This is a heading</h3>

显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写:

@media print {
    a:after {
    content: " (link to " attr(href) ") ";
    }
    }

    <a href="http://example.com">Visit our home page</a>

一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!

提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。


使用counter()在列表中自动添加序号


另外一个在CSS 2.1在就已经支持的功能是counter(),使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用<ol>来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。

关键就是它真的很简单:在:before伪类里的content属性加入counter():

body {
    counter-reset: heading;
    }

    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) "."; 
    }

如果你想知道更多关于这个counter归零和自增方法的知识,请参考关于这个主题的Mozilla
Developer Network
页面。里面有个极好的如何使用嵌套counter的例子。


使用calc()做算术


最后,但不是最不重要的,让我们来说说calc()功能。这个函数能让你执行简单的算术计算,例如计算元素的长宽,免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。

比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:

.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }

    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

漂亮吧,不是吗?更详细的介绍请参考W3C CSS calc 规范

我们可以越来越清楚的发现,CSS已经成熟到在某些方法可以替代javascript,极大的简化了web开发人员的工作。如果你还不开始利用这些功能,那只能说是在犯傻。


[英文原文:Three CSS features you need to know about

02月 06

jQuery Core 1.9 Upgrade Guide

以前预告过jQuery 1.9是最后一个支持IE6/7/8的版本,现在已经生米煮成熟饭了,jQuery 2.0起,将只支持IE 9+及其他HTML5浏览器。作为天朝这个特殊的国度的前端工程师就更加的苦逼了,同行们自重吧。jQuery 1.9 增加了一些新东西比如css3选择器等,删除和修改了一些API,升级后可能导致现有代码无法兼容,如果执意要升级jquery,做好改代码的准备吧~~~~
幸好jQuery团队提供了Migrate插件,用来检测弃用和已删除的API,或恢复原有的功能,对大部分API做了兼容,这样原来的程序大部分都可继续正常工作,But 作为一个牛逼的前端攻城狮,还是早点修改代码和习惯吧 
陈傻子英语水平实在是有限,无法准确的翻译官方的升级指南,各位看官还是Click下面的链接练鸟语吧^_^
01月 21

js window.onload 冲突!

好吧,刚才文章没发布成功,再写一次……

今天碰到一个 两段js有一段没有生效的问题,苦逼的找了N久,终于发现原来是window.onload冲突了,借用别人的js终究是不靠谱啊~

解决方案:

if(IE){

     window.attachEvent('onload',function(){alert('aa');});

}else{
     window.addEventListener('load',function(){alert('bb');},false);

}

 

12月 03

HTML常用编码转换

var encoding = (function () {

   function ToASCII(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () {

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\$1;") 

  });

   }

   function ToUnicode(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { 

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\u$1") 

  });

   }

   function ToNormal(str) {

       return str.replace(/(?:)([0-9a-f]{4});|(?:\\u)([0-9a-f]{4})/gi, function () { 

  return unescape("%u" + (arguments[1] || arguments[2])); 

  });

   }

   function ToCss(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { 

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\$1") 

  });

   }

   return {

       ToASCII: ToASCII,

       ToUnicode: ToUnicode,

       ToNormal: ToNormal,

       ToCss: ToCss

   };

})();

console.log(encoding.ToASCII("宋体"));

console.log(encoding.ToUnicode("宋体"));

console.log(encoding.ToNormal("宋\\u4F53"));

console.log(encoding.ToUnicode("宋体"));

console.log(encoding.ToCss('Arial , Helvetica ,"宋体", sans-serif'));

12月 03

前端开发流程及规范

这是陈傻子在上一家公司整理的前端开发流程和规范,虽然已经离开了那里,但是有些东西还是可以参考参考的

一、前言
1、目的
为了规范公司项目的开发、提高团队协作效率,便于开发人员功能添加和修改及前端后期优化维护, 输出高质量的文档,特制订此规范。 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时沟通,及时调整本规范的相关代码样例和文档。

2、基本准则
符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
总之一句话,不以提高团队开发效率为目的的代码习惯就是耍流氓!^_^

二、前端的开发的一般流程
1、制作准备
1) 仔细研读PRD(需求文档),根据文档做好HTML的大体规划;
2) 对涉及到的相关JS交互效果进行初步设计和编写;

2、代码编写
1) 根据PRD和Prototype(原型图) 搭建大致的HTML结构;
2) 根据设计稿(PSD图)进行页面整体框架制作;
3) 页面细节的完善和优化(CSS 和 JS);
4) 页面兼容性和JS效果的初步测试

3、确认和测试
1) 提交需求提出者确认(交互效果和相关产品等),原则上此时不允许功能添加;
2) 提交SVN,Tester在测试环境中进行测试;
3) 根据PD和Tester的反馈进行相应的修正(兼容性处理和缺货产品替换等);

4、上线
1) 经PD和Tester确认后,将文件提交给运维组,上传服务器;
2) 上传之后Tester将会在正式环境中进行最后的确认,若发现问题,进行即时修正;
3) 后期维护(产品增删替换、功能修正等);
4) 对于已上线网站(活动)的修改。

5、下线
6、整理和归档

三、开发规范
(一)目录规范
目录建立的原则:在不改变现有结构的前提下,以最少的层次提供最清晰简便的访问结构。
1、 禁止随意改动各网站现有目录结构;
2、 活动相对目录不要超过三层;
3、 活动根目录文件尽量少,且必须包含一个默认页(如index.php或index.html);
4、 活动文件目录
a) 根目录/special/以上线日期为名的文件夹/活动名称。
b) 活动名称目录用小写英文标识,多个单词用‘-’连接,禁止出现空格、大小写混编、特殊字符;
c) 尽量不使用汉语拼音;

样例:special/20120305/bigsize-dress/

(二)命名规范
文件命名的原则:以最少的字母达到最容易理解的意义。

1、一般文件及目录命名规范:
1)每一个目录中应该包含一个缺省的html 文件,文件名统一用index.html文件名称统一用小写的英文字母、数字和下划线的组合;
2)尽量按单词的英语翻译为名称。

2、图片的命名规范:
1)名称分为头尾两两部分,用下划线隔开,
2)头部分表示此图片的大类性质。如banner,logo,button,nav,bg,menu等;
3)尾部分表示具体的含义,用英文字母表示;
样例:banner_top.jpg, logo_sohu.jpg,bg_main.jpg等
4)图片hover效果时,两张分别在原有文件名后加"_on"和"_off"命名。

3、html,css,js命名规范:
1)html文件命名: 英文命名, 后缀:.html
2)css文件命名: 英文命名,后缀:.css. 公共样式public.css, 首页index.css, 其他页面依实际模块需求命名,如非样式表极其庞大,不建议建立多个样式表;站内活动原则上只允许出现一个样式表文件;
3)JS文件命名: 英文命名, 后缀.js. 公共common.js, 其他依实际模块需求命名。如非特殊情况,js效果尽量写在一个js文件中。文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

4、命名规范,见css书写规范 第七条;
5、其他命名规范
1)尽量不要以ad等字样为文件名,因为有些浏览器会将其当广告屏蔽;

(三)html书写规范
1、文档类型声明及编码:
1) 文档类型统一为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html5声明类型为<!DOCTYPE html>;
2) 编码统一为<meta charset=”utf-8” />;
3) 在html标签中添加语言声明:lang="**";
如:<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
各语种语言声明:
英语:lang="en";
法语:lang="fr";
德语:lang="de";
西语:lang="es";
韩语:lang=" ko";
日语:lang="ja";
俄语:lang="ru";
阿语:lang="ar";
中文:lang="zh";
2、 头部信息
活动页面添加独特的标题<title></title>,关键词<meta name=”keywords”>,描述<meta name=”description”>。

3、 文件引用
一般情况下,样式文件必须<head>标签内,以link方式调用;JavaScript文件在页面底部调用;

4、页面编写规范
1)所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
2)充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等;尽量避免html5中已经不支持的标签,如font等(详见附件:HTML5 常用语法一览(列举不支持的属性).doc);
3)语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
4)尽可能减少div嵌套,
如<div class=”box”& gt;<div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户 名</div></div></div>
完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>< /div>;
5)书写链接地址时, 必须避免重定向,例如:href=”http://chenchaojun.cn/”, 即须在URL地址后面加上“/”;
6)在页面中尽量避免使用内联样式,即style=”…”;
7)为含有描述性表单元素(input, textarea)添加label,
如<p> 姓名: <input type=”text” id=”name” name=”name” /></p>
须写成:< p><label for=”name”>姓名: </label>< input type=”text” id=”name” /></p>
8)能以背景形式呈现的图片, 尽量写入css样式中;
9)给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
10)特殊符号使用: 尽可能使用代码替代,如空格 &nbsp等;
11)为图片及链接加alt 属性和title属性;分下面三种情况

i. 图片加链接: <a href=””><img src=”” /></a>,图片必须加alt,title属性。
<a href=””><img scr=”” title=”” alt=”” width=”” height=”” /> </a>

ii. 只有链接 : <a href=””>example</a>,链接可以不加title属性。

iii. 链接有css背景图: <a href=”” ></a> css: {background-image:url('paper.gif');},链接必须加上title及alt

<a href=”” title=”” alt=””> </a>

Alt的值也要尽可能的包含关键词。
12)页面中的一些重要内容,尽量使用文字而不是图形,FLASH,JS来显示重要的名称、内容或链接。
13)在网站的其他页面给活动页面的图片链接上也要加上alt和title属性,用来对活动描述,特别是网站首页的活动推广图片上。
14)尽可能的提高页面的加载速度,如:页面一次性显示产品超过40个,用异步加载,页面超过3屏,用异步加载。
15) 将页面中不重要内容相关的html代码放在页面的底部。
16)注意活动页面上不要存在死链接。
17)尽量不要使用图片热点图链接,如果需要使用的话,也要添加alt和title的值,对图片和链接进行描述。
18)请不要使用隐藏真实内容或欺骗性的重定向手段。
19)同一活动的不同页面使用不同的标题,关键词和描述。
20) 在<head>标签之间,给页面加上唯一链接标签,链接上不需要加任何跟踪性质的参数:
<link rel="canonical" href="唯一url" />
如:首页活动图链接的地址为http://chenchaojun.cn/special/20120302/spring/index.html?lcid=spring/summer-apparel
此页面中的标签应为:
<link rel="canonical" href=" http://chenchaojun.cn/special/20120302/spring/index.html " />

(四)css书写规范
1、CSS Rest
建议使用YUI(见附件:reset.css;活动可根据需要删减);

2、Css建议采用CSSRest+common.css+app.css形式;
3、为了方便组件模块化和提高弹性,正常情况下。为了避免边界冲突,组件不设置外边界!
4、为了避免组件上下边距重合问题和IE的haslayout引发的bug..无其他特殊要求,一般采用值设置margin-top设置上下边距;
5、优先对common.css 进行整合;
6、建议用一行的写法,不强求;css3属性建议用多行书写,写过后亲们会懂的;
7、样式命名:
尽量用驼峰式命名,如 main_nav;在不涉及到特效的样式命名时尽量避免 小驼峰式命名法,如 mainNav;重用性低或者只在一个box中调用的样式,可通过继承写法规避,如 #mainnav .firstnav{…….}(不建议过多使用继承,遇到过因继承引起的问题的亲们懂的);

8、css属性书写顺序
建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性(此条可根据各位习惯书写, 但尽量保证同类属性写在一起);
属性列举:
布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等;
自身属性主要包括: width & height & background & border;
文本属性主要包括: font & color & text-align & text-decoration & text-indent等;
其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序)  & zoom等。我所列出的这些属性只是最常用到的, 并不代表全部;
9、class与id的使用:
id仅使用在大的模块上, class可用在重复使用率高及子级中;
10、书写代码前, 考虑并提高样式重复使用率;
11、背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作,并保存psd源文件;

12、使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现,
如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}

13、避免试用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />来兼容IE8;
14、使用css3属性时,请做好IE浏览器的兼容方案;
15、必须为大区块样式添加注释, 小区块适量注释;
16、少用或者不用CSS Hack;
17、以上规范,不适用于邮件制作,邮件 详见邮件制作规范;

(五)JavaScript书写规范
1、 原则上所有功能均根据项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);对于常用代码,后期会统一建立一个代码库,按需调用,避免重复劳动;

2、库引入: 原则上仅引入jQuery库; 活动jquery库请调用网站根目录 js/ 下的jquery,没必要每个活动上传一个jquery;

3、命名规范
1)变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iLoveQm;jQuery变量要求首字符为’_', 其他与原生JavaScript 规则相同, 如: _iLoveQm;另, 要求变量集中声明, 避免全局变量。
2)类命名: 首字母小写, 驼峰式命名,如 iLoveQm;
3)函数命名: 首字母小写驼峰式命名. 如iLoveQm();
4)命名语义化, 尽可能利用英文单词或其缩写;

4、尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
5、 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
6、代码结构明了, 加适量注释. 提高函数重用率;
7、注重与html分离, 减小reflow, 注重性能;
8、页面内js注释,切勿使用 //;至于为什么,等你用了你就知道了 ^_^

(六)图片规范
1、所有页面元素类图片均放入易识别的 专用图片文件夹内,如imgages,img等;
2、制作时使用的demo图片,上传是即时删除;
2、图片格式仅限于gif || png || jpg;
3、命名全部用小写英文字母、数字、_ 的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇, 便于团队其他 成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如banner_top01.gif,为了防止部分浏览器的广告过滤,不要试用 ad、ad_类似的文件名;
4、在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5、尽量避免使用半透明的png图片;
6、运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并在归档目录中存档。

(七)注释规范
1、公共组件和各个栏目在文件头部加上注释说明:
注释说明:demo:
/**
**文件用途
**作者姓名
**制作日期
**/
You’d better use English
2、html注释:
注释格式 <!-- 这儿是注释 -->, ’–’只能在注释的始末位置,不可置入注释文字区域;"<!--"这部分有且只能有两个-,后面跟个空格,如果“<!---” 形式,在火狐3.6中注释失效(血淋淋的教训啊~);模块头尾对应添加注释,并标注start和end;

3、css注释:
注释格式 /*这儿是注释*/;

4、JavaScript注释:
单行注释使用 ’//这儿是单行注释’ ,
多行注释使用 /* 这儿有多行注释 */;
需要压缩的js 禁用单行注释;英文站页面内js禁用当行注释;

(八)开发及测试工具约定
建议使用 Dw || notepad++, 亦可根据自己喜好选择, 但须遵循如下原则:
1、不可利用IDE的视图模式’画’代码,如DW的设计试图;
2、不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;
3、编码格式化
4、建议顺序浏览器兼容测试:FireFox–>IE9 –>IE8–>IE7 –> Chrome –> Opera–>Safari –>IE6;
5、欢迎加入Kill IE6的行列;但是功能性IE6不兼容,页面结构的IE6不兼容,是不能被容忍的;

四、流程规范
1、开发时请时刻关注是否有其他需求也涉及到你所修改的文件,优化需求请特别注意;

2、需求执行时请即时跟相关人员沟通;

3、开发和自测结束后,将代码通过svn提交到测试站,并告知运维同学切到可访问环境;
1)、svn提交代码前 必须先Update 代码,确保无冲突再提交;
2)、代码提交过程中如遇文件冲突,请仔细检查该文件代码,并找到冲突原因,并修正,严禁删除冲突文件中不是你修改的任何代码哪怕是一个小逗号;
3)、代码提交和切换后,将测试地址发给需求提出者确认和Tester 测试,并耐心及时修正发现的问题;

4、上传和发布规范
Tester和需求提出放反馈无误后,将需求所涉及到的文件 放入一个文件夹中,发给运维的同学
1、 打包(注:此打包非压缩包)文件夹命名:
20120310XX站前(后台)台文件上传-XXX,
如:20120310俄语站前台文件上传-陈XX;

2、需要上传文件的文件夹发给相关Tester,由Tester将文件提交给运维组同学,原则上禁止直接讲文件交给运维;

3、文件上传后再次在正式环境进行确认,确认无误后,再添加活动入口等操作;

(五)下线
活动结束或新版上线时,将下线和旧版活动页面做好本地备份;

(六)整理和归档
1、将需求相关文件(包括需求文档、PSD源文件,原型图等)整理到以上线日期为开头的文件夹中;2、对后期有修改的项目,在归档文件夹中作相关记录,同时保存原始版本和修改版本的相关文件。

五、后语
此规范自发布之日起执行,如有意见和建议请及时提出,并作相应的调整和修改;
祝大家愉快!