当前位置：一起CSS
分类：CSS
DropKick 是一个下拉框美化插件，使用非常简单，直接为下拉框 select 调用方法即可，瞬间让你摆脱繁琐。DropKick 有 3 种主题，你可以选择一种与你的页面更加搭配的，当然你也可以自己定义 CSS。
DropKick 支持键盘上下选择；支持回调，可以轻松的获取 value 值。
DropKick 不支持 IE6，但会显示下拉框默认的样式，不影响页面使用；而其他的浏览器都支持。DropKick 暂时不支持 optgroup，会被忽略。如果你不需要考虑 IE6 和不需要使用 optgroup，那 DropKick 是一个很好的选择。
分类：前端技术
网站的速度是不能掉以轻心的，特别是因为它对 SEO 的影响很大。为了帮你解决这个问题，今天我们收集了 8 个测试网站速度的免费工具。这些工具中，有的会提出一些提高网站速度的建议，有的会告诉你加载速度的详细信息和其他一些信息，所以，一定要试试这些工具。
PageSpeed Insights 是 Google 出品的一款工具，它能在线分析页面内容，生成提高网站速度的建议。同时它还有一款基于 Fierbug 的插件 PageSpeed，可以下载安装。
分类：CSS
W3C CSS 工作组于4月10日发布了 CSS Variables Module Level 1 首个草案。CSS Variables 是什么呢？很明显，Variables 是变量，CSS Variables 就是 CSS 变量。
只要有点开发经验的人都知道定义变量是非常有用的，所以在 CSS 中如果在样式表中经常使用某个值（比如某个颜色或某种字体），可以将其定义为变量，修改样式表时只需更改该变量的值，就更新整个样式表，而无需逐个更改每个样式规则。
CSS Variables 的定义必须以“var-”开头，后面直接跟变量名，然后是属性值，如“var-fontColor:#333”，“fontColor”就是变量，可以在需要的时候以“var(fontColor)”引用。如：
:root {
var-fontColor:#333;
}
body {
color:var(fontColor);
}
由于变量名可以任意命名，所以如果您根据具体情况命名的话，那么样式表就会显得更有"语义"，就更容易阅读。
如果一个变量的属性被声明多次，则会根据 CSS 选择器的权限对应应用。如：
:root { var-color:blue;}
div { var-color:green;}
#alert { var-color:red;}
* { color:var(color);}
<p>我继承根元素，是蓝色的</p>
<div>我应用div规则，是绿色的</div>
<div id='alert'>
我应用 #alert 规则，是红色的
<p>因为继承 alert，所以我也是红色</p>
</div>
更多关于 CSS Variables 的介绍你可以查看官方草案：http://www.w3.org/TR/css-variables/。由于还是草案，所有规则都有可能更改或替换，您也可以提交关于功能和语法上的反馈。有兴趣的话多注意官方的消息吧。
前两天一个同事跟我说页面上有个问题：一个有滚动条的显示、隐藏 div 在 IE 8、IE 9 里每次重新显示的时候，滚动条总是跑回顶部。我查看源码，看到那东东上赫然出现了刺眼的 onmouseover 、onmouseout，我最不喜欢这里出现在这些了（作为前端开发者，你懂得！），第一印象可能是这里的问题。好吧，我改写一下。然而，当我把分离、简洁、可读性强的代码放上去后，依然是老样子。你可以用 IE 8 或 IE 9 查看这个 Demo。
莫非真的是我的样式引起的？经过再次检查以及在单独的页面测试下，最终得知是 IE 8、IE 9 的问题。当一个元素设置 display:none 后，scroll（scrollHeight、scrollLeft、scrollTop、scrollWidth）属性值变为 0，再设置为 display:block 后，元素的 scroll 属性值会变回设置 display:none 之前原本的值，但 IE 8、IE 9 却没有变回原有的值，依然是 0，所以就出现了滚动条跑回顶部这样的问题（即 scrollTop 值为 0）。使用 IE 9 的“开发人员工具”可以查看元素的 scroll 属性值的变化，如下图：
分类：前端技术
表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML 5 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。
| 类型 | 类型名称 | 功能描述 |
|---|---|---|
| color | 颜色选择器 | 输入颜色值的文本框 |
| date | 日期选择器 | 输入日期的文本框 |
| datetime | 日期时间选择器 | 输入 UTC 日期和时间的文本框 |
| datetime-local | 日期时间选择器（本地） | 输入本地日期和时间的文本框 |
| month | 月份选择器 | 输入月份的文本框 |
| time | 时间文本框 | 输入时间的文本框 |
| week | 周选择框 | 输入周的文本框 |
| 邮件输入框 | 输入 E-mail 地址的文本框 | |
| number | 数字输入框 | 输入数字的文本框，可以设置输入值的范围 |
| range | 数字滑动条 | 通过拖动滑动条改变一定范围内的数字 |
| search | 搜索输入框 | 输入搜索关键字操作的文本框 |
| tel | 电话号码输入框 | 输入电话号码 |
| url | Web 地址输入框 | 输入 URL 地址的文本框 |