寻梦

HTML5带来的小麻烦&HTML标签全局属性小探讨

这两天突然在某个技术QQ群里看到有人问关于chrome拼写检查的问题：大致就是输入一个单词以后，会有红色的波浪下划线。后来有人回答说是因为spellcheck属性默认被触发导致的，设置spellcheck=”false”就可以了。于是到w3school上搜了下spellcheck：

语法

<element spellcheck="value">

属性值

值	描述
true	规定应当对元素的文本进行拼写检查。
false	规定不应对元素的文本进行拼写检查。

这让我突然想起了前几天帮后端开发解决的一个问题：某个比价单，在点了游览器后退，然后再次比价的时候，对比的项目和上次的是一样的。而且这个问题只有在最新版的firefox下有，ie都没有。当时我觉得很奇怪，于是让后端开发等一下。我按照自己的印象稍微搜了一下，没想到真的搜出答案了：autocomplete:

语法

<form autocomplete="on|off">

属性值

值	描述
on	默认。规定启用自动完成功能。
off	规定禁用自动完成功能。

比价单的数据提交使用了input type=”hidden”，而ff默认开启了autocomplete这个属性。后来，我让他把form（这样就可以不用一个一个的设置input）的autocomplete设置为off就解决了。

话又说回来，从html4到html5，确实增加了不少全局属性：

• * accesskey： 规定访问元素的键盘快捷键
• * class：规定元素的类名（用于规定样式表中的类）。
• * （新增）contenteditable：规定是否允许用户编辑内容。
• * （新增）contextmenu：规定元素的上下文菜单。
• * dir：规定元素中内容的文本方向。
• *（新增） draggable：规定是否允许用户拖动元素。
• *（新增） dropzone：规定当被拖动的项目/数据被拖放到元素中时会发生什么。
• *（新增） hidden：规定该元素是无关的。被隐藏的元素不会显示。
• * id：规定元素的唯一 ID
• * lang：规定元素中内容的语言代码。
• *（新增） spellcheck：规定是否必须对元素进行拼写或语法检查。
• * style：规定元素的行内样式。
• * tabindex：规定元素的 tab 键控制次序。
• * title：规定有关元素的额外信息。

看上去好像加了蛮多，但说个老实话，除了那几个和css比较贴近的属性（style class id），其他的html4属性都很少有人用（而且貌似大部分人不知道title可以用在几乎所有元素上），更何况是tabindex和accesskey这种。如果不是研究WAI的话，很少有人去用tabindex和accesskey吧（貌似也只有看过腾讯ISUX有做过相关研究：http://isux.tencent.com/pengyou-accessibility-practice.html）。及时不谈大家用不用，游览器支不支持都是个大问题（opera就不支持accesskey）。另外，还有个问题少年——ie 6。
不过说实话，这也算是一种无奈吧。
顺便回归下正题，突然发现，html4和html5的boolean属性标签，最大的区别貌似html5的更加正规。html4中的属性，例如option的selected，需要设置成selected=”selected”，而不是selected=”true”。其实原因很简单，这种属性的“准确”写法应该是
，后来出现xhtml，将html中一系列标签以及属性的写法标准化、结构化，最后写法就成了selected=”selected”，这种写法从某种程度上比较像对原始selected的兼容。而现在出的html5属性则不需要这种兼容。

不会当客服的杂物工不是好前端 2

不知不觉来公司已经快8个月了，刚刚来公司的时候，对公司的业务流程不太熟悉。再加上公司的前端团队也没有剩余的力量来带新人，而刚刚毕业我也不太清楚公司的开发流程。只是某一天突然给了任务过来，而且第二天就要，只好加班。更郁闷的事，由于不知道应该问谁（任务交过来的时候也没说，她就去忙自己的了），导致最后做出来的东西和需求有点不一样，于是就改，改到最后自己都想死了。当时其实蛮羡慕公司的后端开发的，至少有基本的任务布置和前辈的指导。不过现在想起来，这未尝不是一件好事。
其实在技术方面，相比于3月份刚进公司，个人并没有感觉（也可能是无形中）。但是，自己的沟通能力确实提高了不少，至少不会像当初那样什么的不会主动去问（其实是刚刚进公司太羞射了~一 一+(＞﹏＜)）。话说越是大的公司沟通就越重要，虽然理论上讲，会有人告诉你该做什么、怎么做，但实际上，很多时候大家都会有自己的事，不太可能有很多时间。所以，更多的是需要自己去沟通，否则，最后吃亏的还是自己。而且，有时候小小的抱怨是ok的，但是没事就抱怨就是自己的问题了。
另外，最近发现无论怎么样都要学会保证项目的基本的质量。以前想做“老好人”，产品经理说什么时候交页面就什么时候交。现在就“变聪明了”，会尽量主动争取一点时间。产品经理的排期一般是以自己为准，他不会因为这个页面需要更复杂的结构或者这个地方代码需要更多的优化就给你更多的时间，他给你的排期很有可能就是页面有多大或者有几个。

但是作为前端开发，应该知道，不同的页面，精细程度是不一样的。如果要安排好排期，大致需要注意以下几点：

1. 越是精细的地方花的时间更多：很多时候大块大块的div一个float就搞定了，但是很有可能一个小图标的背景图或者两个垂直方向没对齐的文字需要花很多时间
2. 一定一定要留出至少半天的排期来解决一些“突发问题”：可能是某位同事来咨询一些前端的问题；可能是前几天前几个星期或者前几个月做的项目，突然需要你改点什么；也有可能是突然来了一个星的任务。这些问题如果没解决好，一方面项目质量会大打折扣，另外一方面整个人会压力很大
3. 最重要最重要的，有什么问题一定问。话说由于性格原因，很多程序员都不喜欢交流。而像我们这种经常需要异地沟通的公司，很多时候需要用语音软件。大部分人项目压力大，有时就不愿意语音，邮件又很纠结，所以会出现很多问题。不过想想也没什么，谁让我是客服呢~╮(╯▽╰)╭

HTML5 高亮 for editPlus

话说html5的标准已经出来很久了，但是做的项目一直都没有涉及，所以编辑器的高亮也没有更新……
这今天事稍微少了点，就上网搜了下stx文件，不过搜到了都不太让人满意，索性就自己在原来的基础上加。
找到html标签列表：http://www.w3school.com.cn/html5/html5_reference.asp
提取出html5的标签：

var t=document.getElementsByTagName('td');
for(var i=0;i<t.length;i++){
    if(t[i].className.search('new')!=-1){
        console.log(t[i].firstChild.firstChild.data);
    }
}

复制到编辑器里，把<和>去掉，然后在复制到之前的css.stx里面：
#KEYWORD=HTML5 Tags
article
aside
audio
bdi
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
track
video

大功告成。

纯css评分效果制作

这几天项目有点多，所以已经慢慢学会了“异步处理问题”了。昨天还在做一个促销的cms，今天就来了个页面评价的东西。先仔细看了下设计图，发现里面有好几个地方都是同一个模块：商品评价。有两种：一种是动态评价，一种是评价结果。话说之前，公司的评价都是直接用几个img拼起来的，这样貌似是一种很老派的方法。所以我这次改的时候，就尽量用了一些css小技巧（虽然只给了我一天班的时间，而且这个评分只是其中一个很小的模块）。

ui大致就是这样：

首先是评价结果：

把背景图先切出来（此图为evaBg.png）：

html&css：

<!--一星是stars_1以此类推 -->
<span class="stars_1"></span>

 .stars_1,.stars_2,.stars_3,.stars_4,.stars_5{display:inline-block;width:125px;height:24px;background:url('evaBg.png') no-repeat 0 -30px;vertical-align:-5px;}
.stars_1{background-position:-100px -30px;}
.stars_2{background-position:-75px -30px;}
.stars_3{background-position:-50px -30px;}
.stars_4{background-position:-25px -30px;}

这种写法应该是现在比较常见的写法，很简单，两点：

1. 总宽度固定
2. 通过移动背景图的位置，来达到不同显示

图问解释：
一颗星的时候显示最左边五颗星：

两颗星的时候图片相对初始状态左移25px（25px为星星的宽度）

———————没有margin-bottom，只有我这个分割线—————————

然后就是动态评价显示了，这个结构稍微复杂一点（背景可以用之前那个，节约资源~）：

<!--一星是stars3_1，两颗的为stars3_2，以此类推 -->
<div class="proSatis"> 
	<a href="" class="star3_1"><strong>1分 - 很不满意</strong></a> <!-- 这个是一星 -->
	<a href="" class="star3_2"><strong>2分 - 不满意</strong></a> <!-- 这个是两星 -->
	<a href="" class="star3_3"><strong>3分 - 一般</strong></a>  <!-- 这个是三星 -->
	<a href="" class="star3_4"><strong>4分 - 满意</strong></a>  <!-- 这个是四星 -->
	<a href="" class="star3_5"><strong>5分 - 非常满意</strong></a> <!-- 这个是五星 -->
</div>

.proSatis{width:125px;height:24px;position:relative;}
.star3_1,.star3_2,.star3_3,.star3_4,.star3_5{position:absolute;left:0;top:0;height:24px;}
.star3_1:hover,.star3_2:hover,.star3_3:hover,.star3_4:hover,.star3_5:hover,.proSatis .select{background:url('evaBg.png') no-repeat 0 -30px;text-decoration:none;}
.star3_1{width:25px;z-index:1500}		
.star3_2{width:50px;z-index:1400}
.star3_3{width:75px;z-index:1300}
.star3_4{width:100px;z-index:1200}
.star3_5{width:125px;z-index:1100;background:url('../images/evaBg.png') no-repeat -100px -30px;}

看上去有点复杂，但是其实蛮简单的：

1. 外层设置position:relative;，为里面的标签做相对定位的参考点
2. 每个a标签设置绝对定位，同时设置z-index，星级越小，z-index越高。
3. 动态效果，主要有两点，鼠标移上去：1 a出现背景图 2 a中的文字会出现在星星旁边
4. 同时，给五星的标签设置一个初始的背景图（这样默认显示的时候会有一个一星的效果）。

好吧，没有服务器可以上传静态页面，所以效果图暂时是没有了。

总结：
话说很多效果看上去复杂，其实很简单。

不会当客服的杂物工不是好前端

Scene 1：
改完bug，提交给开发：给.abc加一个属性，line-height:18px。这是背景。
同事：那个css里面有这个属性！！！
Me：那个冒号你用的是中文，请改成半角

Scene 2：
同事：把你写的那个js加进去以后，菜单就显示不了了。
Me：那个菜单在我加之前就显示不了了，我之前就发现了，以为你在调试，所以没有提。
同事：哦

Scene 3：
同事：你上次给我那个帐号密码用不了啊，你看，我输入了没效果
Me：不会啊，我用得蛮好的，我帮你看看
………………………………
Me：这个你复制是把后面的空格也复制了
同事：哦

Scene 4：
同事：这个页面都变形了
Me：我看看
………………
Me：你把那个css加载了两次

Scene 5：
同事：这个弹出页面出问题了
………………
Me：ajax加载成功后不应该显示弹出层，而是location到一个新页面

Scene 6：
同事：页面变形了
Me：css要用utf-8编码

————–border-bottom:1px solid #000—————–
其实作为前端，很多时候遇到的问题不仅仅是页面的制作或者bug的调试，更多的是他人抛来的问题。大部分的后台开发不懂，或者只懂一点前端知识，所以他们在遇到布局出现问题的时候，第一反映一般是：页面写错了。这是情有可缘的，貌似有的公司有专门的前端技术支持，但是一般的ued团队不可能说专门招一个。so，这个时候需要自己能在处理问题时更加的有耐心。不然，整个项目可能会因为你而被拖累。
很多时候，特别是在大公司，或许更重要的不仅仅是你的能力，而是你与他人的沟通能力。
So，我要加油。不会当客服的杂物工不是好前端。

去水垢记

今天喝水的时候发现杯子里有一些漂浮物,以为杯子不干净,于是把水倒掉,顺便洗了下杯子。用水壶再到一杯后，发现还是有漂浮物。于是意识到，应该给水壶去水垢了。
像以往那样，把醋倒进水壶，然后加热。可惜醋倒少了，导致最后烧干了……更让人郁闷的是，壶底留下了醋烧干的黑垢~额的神啊~
第一反应时用清洁布和清洁球擦干净，发现不仅没擦掉，反而在壶底留下了划痕。
后来因为肚子饿了，就先去吃饭了。回来后，突然看到之前公司内卖买的白醋,索性就放进去烧,果然有用.

话说自己平时学习相关技术也是这样，有时虽然知道怎么用，但是并没有深刻的了解其中的原因，导致下次遇到类似的问题，就不知所措了。

换个角度看页面

今天突然被后台开发找，说一个页面被QA打回来了，在ie6下左右栏不对其。
我跑过去，他就给我看，说右边那栏短了：

于是我让他等下，在自己的电脑上慢慢看这个页面的dom，但是看了半天都没发现右栏有什么问题。看着看着突然想：会不会是左栏的问题。果不其然，是左栏的div尾部有个form（用来传递hidden数据），而这个form有默认的margin。
于是，问题解决了。
很不好意思的又被开发夸奖，很高兴……

最近接触的不错软件

Fiddler 利用网络重点向功能，不使用虚拟环境就可以修改线上css
linkscape 可以画SVG的图

IE CSS Hack

其中，用得最多的是_(for ie 6)和*(for ie 6&7)