Advanced CSS3: pseudo-icons made of HTML5 div Elements
CSS3 技术利用 HTML5 div 元素生成紧凑的伪图形
引言
这种先进的 HTML5/CSS3 技术曾在物联网（IoT，即“万物互联”）竞赛提交的文章《enRoute：纽约市实时公交跟踪 Web 应用》[1] 中被简要讨论过，该文章描述了一个实时纽约市公交监控 Web 应用。
紧凑、可扩展且灵活的解决方案
由于城市公交跟踪应用 [1] 的实时性，最大程度地减少 Web 数据流量（入站/出站）至关重要，因此非常希望避免使用任何图形文件，并将数据通信仅限于文本。正如一句古老的谚语所说：“一图胜千言”，但它也重达数千字节（这部分被省略了）。即使是高度压缩的格式，图像文件也可能比整个文本通信数据包大一个数量级或更多。
理想情况下，实时数据通信交换应仅包含文本；不向客户端传输图形文件。为了实现一些美学增强，某些图形图像可以作为 Unicode 字符提供：使用它们将以最佳方式解决问题。如果没有合适的 Unicode 字符可用，另外两个选项将是创建自定义图形图像文件（从大小/灵活性角度来看不佳），或者应用高级 CSS3 技术，该技术在许多情况下能够产生令人满意的紧凑型伪图标图形增强。与使用图形文件相比，通过 CSS3 语句（而不是图像编辑）实现的“可扩展性和易于修改性”是该方案的附加优势，如下文所述。
背景
下面展示了用于为实时城市公交跟踪应用程序 [1] 生成公交车伪图标的原始 CSS 技术
列表 1. 由 HTML5 div 和 CSS3 制成的公交车“伪图标”（原始解决方案）
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUS ICON</title>
<style type="text/css">
/* BUS ICON: SIZE 16PX, COLOR-BLUE */
.b16 {
width:12px;
height:14px;
border-top: 2px solid #000099;
border-left: 2px solid #000099;
border-right: 2px solid #000099;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background:#f0f0f0;
}
.b16 .b {
width:100%;
height:4px;
margin-top:4px;
border-top: 2px solid #000099;
border-bottom: 2px solid #000099;
background:#ffff00;
}
.b16 .b .bb {
background:#000099;
width:6px;
margin:0 auto;
height:4px;
}
</style>
</head>
<body>
<!-- BUS ICON 16px -->
<div class="b16"><div class="b">
<div class="bb"></div></div></div>
</body>
</html>
与列表 1 对应的“CSS3 合成”的公交车伪图标如下所示
图 1：由 HTML5 <div> 元素和 CSS3 样式技术制成的公交车伪图标
可以通过这一行简单的代码将所需的公交车伪图标添加到 HTML5 文档中
<div class="b16"><div class="b">
<div class="bb"></div></div></div>
除了数字占用空间小之外，这种紧凑的解决方案还提供了与图形文件相比的巨大灵活性：可以通过仅修改 HTML5/CSS3 中的几行代码来轻松更改颜色主题和整体外观，而无需在每次需要更改时进行图像编辑。该技术通过高级使用 CSS3 的 :before 和 :after 伪元素进一步扩展。
Using the Code
下面列表所示的是允许通过使用 :before 和 :after 伪元素来创建公交车“伪图标”的优化 CSS3 样式技术
列表 2. 公交车伪图标：带 CSS3 伪元素的 HTML5 div （更优化的解决方案）
/* BUS ICON, HEIGHT 12PX */
.b12
{
width : 8px;
height : 10px;
border-top : 2px solid #000099;
border-left : 2px solid #000099;
border-right : 2px solid #000099;
border-top-left-radius : 3px;
border-top-right-radius : 3px;
background : none;
display : inline-block;
vertical-align : middle;
}
.b12:before
{
content :'';
display : block;
height : 2px;
margin-top : 3px;
border-top : 2px solid #000099;
border-bottom : 2px solid #000099;
background : #ffff00;
}
.b12:after
{
content :'';
display : block;
background : #000099;
width : 4px;
height : 4px;
margin : -5px auto;
}
/*circle to use w/b12*/
.b12C
{
width : 18px;
height : 18px;
line-height : 16px;
vertical-align : middle;
text-align : center;
border-radius : 12px;
border : 2px solid #000099;
background : #fafafa;
}
与列表 2 对应的公交车伪图标可以添加到 Bing 地图或任何 HTML5 文档中，只需一行简单的代码
<div class='b12'></div>
或者，包含在圆圈中
<div class='b12C'><div class='b12'></div></div>
建议的技术为图形文件提供了一种灵活且相当紧凑的 CSS3 替代方案。下面的演示截图链接到了使用所述技术的实时全功能 Web 应用。
演示
下面实时城市公交跟踪 Web 应用的示例截图显示了上面列表 2 中描述的高级 CSS3 技术生成的公交车 伪图标。点击图片链接即可查看实时纽约市公交跟踪应用的现场演示
灵活性和可扩展性
伪图标解决方案是可扩展的，并且易于定制：例如，可以通过 CSS 样式表中的几行代码轻松更改颜色主题，如下面的列表 3 所示（HTML5+CSS3 封装在单个文件中）
列表 3. 公交车伪图标，灵活的 HTML5/CSS3 解决方案
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED HTML5/CSS3: BUS PSEUDO-ICONS MADE OF DIV</title>
<style type="text/css">
/* BUS PSEUDO-ICON, HEIGHT 1EM */
.b1
{
display : inline-block;
vertical-align : middle;
width : 0.8em;
height : 0.8em;
border : 0.2em solid;
border-bottom : none;
border-radius : 0.3em 0.3em 0em 0em;
}
.b1:before
{
content :'';
display : block;
height : 0.2em;
padding : 0;
margin-top : 0.25em;
border-top : 0.15em solid;
border-bottom : 0.15em solid;
}
.b1:after
{
content :'';
display : block;
width : 0.4em;
height : 0.4em;
margin :-0.4em auto;
}
/*bus icon color*/
.b1, .b1:before { border-color: #000099; }
.b1:after {background : #000099; }
/* BUS PSEUDO-ICON, HEIGHT 2EM */
.b2
{
display : inline-block;
vertical-align : middle;
width : 1.7em;
height : 1.7em;
border : 0.3em solid;
border-bottom : none;
border-radius : 0.4em 0.4em 0em 0em;
}
.b2:before
{
content :'';
display : block;
height : 0.4em;
margin-top : 0.6em;
border-top : 0.3em solid;
border-bottom : 0.2em solid;
}
.b2:after
{
content :'';
display : block;
width : 0.9em;
height : 0.8em;
margin :-0.8em auto;
}
/*bus icon color*/
.b2, .b2:before { border-color: darkgreen; }
.b2:after {background : darkgreen; }
/*optional: headlights color*/
.b2:before { background : Yellow;}
</style>
</head>
<body>
<table>
<tr>
<td>Bus pseudo-icon, 1em, blue w/white headlights</td>
<td><div class="b1"></div></td>
</tr>
<tr>
<td>Bus pseudo-icon, 2em, green w/yellow headlights</td>
<td><div class="b2"></div></td>
</tr>
</table>
</body>
</html>
该解决方案使用 CSS3 'em' 单位以获得更好的可扩展性。可以通过以下两行轻松更改公交车伪图标的颜色
/*bus icon color*/
.b2, .b2:before { border-color: darkgreen; }
.b2:after {background : darkgreen; }
可选地，可以通过以下方式使用 CSS3 属性指定前灯颜色
/*optional: headlights color*/
.b2:before { background : Yellow;}
相应的示例截图如下
图 3：公交车伪图标示例截图
关注点
我对于探索高级 CSS3 样式技术看似无限的可能性感到非常兴奋，这在数据流量/数据包大小相当关键的实时 Web 应用中尤其重要。更多关于此主题的信息请参阅我之前的文章/技巧 [2,3]。
实际考量
出于教学目的，整个解决方案（请参见列表 3 中的代码片段）被封装在一个 HTML 文件中，其中 CSS 样式表结构为了更好的可读性而使用了制表符/空格和额外的注释。对于此解决方案的生产级实现，有几个重要的实际考量。首先，可以删除所有注释和额外的制表符/空格，以进一步减小总体大小。此外，将文件拆分为两个是相当重要的：提供内容的 HTML 文件和一个通过 link rel 语句包含在主文件中的 CSS 文件，如下面的列表 4a,b 所示
列表 4a：HTML 文件
<!DOCTYPE html>
<html>
<head>
<title>ADVANCED HTML5/CSS3: BUS PSEUDO-ICONS MADE OF DIV</title>
<link rel="stylesheet" type="text/css" href="BusIcon.css" />
</head>
<body>
<table>
<tr>
<td>Bus pseudo-icon, 1em</td>
<td><div class="b"></div></td>
</tr>
<tr>
<td>Bus pseudo-icon, 2em</td>
<td><div class="b" style="font-size:2em;"></div></td>
</tr>
</table>
</body>
</html>
列表 4b：单独文件中的 CSS 样式表
/******************************************************************************
Module : BusIcon.css
Description : Bus pseudo-icon CSS3 style sheet
-------------------------------------------------------------------------------
Author : Alexander Bell
Copyright : 2015 Infosoft International Inc
******************************************************************************/
.b
{
display : inline-block;
vertical-align : middle;
width : 0.8em;
height : 0.8em;
border : 0.2em solid;
border-bottom : none;
border-radius : 0.3em 0.3em 0em 0em;
}
.b:before
{
content :'';
display : block;
height : 0.2em;
padding : 0;
margin-top : 0.25em;
border-top : 0.15em solid;
border-bottom : 0.15em solid;
}
.b:after
{
content :'';
display : block;
width : 0.4em;
height : 0.4em;
margin :-0.4em auto;
}
/*bus icon color*/
.b, .b:before { border-color: #000099; }
.b:after {background : #000099; }
程序关注点分离，即内容（HTML）与表示层（CSS）是众所周知的编程范例，在这个用例中尤为重要。主要的 Web 浏览器实现了高效的缓存技术，因此外部 CSS3 文件（列表 4b）通常会在第一次请求时被缓存，从而减少 Web 流量并提高后续数据请求的性能。
如上所述，所提议解决方案的另一个优点在于其灵活性/可扩展性：只需指定一个伪图标 CSS3 样式即可，可通过代码轻松修改，例如所示。为了增加公交车伪图标的大小（例如，使其成为基础大小的 2 倍），只需将 font-size:2em; 应用于容器 div 元素：这可以在主 HTML 文件中完成（此处为教学目的），或者在外部 CSS 文件中完成，后者更适合生产发布。
可能的替代方案
如前一小节所述，最佳情况是使用 ASCII 或 Unicode 字符（如果存在合适的字符）。否则，这种高级 CSS3 技术是一种提供相当紧凑、灵活和可扩展的解决方案的选项。其他替代方案也存在，特别是评论线程中讨论的那些。第一个使用高度压缩图形图像/文件的建议缺乏灵活性/可扩展性，并且在处理图像编辑方面增加了大量劳动。使用 Canvas 绘图是另一个建议的替代方案，它也缺乏任何实质性优点：它需要额外的 JavaScript 并且会引发 Web 浏览器兼容性问题。除了这些建议之外，似乎 SVG 可以成为这种基于 CSS3 的伪图形解决方案的有效替代方案（SVG 主题将在单独的技巧中介绍）。
历史
- 2015 年 3 月：按照 [1]（竞赛文章）的描述发布了第一个解决方案草案
- 2015 年 4 月：将高级 CSS3 技术应用于原始代码，以生成更灵活/紧凑的解决方案
- 2015 年 4 月：添加了另一个示例代码，提供了更高的灵活性（使用“em”单位和简化的 CSS3 颜色主题）
- 2015 年 5 月：添加了与生产级解决方案相关的代码和指南。