烈日骑行的豆知识

1、获取图片的平均颜色。
在网页图片未加载时，提供一个与图片近似的颜色作为背景是个不错的方法。
在 PS 中，直接将图片大小调整到 1×1，就可以得到该图片的平均颜色啦。

2、为动画元素强制打开 GPU 加速。
现如今页面上的动画效果越来越丰富，
为了更为平滑的效果与更佳的性能考虑，
我们应为参与动画的元素加上 translate3d()，
以强制开启 GPU 加速的支持。

.animation {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

3、position:fixed 与 transform:translate3d 的冲突。
这是 Webkit 核心一个很奇怪的 bug，当元素设定了 transform:translate3d，
此时它本身或其子辈的 position:fixed 会失效。
（特别留意是否由上一条导致）

4、禁用戴尔商务台式机的内置喇叭。
方法一：
1）在“设备管理器”中点击“查看”，并选择“显示隐藏的设备”。
2）展开“非即插即用驱动程序”，找到“Beep”。
3）右键“属性”，在“驱动程序”一栏，停止并禁止启动。
方法二：
如果以上方法不管用，请直接拔掉内置喇叭的电源线……

5、iOS 页面禁用电话拨打。
通过 Safari 支持的 Meta 标签实现。

<meta name="format-detection" content="telephone=no">

6、获取元素 transform 值。
当我们试图使用 jQuery 获取元素 CSS 的 transform 数值时，
实际上拿到的是其 matrix3d() 矩阵。
为了更加方便地使用数值，我们可以将其转为数组，再进行操作。

function matrixToArray(str) {
  return str.split('(')[1].split(')')[0].split(',');
}
matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']

7、向 $.when() 传递 deferred 数组。

var urls = ['#', '#', '#'];
  function loadJson(){
    var dfs = [];
    for(var i = 0; i < urls.length; i++) {
      dfs.push($.getJson(urls[i]));
    }
    return dfs;
  }
  var jsons = loadJson();
  $.when.apply($, jsons).done(function() {
    //do something
  });

8、使文件输入框仅能选择某种文件类型。
为 input 加上accept 属性即可，常见文件类型如下：

<input type="file" accept="application/pdf, application/vnd.ms-excel" /><!-- pdf/excel -->
<input type="file" accept="image/gif, image/jpeg, image/png" /><!-- image -->

可惜的是，兼容性还要再等等。

9、全屏背景视频。
注意：根据视频与容器的实际尺寸，
min-width、min-height、max-width、max-height可能需要调整。

0

10、修改视频地址后自动播放。
通过修改 video 的 source 标签的“src”属性，可以修改视频的播放地址，
但并不会自动切换到新视频进行播放，还需要 load() 一下：

$('video')[0].load();
$('video')[0].play(); //no need if set video to "autoplay"

【相关资料】
0、j j miller – beans◃flickr（题图）

【相关博文】

获取豆瓣 FM 红心歌曲信息 暴雨如注的豆知识 乍暖还寒的豆知识 石沉大海的豆知识