[注解] [607] 交互式的图片对比控件

[cssmagic]

花絮与注解

第 169 页 ‧ 第二个代码块

range.oninput = function() {...}

这一段在 JS 代码中，作者为简化代码，采用 .oninput 这样事件处理属性来绑定事件处理函数。需要提醒大家的是，这种写法在实际开发中应该杜绝。

具体原因请参考这篇文章：《前端进阶之路：点击事件绑定》。

第 169 页 ‧ 侧栏的 “小提示” 区块

如果用 input:in-range 来代替简单的 input 选择符，就可以只在浏览器支持范围输入控件时才对它设置样式。进而可以利用层叠机制把它在旧版浏览器下隐藏掉或设置为其他样式。

如果浏览器不支持范围输入控件，会发生什么？如果浏览器不支持范围输入控件（type="range"），则会把它当作普通的文本输入框（type="text"）来对待——这也算是 HTML 的一种回退机制。此时，范围输入控件会被浏览器渲染为一个文件输入框，在这种情况下，我们显然不能把它暴露出来。

因此作者在这里提示我们做好善后工作。这里的 input:in-range 就像是一种特性检测，可以把浏览器区分为两类，然后针对它们分别设置样式。

这里对 input:in-range 选择符的运用堪称巧妙。对于范围输入控件来说，它的值总是在合法的范围内（因为你无法把滑块拖到滑轨的范围之外），这个伪类选择符总是会选中范围输入控件。

另外，你可能会问，这里用 input[type="range"] 选择符可以起到相同的作用吗？其实并不行。因为不论浏览器在 HTML 层面是否支持范围输入控件，只要它在 CSS 层面支持属性选择符，就总是可以匹配到 <input type="range"> 这个元素。所以这个选择符起不到特性检测的作用。

第 170 页 ‧ 第一段

这个范围输入控件只是随便放在图片下面而已……我们需要用一点 CSS 来把它定位到图片之上，并让它与图片一样宽：

...
left: 0;
...
width: 100%;
...

既然已经是绝对定位了，那在把滑块控件设置为跟图片等宽时，为什么不用 left: 0 加 right: 0，而用 width: 100%？

因为替换元素拥有它自己与生俱来的宽度和高度（比如图片元素就是它自己的宽高，而输入控件的天生宽高大多是由浏览器的渲染引擎或默认样式来决定的），我们无法用 left: 0 加 right: 0 来把它拉伸为包含块的宽度，而必须用 width: 100% 显式指定。

第 170 页 ‧ 第二段

一些私有的伪元素可以为这个滑块控件进一步设置样式，比如 ::-moz-range-track、::-ms-track、::-webkit-slider-thumb、::-moz-range-thumb 和 ::-ms-thumb 等。

滑轨和滑块总是成对出现的，因此原文缺了一个 ::-webkit-slider-runnable-track。

相关资源：

• http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
• https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
• http://codepen.io/collection/DgYaMj/