从按钮看前端学习

——by zhangxinxu 2013-07-27

从众 牛顿与苹果

微博最重要的按钮

今儿个咱不黑不吹

新浪微博

——反例特供专业户

新浪微博按钮HTML

眼睛微博 →_→ 

<a href="javascript:void(0);"
   class="send_btn"
   title="发布微博按钮"
   tabindex="2"
   diss-data="module=stissue"
   node-type="publishBtn"
>发布</a>

看似简单，其实水很深

意识：HTML水很深

集思广益

→
<a href="javascript:void(0);"
class="send_btn" title="发布微博按钮" tabindex="2">发布</a>
  1. 为何使用a标签，换成span可否？
  2. 为何需要title, 不是多此一举？
  3. tabindex干嘛用的？
  4. "发布"二字似乎与图片内容重复了？

多反问，勤思考！

对比

腾讯微博按钮HTML

企鹅微博 →_→ 

<input type="button"
   class="sendBtn btnHasStr"
   title="广播 (快捷键 Ctrl+Enter)"
   tabindex="2"
   value="发送"
/>

a按钮 VS button按钮，孰优孰劣？

关注可访问性

  focusable clickable 无障碍阅读
span × × ×
span +
tabindex		 √ × ×
span +
tabindex +
role="button"		 √ × √
a √ √ ×
a +
role="button"		 √ √ √
button √ √ √

CSS

眼睛微博 →_→ 

background: url(xxx.png) no-repeat -133px -131px;
color: #FFFFFF;
display: inline-block;
font: 16px/30px Tahoma;
width: 82px; height: 30px;

text-align: center;
text-indent: -9999em;
outline-style: none;

企鹅微博 →_→ 

background: url(xxx.png) no-repeat 0 0;
color: #999999;
float: right;
line-height: 33px;
width: 85px; height: 27px;
cursor: pointer;
text-align: left;
text-indent: -9999em;
border: 0; outline: none;
overflow: visible;

记住：stay hungry,
stay foolish!

—任何时候，你的CSS一定可以变得更好！

我所知道的改进

1. 不要忘记你的背景色

不要忘记你的背景色

  1. CSS呈现顺序 >> 背景图片
  2. 总会存在网络抽筋的情况
  3. 总会存在静态服务器抽筋的情况
  4. 背景图片与功能分离原则
百度贴吧-海贼王吧
我的新浪微博首页
我的腾讯微博首页

不要忘记你的背景色

.send_btn {
    background: #f0f0f0 url(xxx.png) no-repeat -133px -131px;
}

但是，

按钮背景图放大16倍

新浪的

新浪按钮背景放大图

腾讯的

腾讯按钮背景放大图

可行的背景色处理方法

  • 边角的实色填充
  • 安全的背景色，如#f0f0f0
  • CSS3渐进增强

你有什么好方法吗？

工具

web developer工具条

我所知道的改进

2. outline - 可访问性与设计师间的权衡
设计师和前端之间的对话

态度决定一切

简单敷衍？ - or
寻求更佳解决之道？

outline最佳实践

我所知道的改进

3. 忽略的魔鬼 - text-indent:-9999em

9999em有多长？

9999 * 12 = 119988px;

惊恐的乔巴 尼玛近12万像素啊！！

性能问题

在低端的移动设备上，尤其有动画效果的时候。设备表示压力很大！直接卡……卡……卡……爆……爆……爆……了……

亚历山大

更好的实现

{
   text-indent: -150%;
   overflow: hidden;  /*原生按钮无需*/
}

您有更好的idea吗？

永不自满

学艺再精，亦有缺漏

还有其他？

高清iPad访问

Retina屏幕

高清iPad的设备像素比为2, 因此，这些设备访问微博页面，发表/广播按钮等都是略显模糊的。

腾讯微博首页200%显示

解决之道

@media only screen and (min-device-pixel-ratio: 1.5) {
   /* 当设备像素比不小于1.5的时候... */
  .btn { background:#f0f0f0 url(xxx@2x.png); }
}

或 CSS3.

Happy ending!
事实是……
Replay 成长动画

抱歉，我一直在误导

认清现实

@玉伯也叫射雕 前端目前最大的困境是，如 HTML 一样，无论你承不承认，市场上并不太需要 HTML 高手。

不是搞笑

请不要

  1. 花大把时间深入学习HTML/CSS
  2. 嘲笑别的网站的HTML/CSS垃圾，比方说12306.cn
  3. 自称“大牛/大神”或称别人“大牛/大神”

业务发展了，技术才能体现其价值

关注业务，80分万岁

总结

  • 技术敏感与好奇心
  • HTML没有看上去那么简单
  • 勤反问，多思考
  • 你的CSS代码一定可以更好
  • 关注可访问性
  • 对比
  • 善用工具
  • 性能
  • 权衡
  • 关心数据
  • 不要忽略了移动设备
  • 业务发展才是技术成长之根本

欢迎反馈

谢谢大家！