使用 dataset 模拟 jQuery toggle event

jQuery 有2个 .toggle(),1个是切换显示或隐藏,另外一个是切换2-3个 functions。但是在 jQuery 1.9 版他们移除了 toggle event

经过搜索一下,找到2个答案:
1)使用 jQuery 的迁移插件( jQuery Migrate plugin on Github)
2)使用 dataset

方法一不解释了,重点是方法二。

$('.selector').on('click', function() {
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'on') {
        $(this).attr('data-toggled', 'off');
        // do stuff when on
    } else if ($(this).attr('data-toggled') == 'off') {
        $(this).attr('data-toggled', 'on');
        // do stuff when off
    }
});

你们有更好的方法吗?

via stack overflow

IE 10 的条件注释

IE 10 不支持条件注释,我们还有什么办法做出只针对 IE 10 的样色。国外牛人想到用 useragent!

方法:用 JavaScript 把 useragent 添加到 html 这个元素里

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10 浏览器的用户代理字符串:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

结果:
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

接下来,我们只需要很简单的 CSS 样色:

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

注解:
*= 这个 CSS3 选择器[属性*=值]选择匹配的每一个元素,其属性值包含指定的值。

[via CSS-Tricks]

Firefox 几乎符合 CSS3 标准

目前的 Firefox 19 都支持很多 CSS3 的属性,而且他们都不需要添加 -moz 前缀(W3C 标准嘛)!以下的 CSS3 都不需要添加前缀:

  1. CSS Gradients
  2. CSS Repeating Gradients
  3. CSS3 3D Transforms
  4. CSS3 Transforms (这个是旋转、缩放)
  5. CSS3 Animation
  6. CSS3 Transitions
  7. rem (root em) units
  8. calc() as CSS unit value
  9. CSS3 Border-radius
  10. CSS3 Box-shadow (4.0 开始免前缀)

上面列表的属性,几乎从 Firefox 16 开始不需要添加 moz 前缀。

本文章只针对某些 CSS3 属性。

[via caniuse.com]

如何使用 Modernizr 加载额外JS库

Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

via Modernizr

下载 Modernizr 时可选择 yepnope.js。yepnope.js 有什么用呢?这个 javascript 库可以用来配合 Modernizr 的检验,然后加载额外的 js/css 文件。

Continue reading 如何使用 Modernizr 加载额外JS库