《CSS世界》读书笔记（八）

<!-- 《CSS世界》张鑫旭著 -->

替换元素和非替换元素的距离有多远？

观点1：替换元素和非替换元素之间只隔了一个src属性！

在Firefox浏览器下，没有src属性的<img>表现和普通<span>类似，已经完全不是替换元素了。很好地证明了“如果图片没有替换内容，图片就是一个普通的内联标签”。、

Chrome浏览器其实有类似的表现，只是需要特定的条件触发，这个条件就是需要有不为空的alt属性值。例如：<img alt="任意值">。

上面两点都可以通过下面的css样式来验证：

img {
    display: block;
    outline: 1px solid;
}

我们会发现这个<img>宽度是100%于容器。

为何IE浏览器没有src属性的<img>还是替换元素呢？原因在于IE浏览器有个默认的占位替换内容，当src属性缺失时，会使用这个默认的占位内容，这也是IE浏览器下默认<img>尺寸是28×30而不像Chrome浏览器那样为0×0的原因所在。在高版本IE浏览器下，这个占位的替换内容似乎做了透明处理，但是在原生的IE8浏览器下，这个占位内容却全然暴露了。

另一个很好地证明“替换元素和非替换元素区别就在于src属性”的点是“基于伪元素的图片内容生成技术”，详见http://demo.cssworld.cn/4/1-2.php

从这个例子中可以看到图片src没有的时候，::before和::after可以生效，我们可以把alt属性值通过content属性呈现出来。当我们点击按钮给图片添加src地址时，图片变成了替换元素，原先都还支持的::before和::after此时全部无效，此时再hover图片，是不会有任何信息出现的。于是非常巧妙地增强了图片还没加载时的信息展示体验。

但是这种技术支持是有限制的。首先是兼容性问题，目前Chrome和Firefox等浏览器支持，IE浏览器不支持；其次，要想让Chrome和Firefox等浏览器生效，还有一些需要注意的技术点：

（1）不能使用content属性生成图片（针对chrome）

（2）需要alt属性并有值（针对chrome）

（3）不能有src属性（证明观点的关键所在）

（4）Firefox下，::before伪元素的content值会被无视，::after无此问题，应该与Firefox自己占用了::before伪元素的content属性有关。

观点2：替换元素和非替换元素之间只隔了一个CSS content属性

在Chrome浏览器下，所有元素都支持content属性，而其他浏览器仅在::before和::after伪元素中才有支持。

前面已经证明了没有src属性的<img>是非替换元素，但是如果我们用content属性给它生成一张图片，我们就会发现它和有src属性时的视觉效果一模一样。

img { content: url(1.jpg); }
<img>

如果图片原先有src地址，我们也可以使用content属性把图片内容置换掉，于是我们就能轻松实现hover图片变成另外一张图片的效果。例如：

<img src="laugh.png">
img:hover {
    content: url(laugh-tear.png);
}

实例地址：http://demo.cssworld.cn/4/1-4.php

但是content属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片时，所保存的还是原先src对应的图片。

 content与替换元素关系剖析

我们把content属性生成的对象称为“匿名替换元素”。

content元素生成的内容都是替换元素。

content属性生成的内容和普通元素内容有很多不同的特性表现：

（1）content生成的文本是无法选中、无法复制的，同时无法被屏幕阅读设备读取，也无法被搜索引擎抓取

（2）不能左右:empty伪类。:empty是一个CSS选择器，当元素里面无内容的时候进行匹配。

（3）content动态生成值无法获取。

.total::after{
    content: counter(icecream);
}

getComputedStyle方法可以获得计算样式，但是在这里得到的支持纯粹的content在CSS文件中的属性值。例如：

 var dom = document.querySelector(".total");
 console.log(window.getComputedStyle(dom,"::after").content);

得到的是“counter(icecream)”，而不是具体的数值。

等等……