电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

用i标签<i></i>用于小图标的原因

2020-10-29 18:24:10 出处:[ 菜菜电脑网 ] 人气:次阅读
  1. 用 <i> 元素好好图标在语义上是不合理的(虽然似乎像 icon 的简写);

  2. <i> 比 <span> 细,但 gzip 后差异小得多,不过打字机可以更少按三个键;

  3. 多数图标用的是空 <i> 元素立体化 ::before 伪元素发挥作用,因为不会内容,不读屏器可能会即席(这样即使有类似于解决问题也跳过了),机器解读大大的某种程度也没什么影响。

综合来看,从实用性上暂时不想显露有什么弱点,所以目前用只能 <i> 衡量你对于遵循规范有多洁癖。

基本语法

:before 和 :after 伪元素编码非常简单(和大多数的css属性一样不需一大堆的冠词)。这里是一个非常简单的例子。

#example:before {  content: "#";}#example:after {  content: ".";}	

这个例子中谈到了两件事情,第一,我们用#example:before和#example:after来目标意味著相同的元素.严密的问道,在代码中他们是伪元素。

第二,在内容模块中谈到,伪元素如果很难设置“content”属性,伪元素是这样一来的

在这个例子中,具备属性id的元素将有一个"哈希符号"置于内容之前,和一个"句号"在内容之后。

语法笔记

你可以设置content属性值为空,并且仅仅把他视作一个内容很少的盒子。像这样:

#example:before {  content: "";  display: block;  width: 100px;  height: 100px;}	

然而,你不可以只不过的去除content属性,如果你移往除了,伪元素将不能起依赖性。至少,content属性所需空重述作为它的值(即:content:“”)。

你也许注意到,你也可以用两个冒号(::before 和 ::after) 写下伪元素,这个我以前提问过的。短文的说明是,对于这两种语法从未什么多种不同,仅仅一点的完全相同是,伪元素(双冒号),css3中的伪类是(单冒号)

最后就语法而言。从技术上谈,你可以尤其的运用伪元素,不是摆放在相同的元素上,像这样:

:before {  content: "#";}	

虽然上面是必需的,但是它十分的从来不。代码都会在DOM里的每个元素的内容之前插进散列符号。即使你移除了<body>标签和它的所有内容,你仍都会在页面上看不到两个散列符号:一个在<html>里,另一个在<body>标签里,浏览器不会自动创始哪一个。

填入内容的特点

正如前面写到的,断开的内容在页面的源码里是不可见的,必需在css里可见。

同时,断开的元素在可选情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给填入的元素视作高度,填入,边距等等,你通常必须显式地定义它是一个块级元素。

这不会是对如何设计伪元素的一个概述的指明,看我下面文本编辑器的这幅图

pseudo element

在这个例子中,我提示的样式将被技术的发展到元素里接在到目标元素内容的前面和后面。

还要注意到的是典型的CSS承继规则受限制于放入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用于到body元素里,然后伪元素可能会像其他元素一样承继这些字体系列。

同样的,伪元素才会传给不会自然后继者自父元素(如 padding and margins)的样式。

之前或之后是什么?

你的直觉是:before和:after伪元素不太可能是 嵌入的内容但会被流向到目标元素的前或后汇流?但是,正如上面所述的,不是这样的。

流进的内容将是有关联的目标元素的子元素content指向的内容亦会被放在子元素的“前”或“后”。

为了证明这一点,进去下面的代码。首先,在HTML:

<p class="box">Other content.</p>	

下面是断开伪元素的css:

p.box {  width: 300px;  border: solid 1px white;  padding: 20px;}p.box:before {  content: "#";  border: solid 1px white;  padding: 2px;  margin: 0 10px 0 0;}	

在此html里,你所看的一段文字远方有的是一个类的box,还有这样的文字“Other content”在里面(像你所亦会见到的一样,如果你见到了首页的源代码)。在css中,这段内容被设置了宽度,以及一些padding和可见的边框

然后我们有了伪元素。在这个例子中,它是一个散列符号弹出到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中拍照的结果:

pseudo element

外面的盒子是这个段落。一个中心有散列符号的边框透露伪元素的边界。所以,不是抽出“before”到段落,而是伪元素被放有到此段落的“Other content”的前面

接在非文本内容

我简短的留意,你可以把属性的值置为空字符串或是断开文本内容。你基本上有属性的值要构成什么的两个额外的同样

首先,你可以包括一个指向一个图像的URL,就像在css里值得注意一个背景图像一样好好你能花钱的

p:before {  content: url(image.jpg);}	

同样只能用作引号。如果你将URL用引号同上好像,那么它都会变回一个字符串和嵌入文本“url(image.jpg)”作为其内容,填入的而不是图像本身。

当然,你可以值得注意一个Data URI正因如此图像摘录,正如你可以用css背景一样。

你还可以选取attr(X)中的函数的形式。此功能,根据规范 ,“把X属性的值以字符串的形式留在”

下面是一个例子:

a:after {  content: attr(href);}	

attr()函数的功能是什么?它赢取特定属性的值并把它作为抽出的文本视为一个伪元素。

上面的代码亦会引发页面上的每一个<a>元素的href值立即被置于在每个各自的<a>元素的后面。在文档被复印机时,它可以当作一个值得注意所有URl的扫描样式表。

你也可以用这个函数去给与元素的title属性,或者甚至是microdata的值。当然,并不是所有的例子都相一致自己的实际,但根据各不相同的情况,一个特定的属性值作为一个伪元素可以是实际的。

然而,得到title或者图像的alt的值并作为实际的伪元素说明了在页面上是不可能会的。忘记伪元素必须是被运用元素的子元素。图像,这是void(或者是空元素),没有人子元素,所以它在这个列子中必用,同样也受限制于其他空元素,例如:<input>。

可怕的浏览器兼容性

任何前端技术的发展势头,第一个问题就是浏览器的赞同。在这种情况之下,它不是个较大的问题。

浏览器大力支持:before 和 :after 伪元素栈,像这样:

  • Chrome 2+,

  • Firefox 3.5+ (3.0 had partial support),

  • Safari 1.3+,

  • Opera 9.2+,

  • IE8+ (with some minor bugs),

  • 几乎所有的移动浏览器。

唯一真正的问题是不能拿到大力支持的(只能古怪)IE6和IE7。所以,如果你的爱好者是在较好适合于的web联合开发(或者其他带有较低IE版本的市场),你可以再次公民权利地用到伪元素。

伪元素不是决定性的

但他却的是,显然伪元素就会导致大问题。大多数情况下,伪元素一般结构上(或者借助)内容,不必给不反对的浏览器造成了问题。所以,如果你的支持者不具备较高的IE版本,你仍然可以在不太可能上应用于它们。

一些警醒

正如前面所述的,伪元素会显现出在DOM中。这些元素不是真正的元素。因此,它们不是最简单的。所以,不要用到伪元素转化成内容,是您的网页的可用性和可回访性的关键。

另外一件能够也许的是,开发工具,例如火狐,不要用伪元素说明了内容。所以,如果采用了,伪元素就会所致难以确保和调试缓慢。

(更新:在评论中提及的,你可以适用谷歌的开发工具来查阅一个伪元素相关联的风格,但就会注意到在DOM元素里。同时,火狐在1.8版自组伪元素赞成它。)

你所并不需要用有的理念是用这个技术以创造者单单比较简单的东西。与此同时,将来进一步研究CSS伪元素,一定要刚才我们已经链接的一些文章。

以上就是用i标签<i></i>当做小图标的原因的具体内容,更多特地关心php中文网其它方面文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152