《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)”,而不是具体的数值。
等等……
《CSS世界》读书笔记(八)的更多相关文章
- 《Android源代码设计模式解析与实战》读书笔记(十七)
第十七章.中介者模式 中介者模式也称为调解者模式或调停者模式,是一种行为型模式. 1.定义 中介者模式包装了一系列对象相互作用的方式.使得这些对象不必相互明显作用.从而使它们能够松散耦合.当某些对象之 ...
- 《Android源代码设计模式解析与实战》读书笔记(十四)
第十四章.迭代器模式 迭代器模式,又叫做游标模式.是行为型设计模式之中的一个.我们知道对容器对象的訪问必定会涉及遍历算法.我们能够将遍历的方法封装在容器中,或者不提供遍历方法,让使用容器的人自己去实现 ...
- 《Android源代码设计模式解析与实战》读书笔记(十)
第十章.解释器模式 解释器模式是一种用的比較少的行为型模式.其提供了一种解释语言的语法或表达式的方式. 可是它的使用场景确实非常广泛,仅仅是由于我们自己非常少回去构造一个语言的文法,所以使用较少. 1 ...
- 《Android源代码设计模式解析与实战》读书笔记(二十)
第二十章.适配器模式 适配器模式是结构型设计模式之中的一个,它在我们的开发中使用率极高,比方ListView.GridView以及RecyclerView都须要使用Adapter. 1.定义 适配器模 ...
- 《Android源代码设计模式解析与实战》读书笔记(十八)
第十八章.代理模式 代理模式也称托付模式,是结构型设计模式之中的一个.是应用广泛的模式之中的一个. 1.定义 为其它对象提供一种代理以控制对这个对象的訪问. 2.使用场景 当无法或不想直接訪问某个对象 ...
- 《Android源代码设计模式解析与实战》读书笔记
1.定义 将对象组合成树形结构以表示"部分-总体"的层次结构,使得用户对单个对象和组合对象的使用具有一致性. 2.使用场景 (1)表示对象的部分-总体层次结构时. (2)从一个总体 ...
- 《Android源代码设计模式解析与实战》读书笔记(八)
第八章.状态模式 1.定义 状态模式中的行为是由状态来决定,不同的状态下有不同的行为.当一个对象的内在状态改变时同意改变其行为,这个对象看起来像是改变了其类. 2.使用场景 1.一个对象的行为取决于它 ...
- 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式
断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...
- R语言实战读书笔记(八)回归
简单线性:用一个量化验的解释变量预测一个量化的响应变量 多项式:用一个量化的解决变量预测一个量化的响应变量,模型的关系是n阶多项式 多元线性:用两个或多个量化的解释变量预测一个量化的响应变量 多变量: ...
- iPhone与iPad开发实战读书笔记
iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...
随机推荐
- ios原生项目内嵌u3d工程
本文一反常态,目标是把u3d工程以framewWork形式 内嵌原生IOS项目 1.xcode中新建Cocoa Touch FrameWork.取名u3dFrameWork 2.把u3d导出的xcod ...
- 《转载》强大全面的C++框架和库推荐!
C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...
- 管理菜单 结贴回复 来自 202.112.36.253 的回复: TTL 传输中过期
发表于 2010-08-26 18:29:14 楼主 其实标题是我执行如下命令时的输出:C:\Users\ChenWeiguang>ping 218.198.81.190 正在 Ping 218 ...
- python set和get实现
import math class Square: # 正方形 def __init__(self, l): self.length = l # 边长 def __setattr__(self, ke ...
- pandas replace 替换功能function
list like replace method dict like replace method regex expression import pandas as pd import numpy ...
- R 544
F2: 什么dfs根本不会啊,只会瞎贪心... 我们考虑先连哪些边,对于u,v两个点,如果u,v所在的联通块都与1相连的话,那我们肯定先不连这种边吧. 因为太亏了啊... 总而言之我们要在不影响答案的 ...
- 遍历文件,读取.wxss文件,在头部添加一条注释
change.pl #!/usr/bin/perl use autodie; use utf8; use Encode qw(decode encode); use v5.26; my $path = ...
- python3 中 Event.wait 多线程等待
event.wait(time) 等待 time 时间后,执行下一步.或者在调用 event.set() 后立即执行下一步. event.clear() 清除信号 event.set() 设置信号 ...
- python 链表表达式 map、filter易读版
链表推导式 [x for x in x] 链表推导式提供了一个创建链表的简单途径,无需使用 map(), filter() 以及 lambda.返回链表的定义通常要比创建这些链表更清晰.每一个链表推导 ...
- HttpRequest获得服务端和客户端的详细信息
参考文档:http://blog.csdn.net/u012104100/article/details/43051301 http://blog.csdn.net/u011162260/articl ...