整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

是时候拯救我的 HTML 技术了

JavaScript、CSS 相比,HTML 经过三十多年的发展,似乎逐渐走进无人问津的角落,如何才能让 HTML 再次回到人们视野的中心。

作者 | Yaser Adel Mehraban

译者 | 谭开朗,责编 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下为译文:

有多少次,身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?

为什么

HTML一直处于无人问津的角落,因为JavaScript和CSS总是吸引人们的注意力。

请在脑海里先保留这种印象,因为我要用一些简单的技巧来发挥作用,让HTML再次回到人们视野的中心。

以下是创建一目了然、可维护和可扩展的代码的一些方法,其很好的应用了HTML5的语义标记元素,并将在支持的浏览器中正确呈现。

其缘由就不赘述了,让我们来看看具体是什么吧。

文档类型

在index.html的顶部位置,请确保声明了DOCTYPE。这将在所有浏览器中激活标准模式,并告知浏览器该如何编译文档。请记住DOCTYPE不是HTML元素。

HTML5是这样的:

<!DOCTYPE html>

注意:如果应用了框架,这已预先写好。如果没有,我强烈建议使用像Emmet这样的代码片段,它在VS代码中可用。

了解更多关于其他文档类型的信息吗?点击这里查看参考文件:https://html.com/tags/doctype/。

可选标签

有些标签在HTML5中是可选的,主要是因为元素是隐式呈现的。信不信由你,你可以省略<html>标签,而页面呈现得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一个有效的HTML,但在某些情况下就不能这样做了。例如标签后面跟着注释:

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是无效的,因为注释位于<thml>标签之外,解析树发生了更改。

结束标签

应始终记得结束标签,否则某些浏览器在呈现页面时会出现问题。出于可读性和其他原因,建议保留这些内容,稍后我会详细介绍。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的标签,但也有一些特例,如下。

自闭合标签是有效的,但不是必需的。这些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永远不能有自闭合标签。

<title />

上面显然是无效的。

字符集

预先定义字符集。最好是将它放在顶部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是无效的,标题无法正确呈现。正确写法是将字符集移到顶部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

语言

不忽略可选标签的另一个原因是在使用属性时。在这种情况下,我们应该定义web页面的语言,这对于可访问性和搜索非常重要。

<html lang="fr-CA">
...
</html>

标题

永远不要忽略标题标签,否则可访问性太差了。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示)。

base标签

这是一个非常有用的标签,应该谨慎使用。它将设置应用程序的基本URL。一旦设置好,所有链接都将相对于这个基本URL,这可能会导致一些不必要的行为:

<base href="http://www.example.com/" />

通过以上设置,href="#internal"将被编译为href=http://www.example.com/#internal。或者href="example.org"将被编译为href="http://www.example.com/example.org"。

描述

这个meta标签非常有用,尽管严格来说它不是最佳写法。但在搜索引擎时,这是超级有用的。

<meta name="description" content="HTML best practices">

这有一个帖子“搜索引擎优化正盛行”:https://yashints.dev/blog/2019/06/11/seo-tips。

语义标签

虽然可以使用div创建UX工程师的线框,但这并不意味着必须这样做。语义HTML为页面提供了意义,而不单纯是内容显示。像p、section、h{1-6}、main、nav等标签都是语义标签。如果使用p标签,用户将知道这表示一段文本,浏览器也知道如何展示它们。

语义HTML超出了本文的范围。但是我们应该进行检查,就好比写作所用的笔,而我们有鼠标。

hr不应该用于格式化

<hr>不是格式化元素,所以不要用它来格式化内容。在HTML5中,这个标签代表了内容的主题分离。正确的用法是这样的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>

使用title属性时要小心

title属性是一个功能强大的工具,它可以帮助阐明页面上元素的操作或目的,比如工具提示。但是,它不能与图像上的alt等其他属性互换。

HTML 5 规范道:

目前不鼓励依赖title属性,因为很多用户代理不按照规范的访问方式来暴露该属性(例如,使用鼠标等设备来唤出提示框,而不包括只用键盘或触控键盘的用户,或者现代手机或平板电脑)。

请阅读有关如何正确使用此属性的更多信息:https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

单引号或双引号

我见过的许多代码库,他们的标记中混合了这两种形式。这并不好,特别是当你使用一个依赖于单引号的框架时,比如php,当你在一个句子中使用单引号时,就像我现在做的一样。另一个原因是保持一致,这总是好的。不要这样写:

<img alt="super funny meme" src='/img/meme.jpg'>

而写为:

<img alt="super funny meme" src="/img/meme.jpg">

省略布尔值

当涉及到属性的布尔值时,建议省略,因为它们不添加任何值,还会增加标记的权重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead -->

<audio autoplay src="podcast.mp3">

省略类型属性

不需要向scriptand样式标签添加type属性。某些服务(如W3C的标记验证工具)还会出现验证错误。

验证标记

可以使用W3C的标记验证等服务以确保有效的标记。

拒绝内联样式

HTML中写的是内容,其如何展示取决于样式。将展示形式留给CSS吧,不要使用内联样式,这将有利于开发人员和浏览器理解你的标记。

总结

这些只是编写标签时要记住的冰山一角。还有很多很好的资源可以让你深入了解,强烈建议你重复阅读。

  • 《GitHub HTML最佳实践》:https://github.com/hail2u/html-best-practices

  • 《W3C School HTML样式指南》:https://www.w3schools.com/html/html5_syntax.asp

希望你喜欢本文,并能写出优雅的标签。

原文:https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文为 CSDN 翻译,转载请注明来源出处。

【END】

天小编给大家带来了一本适用于web前端开发各个阶段的超级好书——《响应式web设计》pdf电子版。文末附获取方式

本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术,比如媒体查询、流式布局、弹性媒体和弹性字体等,还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中,比如移动先行(Mobile First)、渐进增强、平稳退化、无障碍设计等。更加难得的是,本书以设计跨屏幕的网页(响应式设计)为出发点,以点带面,把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中,读者在掌握先进设计方法的同时也能掌握最新的设计技术(比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频,以及CSS3的新选择器、特效、过渡、变形和动画等),从而可以免除重复学习新标准之苦,让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计,还是学习HTML5和CSS3的实际应用,本书都能满足你的需要,是毋庸置疑的明智之选。

说到底,响应式Web设计并非一门独立的技术,而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员,翻阅本书也有助于理清自己的知识脉络,对这个新的设计理念获得更全面、深入的理解和把握。

目录

第1章 HTML5、CSS3及响应式设计入门 1

1.1 为什么智能手机很重要(而老版的IE不再重要) 2

1.2 响应式设计一定是最佳选择吗 3

1.3 响应式网页设计的定义 3

1.4 为什么要在响应式设计上停滞不前 4

1.5 响应式网页设计示例 4

1.5.1 下载视口调试工具 4

1.5.2 在线创意源泉 11

1.6 为什么HTML5很优秀 12

1.6.1 省时省力 12

1.6.2 新增了语义化标签元素 13

1.7 CSS3为响应式设计和更多创新奠定了基础 13

1.7.1 底线:CSS3不破坏任何东西 14

1.7.2 CSS3如何解决日常设计问题 14

1.8 看呐,不用图片 17

1.9 HTML5和CSS3现在就能用吗 20

1.10 响应式网页设计不是灵丹妙药 20

1.11 引导客户:网站不必在所有浏览器中表现一致 21

1.12 小结 22

第2章 媒体查询:支持不同的视口 23

2.1 现在就能使用媒体查询 23

2.2 为什么响应式设计需要媒体查询 24

2.2.1 媒体查询语法 24

2.2.2 媒体查询能检测那些特性 26

2.2.3 用媒体查询改造我们的设计 27

2.2.4 加载媒体查询的最佳方法 27

2.3 我们的第一个响应式设计 27

2.3.1 我们的设计是固定宽度的,不要惊讶 28

2.3.2 响应式设计中要保证图片尽可能精简 32

2.3.3 小视口下的内容剪切 33

2.4 阻止移动浏览器自动调整页面大小 34

2.5 针对不同视口宽度修正设计 37

2.6 响应式设计中内容始终优先 38

2.7 媒体查询只是必要条件之一 42

2.8 小结 42

第3章 拥抱流式布局 43

3.1 固定布局经不起未来考验 43

3.2 为什么响应式设计需要百分比布局 44

3.3 将网页从固定布局修改为百分比布局 44

3.3.1 需要牢记的公式 45

3.3.2 设置百分比元素的上下文 47

3.3.3 必须时刻牢记上下文 52

3.4 用em替换px 54

3.5 弹性图片 56

3.5.1 让图片随视口缩放 56

3.5.2 为特定图片指定特定规则 58

3.5.3 给弹性图片设置阈值 59

3.5.4 超级全能的max-width属性 61

3.6 为不同的屏幕尺寸提供不同的图片 61

3.7 流动网格布局和媒体查询的默契配合 66

3.8 CSS网格系统 66

3.9 小结 72

第4章 响应式设计中的HTML5 73

4.1 HTML5的哪些部分现在就能用 73

4.1.1 大多数网站可以用HTML5编写 74

4.1.2 腻子脚本和Modernizr 74

4.2 如何编写HTML5网页 75

4.2.1 HTML5的精简之道 76

4.2.2 HTML5标签的合理写法 76

4.2.3 伟大的<a>标签万岁 77

4.2.4 HTML的废弃零件 77

4.3 HTML5的全新语义化元素 78

4.3.1 <section> 78

4.3.2 <nav> 79

4.3.3 <article> 79

4.3.4 <aside> 79

4.3.5 <hgroup> 79

4.3.6 <header> 81

4.3.7 <footer> 81

4.3.8 <address> 81

4.4 HTML5结构元素的实际用法 81

4.5 HTML5的文本级语义元素 87

4.5.1 <b> 88

4.5.2 <em> 88

4.5.3 <i> 88

4.5.4 在页面中应用文本层语义元素 88

4.6 遵循WAI-ARIA实现无障碍站点 90

4.7 在HTML5中嵌入媒体 93

4.8 用HTML5的方法为页面添加视频或音频 93

4.8.1 提供备用的媒体源文件 95

4.8.2 针对老版本浏览器的备用方案 95

4.8.3 和标签的用法基本一致 96

4.9 响应式视频 96

4.10 离线Web应用 99

4.10.1 离线Web应用概述 99

4.10.2 让网页可离线使用 99

4.10.3 理解manifest文件 100

4.10.4 页面被自动加载到离线缓存 101

4.10.5 版本注释的用途 101

4.10.6 离线访问网站 101

4.10.7 离线Web应用的故障诊断 102

4.11 小结 103

第5章 CSS3:选择器、字体和颜色模式 104

5.1 CSS3给前端开发人员带来了什么 104

5.1.1 Internet Explorer 6到8对CSS3的支持 105

5.1.2 使用CSS3设计和开发页面 105

5.2 CSS规则解析 105

5.3 私有前缀及其用法 106

5.4 快速而有效的CSS技巧 108

5.4.1 CSS3多栏布局 108

5.4.2 文字换行 110

5.5 CSS3的新增选择器及其用法 111

5.5.1 CSS3属性选择器 111

5.5.2 CSS3结构伪类 113

5.5.3 对伪元素的修正 122

5.6 自定义网页字体 123

5.6.1 @font-face规则 124

5.6.2 使用@font-face嵌入网页字体 124

5.7 帮帮我,标题模糊怎么办 127

5.8 新的CSS3颜色格式和透明度 129

5.8.1 RGB颜色 130

5.8.2 HSL颜色 131

5.8.3 针对IE6、IE7和IE8提供备用颜色值 132

5.8.4 透明通道 132

5.9 小结 134

第6章 用CSS3创造令人惊艳的美 135

6.1 文字阴影 136

6.1.1 HEX、HSL或RGB颜色都可以 136

6.1.2 px、em或rem都行 136

6.1.3 取消文字阴影 138

6.1.4 制作浮雕文字阴影效果 139

6.1.5 多重文字阴影 140

6.2 盒阴影 140

6.2.1 内阴影 141

6.2.2 多重阴影 142

6.3 背景渐变 143

6.3.1 线性背景渐变 144

6.3.2 径向背景渐变 147

6.3.3 重复渐变 149

6.4 背景渐变图案 151

6.5 CSS3的响应性 153

6.6 组合使用CSS3属性 155

6.7 多重背景图片 159

6.7.1 背景图片大小 161

6.7.2 背景图片位置 161

6.7.3 背景属性的缩写语法 161

6.8 更多CSS特性 162

6.9 可缩放图标:响应式设计中的完美选择 162

6.10 小结 163

第7章 CSS3过渡、变形和动画 164

7.1 什么是CSS3过渡以及如何使用它 164

7.1.1 过渡相关的属性 166

7.1.2 响应式网站中的有趣过渡 168

7.2 CSS3的2D变形 169

7.3 尝试CSS3的3D变形 174

7.3.1 分析3D变形效果 176

7.3.2 3D变形尚未成熟 178

7.4 CSS3动画效果 179

7.5 小结 185

第8章 用HTML5和CSS3征服表单 186

8.1 HTML5表单 186

8.1.1 理解HTML5表单中的元素 188

8.1.2 placeholder 189

8.1.3 required 189

8.1.4 autofocus 190

8.1.5 autocomplete 191

8.1.6 list(及对应的datalist元素) 191

8.1.7 HTML5的新输入类型 192

8.1.8 日期和时间输入类型 198

8.2 如何给不支持新特性的浏览器打补丁 203

8.3 使用CSS3美化HTML5表单 204

8.4 小结 210

第9章 解决跨浏览器问题 211

9.1 渐进增强与优雅降级 215

9.2 该不该修复老版本IE 216

9.2.1 统计数据(再看看世界的变化) 216

9.2.2 个人选择 216

9.3 前端的瑞士军刀:Modernizr 217

9.3.1 使用Modernizr辅助修正样式问题 219

9.3.2 使用Modernizr让老版本IE支持HTML5元素 221

9.3.3 给IE6、7、8追加min/max媒体查询功能 222

9.3.4 使用Modernizr按需加载资源 223

9.4 必要时将导航链接转换为下拉菜单 225

9.5 高分辨率设备(未来趋势) 228

9.6 小结 231


书籍获取方式:转发+关注并私信小编:“资料”即可免费领取这本《响应式web设计》的电子版哦!

文首发于图灵教育微信本文作者:李松峰

农谚:“种地不上粪,等于瞎胡混。”

跟许许多多大城市里的上班族一样,我也是在农村长大的。因此,毋庸讳言,我小时候拾过粪。毕竟,那时候在农村长大的孩子,有几个没拾过粪呢。粪就是屎,主要是牛屎,因为个头大,我们那里也把风吹日晒干了的牛粪叫作“牛粪坯子”。

屎,本来是废弃物。但正如牛粪,却是农民种地所必需的天然肥料,是庄稼茁壮成长的营养来源,更是来年好收成的重要保障。俗话说:“没有尿屎臭,哪有稻米香?”

如今,我有幸成为一名在前端领域辛勤耕种的码农。就在前几天,我心血来潮,从电脑里翻出了十几年前出版的一本CSS名著的第1版(2006年)和第2版(2009年)。翻来翻去,我不禁联想到小时候拾粪的经历。说到这里,不少读者可能还不明就里,其实如果你是一名资深前端,我只要提几个当年火得不得了的技术你就会明白我在说什么了。

好吧,闲话少说,言归正传。马上开始我们的CSS拾粪之旅吧!


圆角盒子

不知道大部分读者怎么样,反正我一听到这个词就会有一种穿越感。十几年前,CSS远远不如今天这么强大。页面仔们想要在网页中实现稍微前沿、酷炫一点的效果,都必须绞尽脑汁。

滑动门

“滑动门”,即Sliding Doors,是诞生于2003的一种实现“圆角盒子”技术。假设最终要通过CSS实现下图中这样可以伸缩适应的圆角盒子:

你会怎么做?

……等等,那可是在遥远的2003年,当时的CSS标准里并没有'border-radius'这么一个属性,更没有浏览器支持类似的特性。于是,一位聪明的大牛Douglas Bowman发明了“滑动门”技术。其原理如下图所示:

图中展示了两个GIF图片:top-left.gif和top-right.gif,前者头部是一个1/4圆且比较长,后者尾部是一个1/4圆且比较短。

关键是使用'background-image'和'background-position'属性,后者最终会覆盖到前者上面。当然,要实现4个圆角,就必须要用到4张图片:

配合HTML标记和CSS代码更容易理解:

<div class="box">
 <div class="box-outer">
 <div class="box-inner">
 <h2>Headline</h2>
 <p>Content</p >
 </div>
 </div>
</div>

......

.box {
 width: 20em;
 background: #effce7 url(images/bottom-left.gif) ➥
 no-repeat left bottom;
}
.box-outer {
 background: url(images/bottom-right.gif) no-repeat right bottom;
 padding-bottom: 5%;
}
.box-inner {
 background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
 background: url(images/top-right.gif) no-repeat right top;
 padding-top: 5%;
}
.box h2, .box p {
 padding-left: 5%;
 padding-right: 5%;
}

哇哦,精彩!

可以脑补出来最终效果的同学请为自己鼓掌,同时也恭喜你成功捡起了第一块“牛粪”。暂时还没搞明白的小伙伴也不必气馁,有时候捡屎本身也是个技术活儿呢~

山顶角

“山顶角”,英文是Mountaintop Corners,诞生于2004年,由另一位牛人Dan Cederholm发明。相比于“滑动门”直接用图片本身充当圆角,“山顶角”反其道而行之:用圆角蒙版遮住背景颜色实现圆角,因此更为灵活。上图:

如果一看到这张图你就立即明白了,那恭喜你,第二块“牛粪”成功入筐。还不明白的同学,请看以下代码,HTML跟前面类似,同样需要4个元素来应用4张背景图片:

<div class="box">
 <div class="box-outer">
 <div class="box-inner">
 <h2>Headline</h2>
 <p>Content</p >
 </div>
 </div>
</div>

CSS也极为相似:

.box {
 width: 20em;
 background: #effce7 url(images/bottom-left.gif) ➥
 no-repeat left bottom;
}
.box-outer {
 background: url(images/bottom-right.gif) no-repeat right bottom;
 padding-bottom: 5%;
}
.box-inner {
 background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
 background: url(images/top-right.gif) no-repeat right top;
 padding-top: 5%;
}
.box h2, .box p {
 padding-left: 5%;
 padding-right: 5%;
}

成功捡到这块“牛粪”的同学也不要过分兴奋,“山顶角”虽然可以通过简单修改背景颜色来改变圆角盒子的颜色,省去重新制作图片的麻烦,但它也有不足。由于当时每个角的蒙版图片是用位图制作的,所以只适用于制造细微的曲线,较大弧度的圆角会显得粗糙。

不过,瑕不掩瑜。“山顶角”无论如何都是当时制作圆角盒子当之无愧的王牌技术,更是当时每一个页面仔的大救星。十几年后,当屏幕前的我们与这块“牛粪”不期而遇时,一定也会暗自赞叹。关键是,这块简洁巧妙的牛粪,它好捡啊!


多重背景图片

在前述两块重量级“牛粪”的启发下,支持多背景图片的'background-image'属性终于应运而生。于是,更简单的实现方案出现了:

.box {
 background-image: url(/img/top-left.gif),
 url(/img/top-right.gif),
 url(/img/bottom-left.gif),
 url(/img/bottom-right.gif);
 background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
 background-position: top left,
 top right,
 bottom left,
 bottom right;
}

当然,给一个元素应用多个背景并不局限于实现圆角盒子效果。至于还可以实现什么,请相信:限制你的只有你的想象力。

圆角边框

同样是在前两块“牛粪”滋养的沃土之上,迄今为止最为简单强大的'border-radius'属性也诞生了:

.box {
 border-radius: 1em;
}

成功捡起两块“牛粪”之后,是不是很有成就感?你还想继续捡?没问题,走着~


下拉阴影

想当初,不仅仅是实现圆角盒子需要全世界的大牛为之殚精竭虑,同样让他们苦思冥想的还有下拉阴影。

先看看Dunstan Orchard大牛的杰作。其核心思想就是给元素背景上应用一大张阴影图,然后通过负外边距把阴影部分显露出来。

如图所示,这是一张800px✕800px的阴影图shadow.gif,其右下角放大后看可以看到5像素的阴影。以下是要应用阴影效果的HTML:

<div class="img-wrapper">
 < img src="dunstan.jpg" width="300"➥
 height="300" alt="Dunstan Orchard" />
</div>

显然,这是一个容器'div'中包含一张人物图片(dunstan.jpg)。为了让容器'div'包裹住图片,首先要利用'float'让这个块级元素收缩,从而包裹住其中的图片:

.img-wrapper {
 background: url(images/shadow.gif) no-repeat bottom right;
 clear: right;
 float: left;
}

但这样背景图片完全隐藏在了人物图片下方,为了让它显露出来,还必须配合神奇的负外边距:

.img-wrapper img {
 margin: -5px 5px 5px -5px;
}

于是,立体感十足的阴影效果做成了,见下图:

不过,这硬边阴影看着也忒不自然了,就算是在十几年前也是无法接受的。那好,这块“牛粪”还要做大点。为了模拟出自然的阴影,还需要一张与刚才的阴影图片对角的模糊蒙版:

HTML标记也要再嵌套一层'div':

<div class="img-wrapper">
 < img src="dunstan.jpg" width="300"➥
 height="300" alt="Dunstan Orchard" />
</div>

首先,还是给最外层的容器'div'应用硬边阴影背景,定位在右下角:

.img-wrapper {
 background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}

然后,给内层的'div'应用模糊蒙版背景,定位在左上角:

.img-wrapper div {
 background: url(images/mask.png) no-repeat left top;
 padding: 0 5px 5px 0;
}

最后,再给图片添加个边框:

.img-wrapper img {
 background-color: #fff;
 border: 1px solid #a9a9a9;
 padding: 4px;
}

大功告成:

完美!

盒阴影

这块大“牛粪”威力够大,直接催生了'box-shadow':

img {
 box-shadow: 3px 3px 6px #666;
}

这里用了仅仅一个属性,而且效果同上。冗长的HTML和CSS代码不见了,它们去哪儿了?那还用问,它们已经化作沉甸甸的“牛粪”装进了你我的粪筐里。恭喜你再次捡屎成功!


图片替换

想当年,大牛们为了使用特殊字体实现不一样的视觉效果,必须先把文字转换成图片,因为用户机器上已安装的通用字体数量有限。但图片对搜索引擎不友好,于是有牛人想出了点子。总体的思路是像往常一样使用文本,让搜索引擎可以找到,同时再通过某种方式让它对用户不可见,只显示包含特殊字体效果的图片。

比如,Todd Fahrner的Fahrner Image Replacement (FIR)。先把文本包一个'span'中:

<h2>
 <span>Hello World</span>
</h2>

然后给标题'h2'添加背景:

h2 {
 background:url(hello_world.gif) no-repeat;
 width: 150px;
 height: 35px;
}

最后,隐藏'span':

span {
 display: none;
}

可是,由于多数屏幕阅读器会忽略'display:none;'的元素,从而导致严重的无障碍问题。所以,这个看似简单的方案实践中并不可行。

于是,另一位牛人Mike Rundle想出了一个两全其美的点子:使用负文本缩进把文本拉到屏幕之外!

这下HTML还更简单了:

<h2>
 Hello World
</h2>

CSS:

h2 {
 text-indent: -5000px;
 background:url(hello_world.gif) no-repeat;
 width: 150px;
 height:35px;
}

这就解决了屏幕阅读器用户的问题。但还没有完,新的问题又出来了。在当时网络速度很慢的情况下,可能会有用户禁用浏览器显示图片的功能,而CSS照样起作用。这是一种极端情况,这时候用户会既看不到文本,也看不到图片。

追求完美的大牛们又开始行动了。Tom Gilder和Levin Alexander最终找到了既对屏幕阅读器友好,又能在禁用图片打开CSS的情况下让文本对用户可见的方案。

这个方案首先要在被替换的元素内额外添加一个空标签('span'):

<h2>
 <span></span>Hello World
</h2>

然后,将容器设置为相对定位:

h2 {
 width: 150px;
 height: 35px;
 position: relative;
}

'position:relative;'将容器设定为其中'span'的定位上下文。接下来,把背景应用给'span',并采用绝对定位,而宽和高均为父元素的'100%'会让它完全把文本盖在下面:

h2 span {
 background: url(hello_world.gif) no-repeat;
 position: absolute;
 width: 100%;
 height: 100%;
}

这里只有一个问题,此时的图片必须完全不透明,否则下面的文本就会“走光”。

如前所述,这几块“牛粪”最终要解决的是用户计算机上字体匮乏的问题。这些需求最终也催生了十几年后可以广泛使用的Web字体。

@font-face {
 font-family: Vollkorn;
 src: url('fonts/Vollkorn-Regular.eot#?ie') format('embedded-opentype'),
 url('fonts/Vollkorn-Regular.woff2') format('woff2'),
 url('fonts/Vollkorn-Regular.woff') format('woff'),
 url('fonts/Vollkorn-Regular.ttf') format('truetype'),
 url('fonts/Vollkorn-Regular.svg') format('svg');
}

Web字体是一个大话题,在此我们就不过多涉及了。总之,我们再一次见证了“牛粪”的力量,同时也给我们今天的拾粪之旅画上了一个完美的句号。


明日份牛粪

天下码农千千万,大牛却不多。大牛之所以成为大牛,通常都会给数年后的从业者留下可供捡拾的“牛粪”。今天我们的拾粪之旅,既是对CSS历史上曾经辉煌一时的技术的巡礼,更是对如群星般璀璨的大牛们的致敬。

这些曾经红极一时的技术在今天看来或许不值一提,甚至幼稚可笑。然而,“后之视今,亦犹今之视昔。”今天被顶礼膜拜、推崇备至的技术,十几年后再看,或许同样不值一提,甚至幼稚可笑。但不容否认的是,恰恰是这些今天看来简单、幼稚的“牛粪”,孕育、滋养了一代一代技术人,推动着技术不断进步和突破。人类社会就是这样一路走过来的。

朝花夕拾。从拾粪的视角看,我们不禁深思:今天的码农,有几人能留下供十年后的人捡拾的“牛粪”呢?所以,今天起,给自己定个小目标,着手准备我们的明日份“牛粪”吧!

看到这里,有好奇的同学可能会问:这些“牛粪”到底来自哪本CSS名著,能否透露一下?当然可以。它们就是CSS Mastery: Advanced Web Standards Solutions (中文版《精通CSS》)的第1版和第2版。而且,这本名著的最新版也就是第3版的中文版也刚刚上市。值得一提的是,《精通CSS(第3版)》里可是满满的“明日份牛粪”哦,如果想开启你的CSS“捡屎”之旅,那一定会是个不错的体验。

CSS畅销经典全面升级,充分展示现代CSS实践技巧

本书是CSS经典图书升级版,结合CSS近年来的发展,尤其是CSS3和HTML5的特性,对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧,并讨论了如何实现稳健、灵活、无障碍访问的Web设计,以及在技术层面如何实现跨浏览器方案和后备方案。本书还介绍了一些鲜为人知的高级技巧,让你的Web设计脱颖而出。

抢先入门升级版?戳【了解更多】到京东购买