create-date: 2013-10-17
jQuery.support 对象中包含了一系列和浏览器特性或 bug 有关的判断。主要是 jQuery 内部使用,如果你需要类似的功能,官方文档推荐使用 Modernizr。
由于浏览器种类众多,实现不同,对规范的理解也不一致,这就导致了众多 bug 的出现,很长一段时间里,人们通过检测浏览器类别和版本(比如说 IE) 来处理一些常见问题,这称为浏览器嗅探(browser sniff)。再后来,人们又开始使用特征检测(feature detection),即检测你要使用的特性是否存在于目标浏览器中。
特征检测始终是你在处理跨浏览器编码时的首选方式,但这不意味着浏览器嗅探就变得毫无意义了,查看 Zakas 的这篇博客来了解更多内容。
support.js 中的代码在阅读上没有难度,所以接下来我主要是做个记录,看看每个属性都代表什么含义。
(我的机器上只有 IE 9,以下内容都是用 IE 9 模拟来测试。不过基本上某个版本有 bug,它的低版本也应该会有该 bug。)
getSetAttribute
这里检测了 get/setAttribute 的兼容问题,w3help 有篇文章介绍的很清楚:SD9006: IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现。
leadingWhitespace
IE 下使用 innerHTML 会忽略前面的空白。
自测 IE 8 以下有此问题。
tbody
IE 7 会自动向空 table 内插入 tbody 标签。
htmlSerialize
使用 innerHTML 不能生成 link 元素。(IE 8 以下)
style
IE 8 以下无法使用 getAttribute('style') 获取样式信息,只能用 cssText。
hrefNormalized
IE 7 以下会自动补全 a 的 href(如果 href 没有协议名)。
opacity
这个比较常见,IE 8 以下使用 filter 而不是 opacity 来设置透明度。
cssFloat
IE 8 以下使用 styleFloat 来替代 cssFloat。
checkOn
检测 checkbox/radio 的默认值,正确值为 "on",注释显示 Webkit 会显示 ""。但目前 chrome 已经显示正确。
optSelected
IE 中,默认选中的 option 的 selected 属性值为 false。(webkit 某些版本也是,目前为 true)
enctype
检测表单元素是否支持 enctype。
html5Clone
检测复制 HTML5 元素后 outerHTML 不会出错。
boxModel
已经废弃了。
noCloneChecked
使用 clone(true) 后,是否能够保留 checked 状态。IE 9 依然不能。
optDisabled
当 select 被 disabled 之后,其中的 option 不应该被 disabled。
deleteExpando
expando 不知道该如何翻译,但是它的行为你肯定知道:
var o = {};
o.test = 1;
对象 o 本来没有 test 属性,但我们直接为 o 的 test 属性赋值,这时候 test 属性就创建了。这个行为就称为 expando。
IE 8 以下,如果删除 DOM 对象上不存在的属性会引发异常(普通 JavaScript 对象没有问题)。
input
getAttribute("value") 是否有效。
radioValue
将 input 的类型转为 radio 后,它的 value 能否保留。
经过测试,firefox 和 chrome 都可以保留 value,而 IE 9 会输出 "on"。
appendChecked
脱离 DOM 树的 checkbox 能否保留原始状态。IE 6/7 下无法保留。
checkClone
fragment 复制之后,它包含的 checkbox 能否保持正确状态。注释说 Webkit 不会,但是目前的 chrome 已经可以了。反倒是 IE 7 不可以。
noCloneEvent
IE 8 及以下使用 clone(true) 会将事件拷贝。
Bubbles
包括三个属性:submitBubbles,changeBubbles,focusinBubbles。
对于 submit 和 change 事件,firefox、chrome、IE 9 都会冒泡,IE 8 不会。
对于 focusin 事件,firefox 目前不支持。chrome 不冒泡,IE 冒泡。
clearCloneStyle
对复制后的节点清除样式是否会影响到原始节点。测试时候没发现有浏览器出现该行为。
reliableHiddenOffsets
该属性只针对 IE 8,隐藏的表格单元的 offsetWidth/height 不为 0。
boxSizing
盒模型相关。box-sizing 可以使用 content-box(默认)和 border-box 来选择不同的盒模型。IE 6,7 不支持该属性。
使用 border-box 后,设置元素的 width 会包括 padding 和 border。
doesNotIncludeMarginInBodyOffset
IE 7 下,计算 body 的 offset 会包括 margin 值。
pixelPosition
样式设置使用了百分比,获得计算值的时候能否转成像素值。
boxSizingReliable
box-size 是否可靠?不太理解……搜了下源代码,css.js 中用了,到时候再看吧。
reliableMarginRight
WebKit Bug 13343 - getComputedStyle 返回了错误的 margin-right。
inlineBlockNeedsLayout
针对 IE < 8,判断当原生的块级元素设置 display 为 'inline' 并给与 layout 时是否表现的像 inline-block。
shrinkWrapBlocks
不太清楚。