详情
本书是Web设计畅销书《超越CSS》作者的最新力作，结合当前移动互联网下的硬件变化情况，以一个资深Web设计开发者的视角，将老的工作方法与最新技术相结合，通过丰富的案例为读者展示了如何设计高效、充满创意的Web页面和应用，并通过挖掘高级布局方式、无障碍页面、语义化标签、高级CSS技巧等内容，快速提升读者的视野与设计开发水平。
书名：前端体验设计——HTML5+CSS3终极修炼
ISBN：978-7-115-44826-2
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [英] Andy Clarke
译 腾讯FERD
审 校 张耀辉
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Hardboiled Web Design
Andy Clarke
Copyright ©2015. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH. CHINESE SIMPLIFIED language edition published by POSTS & TELECOM PRESS.
本书中文简体版由Smashing Magazine公司授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。
本书是Web设计畅销书《超越CSS》作者的最新力作，结合当前移动互联网下硬件的变化，以一个资深Web设计开发者的视角，将传统的工作方法与最新技术相结合，通过丰富的案例为读者展示了如何设计高效、充满创意的Web页面和应用，并通过挖掘高级布局方式、无障碍页面、语义化标签、高级CSS技巧等内容，快速提升读者的视野与设计开发水平。
此外，腾讯FERD团队（前端研发中心）在翻译本书的过程中，不仅严谨精准地表达出了作者的观点，还兼顾了国内行业的实际情况，帮助读者更加自然地理解原文的要义。
本书结构清晰合理、内容深入浅出，无论您是有一定经验的前端开发工程师，还是Web设计与开发的爱好者，本书都值得您反复品味，仔细吸收。
“从来没有什么最好的时机，唯有张开双臂紧紧拥抱变革，大家加油吧！”当译完这最后一句，我合上略微发烫的笔记本，一种如释重负的感觉涌上心头，而随后又陷入了深深的沉思中。
本书的作者Andy Clarke绝对称得上Web设计与开发界的“老炮儿”，早前就已经以一本《超越CSS》而蜚声海外。全书通读下来，能够感受出作者是一位兼具设计师与工程师精华与一身的极客分子，从书里无处不在的侦探硬汉崇拜，我们可以看出他那种打破传统的决心和智慧。
目前在国内，十分缺少像Andy Clarke这样十几年如一日的坚持在Web设计、前端体验优化的专家工程师、设计师。前端体验介于技术与设计之间，技术圈觉得CSS、HTML这些东西都太过低级，甚至连编程语言都算不上，而设计圈则觉得，只要是写代码的事，都和自己高格调的工作没有关系。这样的割裂，造成了我们中很少有人去潜心研究这一领域，反倒是被一波波的前端工程化、构建工具、框架冲击得微微发懵。
可是，对于运行在浏览器端，直接和用户打交道的网站或者Web应用，我们真的可以像写脚本程序那样，对体验漠不关心吗？我们的网站只有技术而没有艺术吗？HTML、CSS这些技术，仅仅是雕虫小技吗？我想，本书也许是最好的答案，作者积几十年之功，全面介绍了如何使用最新的Web展现技术，来实现惊艳的艺术展示，这不仅是设计，更是超越平凡的Web设计。
在我的日常工作中，也经常会看到前端圈的这种怪现状，尤其是新入行的同学，花了很多精力在研究新的框架、研究如何把那些工具用到极致，研究怎么提高工作效率，但是却对前端工程师最基础的HTML、CSS、原生Javascript三样技能熟视无睹，尤其是对于CSS、HTML，这如同坐在一个失去了两脚的凳子上，是无法坐稳的。
同样，很多设计师同学也对写代码这个事心有余悸。但是对于实现的可能性的不理解，会严重限制Web展示的想象力和可能性，尤其是CSS，经常会有设计师问我，这个效果能不能实现，那个效果能不能实现，归根结底，还是对Web展示技术的不熟悉，这也导致我们很难产出那种充分结合艺术与技术的Web作品。
那么该怎么办呢？我认为技术和艺术应该有一个结合点，在Web领域，它就是前端体验。这一点腾讯已经有所意识，并在公司内部，专门成立了前端体验的职业通道，并且也在2016年召开了第一届前端体验大会，我相信，有腾讯这样的标杆，伴随着互联网产品的极大丰富，人们对于体验的追求越来越高，代码与艺术的结合，打破传统的设计流程和开发模式的作品，将会越来越多。
老实讲，十万多字的大部头，是一个非常繁重的工作，尤其是在还要兼顾工作的情况下。我以及腾讯网前端研发中心的小伙伴，都是在下班或者周末，挤出时间来一点点翻译本书，每一个章节完成时，内心都充满了小小的激动，而当这些碎片全部拼接完成时，反倒归于了平静。
出于对技术的追求，出于对知识的渴望，我们做了这么一件事，当然因为是第一次译书，难免有很多错误和不正确的地方，请各位读者多多包涵，也欢迎与我们交流。
在这里，我要感谢腾讯网前端研发中心（FERD）的小伙伴，没有你们的支持，不可能完成这样的作品；感谢我的妻子，没有你的理解和支持，不可能熬过一个个加班的夜晚；感谢公司和领导，对创新的宽容和支持。
最后，再次感谢本书的翻译贡献者：韩振华、张莉梅、马斌、侯佳林。没有你们的通力合作，这几乎就是不可能的任务。
张耀辉
腾讯网前端研发中心负责人
2016年11月16日
献给我的妻子Sue。
“我看着Berin大笑，他转过头盯着自己的枪口 ，杀手满面的仇恨，充满了不甘的尖叫从Berin口中而出，而我的笑声却愈来愈大，甚至当我扣动扳机的时候，他的叫声还没有停止。”
—— 《My Gun is Quick》Mickey Spillane, 1950年
感谢Smashing Magazine出版社的Vitaly Friedman、Markus Seyfferth，以及所有帮助本书付梓，并帮我打造了这个分享想法平台的诸位朋友们。
感谢编辑Owen Gregory在我写作与出版过程中给予的帮助。
感谢Natalie Smith和Elliot Jay Stocks为本书设计工作的热情付出。
感谢Trent Walton 和 Jeffrey Feldman为本书作序。
感谢Marc Thiele为我拍摄了照片。
感谢Rachel Andrew、Shane Hudson、Mandy Michael、Sara Soueidnn等编辑精心打磨本书初稿。
再次感谢我的好朋友Rachel Andrew、Vitaly Friedman、Owen Gregor、Jeffrey Zeldman，以及Paul Boag、Petra Gregorova、Jon Hicks、Leigh Hicks、Drew McLellan、David Roessli、Jared Spool等在本书的关键时刻给予的帮助和照顾。
感谢我的公司（Stuff & Nonsense）的客户们，感谢他们愿意为我暂停手中的项目，并且理解我在写作时经常性地漏掉他们的电话和邮件。
感谢Sue Davie、Steven Grant 、Joe Spurling容忍我写作时候的坏脾气。
最后还要感谢我的家庭，无论做什么，你们才是我人生中最重要的部分。
Andy Clarke 并不太像一个传统的不修边幅的码农，他干净利索打扮得体，而且永远充满了想法。对于如何创造好的前端体验，他总是充满热情，并且能提出丰富的见解。
一直以来，Andy贪婪地探索着CSS，并从中获得了极佳的灵感，您现在阅读的这本书，也许正是他过往的创意沉淀。通过本书你可以了解到：在日常工作中为什么要使用HTML5以及CSS3；如何以及何时使用这一前瞻性的Web技术。让我们从现在就开始，学习并使用起些酷炫的东西吧。
每一位Web设计师和前端工程师都应该拥有这本书，但需要注意的是，本书不适合羞于尝试的人。如果你对实现多浏览器的CSS圆角不寒而栗，如果你对实现一个CSS阴影就心满意足，那么这本书的确不适合你，现在就合上书页，回到你传统守旧而又安全的过往经验中去吧。
但是，如果你对自己的技术现状心怀不安，渴望拥抱Web设计的未来，并且坚信不能执着于过去的经验，那么，这本书就是特意为如此努力的你准备的。
如果五年前你告诉我说，命令行会成为Web设计与开发工作流中的一部分，我肯定会认为你疯了。同样，像CSS预编译，以及用其他方式代替浮动布局这样的事，在那个时候似乎都不敢想象。
作为一个前端工程师，我们生活在一个不断被各种新技术和尝试侵蚀的世界。然而无论Web技术如何演进，基本的理念应该是保持不变的。单一方案解决单一问题的时代一去不复返，在发展如此迅速的行业里，动辄沿用老办法对待新问题是十分危险的行为。而如此大的变化，使得我们心生畏惧又精疲力尽，那么我们该如何让自己跟上行业变化的节奏？
互联网作为我们的主要工作平台，承载了所有的人类知识，互联网的无限性，也使得保持内容历久弥新成为至关重要的事情。而作为互联网从业者也需要花费大量的时间，在网上浏览我们所需的内容。基于网络知识的庞杂和无系统性的增长，导致在这个平台上学习，像在黑夜里抓东西一样困难。
也许，深入理解每一个问题发生的机制与环境、知晓每一个解决方案背后的逻辑和原理，远远不像网上搜索式学习那样，可以快捷、方便地解决眼前的问题。你是想通过关键词搜索到ChrisCoyier的flexbox布局指南？还是真正摸透flexbox？我想答案不言而喻吧。
搜索式学习，也许很适合在繁重的工作环境里的人。然而，万变不离其宗，像学习任何一门学科一样，我们都要挤出一定的时间来深入理解我们使用的技术和工具，以保证我们对于这些东西背后原理的认知和巩固，方便我们在未来轻松应对更多的难题。
作为一个发展中的行业，我们需要这样的书籍，来帮我们梳理今天Web设计与开发中各种激动人心的最佳实践。在本书第1版上市短短五年后，作者就升级了书中的内容，也是本书和作者对推动行业发展所做贡献的最好证明。感谢Andy的卓越研究，让我们可以继续完善我们的技术栈，向着新的Web设计开发方式前进。
如果你在Web设计和开发的岗位做得时间足够长，那么你的书架和电子书架上应该已经塞满了关于HTML和CSS方面的书籍，甚至也许已经买过我之前出版的《超越CSS——Web设计艺术精髓》。那么，为什么你还需要这本书？
这是一本面向那些富有创造力、渴望理解WHEN（何时）、HOW（如何）和WHY（为什么），以及积极实践HTML和CSS新特性的Web设计师和前端工程师的书。拥抱新技术，就从现在就开始，不是明天或者下周。这本书不会教你如何书写基本的HTML标签或者CSS样式，而是会传授对于学习新知如饥似渴的你，如何正确使用这些新特性与技术，让你的网站更有创造力和想象力，更加适应不同的设备与环境。
如果你非常在乎标签的使用与清晰的表达，那么在本书中，你将会学习到如何使用富语义化的HTML标签来构建网页。内容将会从微格式涵盖到WAI-ARIR无障碍访问。了解这些内容，会帮助你减少对那些非语义化标签的依赖，从而使你的网站性能更加卓越。
如果你是一位设计师，希望了解最新的CSS技术以及了解它能带来什么样的创意灵感，那么本书将会教你，如何在支持这些特性的浏览器中更好地使用它们，以及如何更加优雅地兼容那些老的、且支持效果不好的浏览器。
我们在2010年出版了本书的第1版，至今尽管只有短短的五年时间（本书最新英文版于2015年出版），但是就在我创作新书期间，无数Web设计理念与技术都已发生了改变。在2010年本书第1版出版前的数周，苹果公司发布了iPad，随后它改变了人们与网站的互动方式；在第1版出版前的5个月，Ethan Marcotte发表了他的“响应式设计”一文，这一思想不可避免地造成了Web访问的变化，这一全新理念冲击了当时的Web设计和开发行业；在2010年的那个时间节点，设计师与工程师们还在为迁就那些老旧桌面浏览器的缺陷而殚精竭虑，鲜有人去展望未来。现今，人们更多都是在使用智能手机来访问互联网。
这些年，那些拖后腿的老旧浏览器已经逐渐退出历史舞台。我们不必再为那些不支持圆角、阴影、透明度甚至是RGB色值的浏览器去写一些hack的方法。来自苹果、火狐、谷歌、Opera甚至是微软的现代浏览器，都对CSS有很高的支持度，但是它们依然是对一些仅自己支持的特性更加友好。
对于大多数老板和客户，他们的焦点目前都放在了设计数字化产品上，而不是网站。不管我们如何去做，只设计静态网页视觉稿的传统方式，已经被组件化的设计所取代。如今，我们在设计环节使用HTML和CSS做原型设计，在随后的迭代中通过代码来不断完善产品，而不是设计更多的视觉稿。事实上，我们的客户早已习惯于这样的流程，并且很多人还满怀期待。因为他们可以很快地在自己的智能手机或平板电脑上亲眼看到我们的响应式设计理念。
五年的时间会改变很多事，但是我们对于设计和开发的心态却从未改变。以前我们可能困扰于类似border-radius这样的CSS属性的兼容情况，现在同样对于使用flexbox心存担忧。在各种各样的CSS研讨会上，我常常惊诧于如此之多的人到现在还拒绝使用类似border-image、background-blend-mode、filter等等这样的属性，即便现代浏览器已经支持这些特性了。
Web技术在不断进步，但万变不离其宗，这也是为什么本书所阐述的方法依然有效的原因，甚至这些经验在移动端显得更加重要。现在针对多设备的响应式设计，要比本书第1版出版的时候多了太多。你准备好开始这趟Web设计的奇幻之旅了吗？系紧安全带，加大油门，出发吧！
这是一本关于最新的CSS和HTML技术的书，我们假定读者都是设计师或前端工程师，且熟知如何书写结构良好的页面，也就是说，你是使用HTML标签与CSS来完成设计的。阅读本书是否需要知晓全部的CSS知识？不需要，不过如果你能理解选择器以及当前层这样的技术概念，将会对阅读大有裨益。如果你刚接触CSS，我希望本书可以给予你启发和鼓舞，并且能够让你了解到“硬派”的意义。
你需要准备一台Mac或者PC电脑，上面安装几个现代浏览器和它们的开发者工具插件，如果有智能手机或者平板电脑更佳。你可以使用自己的设备，来访问“Get Hardboiled”网站上的案例，体验在不同的屏幕分辨率，不同设备上的浏览感受。我强烈建议您安装如下浏览器。
在Mac上打开Safari，点击Safari的Preferences按钮，点击“高级”选项卡，然后选择“Show Develop menu in menu bar”这将会开启Safari的开发者工具。Safari是OSX下的默认浏览器，使用的是iOS渲染引擎。
鉴于Safari浏览器使用了WebKit的渲染引擎，于是谷歌旗下的Chrome改用了自己研发的Blink引擎，Chrome浏览器拥有非常好的扩展工具，可以帮助我们在设计和开发网站的时候，十分方便地在浏览器中调试。
安装最新版的Firefox（火狐浏览器）以及最近可用的beta版。它以其丰富的扩展而闻名，目前它仍是广受用户欢迎的浏览器。
Edge是微软最新款的浏览器，它的LOGO很容易让人追忆起IE浏览器，但是它抛弃了前辈过往的包袱。Edge目前只支持Windows 10操作系统的PC、智能手机、平板电脑以及Xbox的命令行。对于旧的操作系统，暂时不提供支持。
旧版Opera浏览器使用的是自家研发的Presto渲染引擎，目前最新的版本已经改为和Chrome一样的Blink内核了。
你无须特意准备任何写代码的软件，找个你喜欢的文本编辑工具即可，我用的仍然是Espresso。
在本书中，我为读者建立了一个名为“Get Hardboiled”的网站，并通过每一章节的案例，帮助读者理解本书的内容。这些案例使用了最新Web技术，展现了精彩绝伦的体验。看过之后，你会忘记那些在老掉牙浏览器中做Web设计的痛苦。
你可以在GitHub上找到这些代码。
“Get Hardboiled”上的大量案例可以激发你的灵感，同时帮助你更快更好地使用最新的HTML和CSS特性。
《红色收获》 Dashiell Hammett，1929
《马耳他之鹰》 Dashiell Hammett，1930
《邮差总是按两次铃》 James M.Cain，1934
《双重赔偿》 James M.Cain，1943
《长眠不醒》 Raymond Chandler，1939
随着智能手机等移动设备的广泛使用，网页的设计和开发产生了深刻的变革，但是我们向老板和客户设计呈现网页设计的方式，以及我们对于HTML和CSS的认知，并没有发生太大改变。
在这一部分，你将会重新审视渐进增强和优雅降级等概念；你将会了解Web标准是如何制定的；你将会懂得如何去创建一种独立于响应式布局的设计风格；你还会学习到如何向老板和客户展示设计。尤为重要的是，你将会明白，响应式网页设计是实现创造性工作的绝佳机会，应该紧紧抓住。
在孩提时代，我就对侦探小说很着迷。是的，侦探小说。既不是乡间别墅谋杀案，也不是密室推理小说，这些类型的小说从来都不是我喜欢的风格。我所指的是雷蒙德•钱德勒（Raymond Chandler）、达希尔•哈米特（Dashiell Hammett），以及我个人最喜欢的米奇•斯皮兰（Mickey Spillane）等作家所创作的那种坚韧有力的小说。
现在回到本书的最开始，读一读那段引言，那可不是我在参加客户会议或W3C CSS工作组会议时所做的笔记，尽管直接使用笔记的内容很容易。那段话摘自我最喜欢的一部侦探小说——米奇•斯皮兰（Mickey Spillane）所著的经典“硬汉”侦探小说《My Gun Is Quick》。
即便不是侦探小说迷，你应该也听说过或者看过一些“硬汉”电影。你或许熟悉亨弗莱•鲍嘉（Humphrey Bogart）刻画的私人侦探 Sam Spade。这部电影改编自达希尔•哈米特于1941年出版的小说《马耳他之鹰》。这是历史上非常精彩的一部侦探电影，仅次于那部《谁陷害了兔子罗杰》。
演员斯塔西•基齐（Stacey Keach）的表现如何呢？20世纪80年代，他在Spillane的电视剧《Mike Hammer》中的表演算不上硬气，然而总比没得看强。
没错，就是下面这个家伙。
你对这类小说感兴趣吗？我真希望你立马就去读一读，可以从那些经典的小说开始，越老越好，例如小说家达希尔•哈米特的《马耳他之鹰》或雷蒙德•钱德勒的《长眠不醒》。对怪咖侦探、贵妇与警察内鬼的故事感兴趣吗？Mickey Spillane的小说是我的最爱。你可以从《My Gun Is Quick》和《复仇在我》开始。
从20世纪20年代开始，硬汉派侦探小说就充斥着暴力、犯罪场面。罪犯虽然凶狠，但英雄也充满了个性，他们从不掩饰真相，从不耍小聪明。作为读者，我们需要知道真相，不管事实是多么腐败不堪。
各种硬汉派侦探小说里的这些主角让我着了迷，如Hammett描写的Sam Spade，Chandler笔下的Philip Marlowe，特别是Spillane小说里所描写的Mike Hammer。
身为侦探的主角们每天的工作，就是用枪指着别人的太阳穴，或者一拳揍烂坏蛋的五脏六腑。别人搞不定的事情，只要主角出马准能办成。他们不需要规则，那是为胆小鬼和无能警察准备的东西。
硬汉侦探有时会和警察一起破案，但硬汉总是深入险境，因为在必要的时候，他们从不受条条框框的限制，从来都是按照自己的规则来破案。当然，法律、法规和惯例很重要，但有时只有通过伸张正义才能获得实现这些规则。当人们不能做那些他们认为正确的事情时，人们就需要这些不畏险境的英雄出手相救。
这些英雄们特别擅长做警察和其他人搞不定的事情，因为他们的行动并不受规则及惯例的限制。我们为他们加油打气，并全力支持，不管这些人多么不羁和残酷，因为我们需要他们。作为前端工程师，我们可以从这些硬汉身上学到很多东西，本书的灵感便来源于此。
为了创造最好的设计体验而永不妥协，才称得上够硬派。推翻限制、打破或创造新的规则，毫不畏惧，这才是我们的本色，并且要让网站在任何可能的情况下都具有更强的适应性。在这个套路里，需要毫不犹豫地充分利用新技术。
说起来简单，做起来并不容易，但如果你已经准备好挑战自己，深呼吸，稳住神，准备迎接一个漫长的夜晚吧。
无论是在现实生活中和还是在虚拟网络中，我们需要规则、约定和标准。但是，我们应该利用它，而不是定义它，更不是限制它。虽然网络已经有25年的历史（当我在写这段的时候），我们已经提出了它的标准，例如W3C标准组织，充当了所谓的Web标准技术，如HTML、CSS和JavaScript的监护人的角色。
我们还建立了一系列最佳实践，如移动优先、渐进增强和响应式Web设计等，指导人们使用这些技术来构建极富可用性——跨浏览器兼容、方便残障人士、视觉上更吸引人、搜索引擎优化——的网站。
但是，世界还远远不完美，这些标准和最佳实践至今都也只是“建议”，W3C甚至使用这个词来形容他们维护的规范。
除了迫于同行的压力和常识之外，并没有法人实体或者其他机构可以强制浏览器厂商和互联网专业人员采用这些标准并做出最佳实践。如果这本书是为他们写的，这将是一个完全不同的书。
当我五年前第一次写这本书的时候，Web设计的标准做法是，创建一个在所有浏览器中看起来和用起来都相同的网站，而不去管它们的性能如何。要做到这一点意味着要委曲求全，例如需要避免使用某些技术，因为有些浏览器不支持此项技术。
这就让你心满意足了么？
当然不行！这个套路无法让你建立出色的网站，并且这种过时的做法阻碍了我们的进步，让我们不思进取。作为互联网的守护者，我们所做的最糟糕的事，莫过于不思进取的老旧观点无动于衷。
“我们必须做我们的老板和客户想做的事儿！我们要做他们所期望的事情！”
在这方面我算是个老手了。我深知，在帮助客户实现想法的时候，完全可以使用最新的Web特性，充分展示我们的创造力。这才是硬派的Web设计。
在寻找超越习以为常的方法之前，让我们扪心自问，为什么我们对待全新的Web技术会如此谨慎？
当我的第一本书《超越CSS》在2006年出版的时候，支持CSS3新特性的浏览器还非常少。只有Firefox支持CSS3多栏布局，只有Safari浏览器支持多背景图片。《超越CSS》中由于提及这两个高级CSS属性而在业界广受赞誉。
等我五年后写了本书的第一版的时候，情况已经完全不一样了。早期独领风骚的IE桌面浏览器，其市场份额不断萎缩，其竞争对手的浏览器此时已经取得优势，移动端浏览器也在快速发展。
彼时我们有一系列很棒的CSS属性，并且大部分已经得到了浏览器的支持，包括IE9。此外，还有很棒的CSS工具任由我们使用。你可能会想，我们可以利用这些条件来做些伟大的事情。
事实上呢？并非如此。我们中的大多数人总是盯着做不到的事情，而不是我们能做的。很多人抱怨局限性，而不是拥抱可能性。大多数人不停地埋怨，而不是感到兴奋。
使用基于Web标准的HTML、CSS和JavaScript，能创作出令人怦然心动的作品，例如Bryan James创作的的“30个CSS碎片拼图，30种濒危灭绝动物”。
网页设计和开发变革的速度前所未有。HTML、CSS和JavaScript等技术已经发展成熟。
使用智能手机和平板电脑来访问网站和APP的人数呈井喷式增长，且已经超过了PC端的访问数量。响应式Web设计已经不再仅仅是一个概念，而是一个被广泛接受的网站设计方法。
Web设计和开发的方式正在发生巨大的变化，针对响应式设计的要求，许多设计师抛弃了以往从设计页面开始的方式，转变为从设计组件化系统着手。我们已经彻底改造了HTML和CSS样式指南，把它们变成了成熟的模板库，它们就是你的设计工具，而不再是简单的文档。
为了管理大型网站的样式表，开发人员使用Sass为CSS添加了继承、混入和变量，他们还为HTML和CSS引入了命名方法，包括BEM（块、元素，修饰符），这使得HTML元素和CSS样式之间的关系更加清晰。
最后，我们不再需要说服老板使用响应式Web设计——因为是他们要求这样做的。
在接下来的几章，针对如何使用新兴技术这一话题，我会挑战一些早已被普遍认同的想法。然后，我会制定一个计划，即如何在创造性地推进工作的同时，满足所有人的需求。
我热衷于使用最先进和最新的工具来做出最好的设计，因此我可能会有话直说，所以别指望我会轻声细语地告诉你。
渐进增强一直是现代Web开发的基础之一，我第一次接触到这个概念是在Dave Shea的博客上,当时他介绍了所谓的MOSe——Mozilla、Opera和Safari增强。你应该对Dave有所耳闻，就是他创造了CSS禅意花园。
Dave是这样解释MOSe方法的：
“在IE浏览器上创建一个基本的功能页面，你可以在拥有高级选择器的现代浏览器里添加额外的功能，等等，这是我们可以在未来几年持续前进的唯一方法，让我们拥抱它吧。”
Dave建议我们应该首先为低级浏览器创建一个最低可用页面，尤其针对IE的早期版本，然后在支持CSS的子选择器、兄弟选择器和属性选择器的现代浏览器里应用更多的样式。你会注意到，Dave讨论页面应该如何工作，而不是应该如何设计。
同年早些时候，Steve Champeon 开始推广渐进增强概念。他同Jeffrey Zeldman一样，是Web标准的创建人之一。
“与其优雅降级，不如渐进增强。首先为最新的、不同功能的设备构建文档，通过单独的逻辑继续增强这些文档表现。不要让基准设备承担过多的责任，而应该让使用现代浏览器的用户拥有更加丰富的体验。”
许多人将渐进增强概念视为设计开发网站的理想方法。从对Web特性支持较少的浏览器上开始，设计一个仅能提供最基本体验的网页，然后再在高级和现代浏览器上，根据其所支持的特性，实现不同细节的分层设计。
这意味着在实际操作时，优先使用老旧浏览器支持较为成熟的CSS选择器和属性，而对于较新的属性则谨慎使用。理论上这种渐进增强的方法是行得通的，但是在实践中，我们又该如何选择不同的增强方案，才能发挥这种设计原则的最大潜力？尽管Steve在文章中使用了术语“包容性的网页设计”，但我确信，他从未打算让我们与功能差劲的浏览器纠缠，限制我们的渐进增强创作思路。就算他提过这样的想法，你能猜猜他和Dave的那些文章是什么时候的吗？2003年！
2003年，巨大的30GB容量的iPod可算是个潮物，在那一年，如果你的工作是设计、开发网页或者仅仅是浏览网页，你肯定使用过下面这些软件。
随着时间的流逝，我们会不断升级软件，然而在实践渐进增强方面，我们总是固执地坚守着以前的常识。
这并不是说渐进增强不值得称赞，事实恰恰相反。
我们在开发时遵循这些原则，页面的可用性或可访问从来不依赖CSS或者JavaScript。当我们使用有意义的HTML标签时，它将变得更轻量、更具有适应能力。CSS使得在各种尺寸和类型的屏幕上的排版更容易。
渐进增强的理念不止如此，然而我们必须小心谨慎，不要因为坚持其原则或应用其理念而限制了自己的创造力，特别是在视觉设计方面。我们必须不断地重新评估如何应用这些原则，从而避免我们的作品变得平庸。
Zoe Gillenwater在她的演讲“使用弹性布局提高响应能力”中提到了CSS中flexbox布局的应用，她提倡使用弹性布局在设计中实现渐进增强。但问题是，在渐进增强实践中，往往会为了迁就还在使用老旧浏览器和过时设备的用户，而放弃使用先进的CSS属性，甚至放弃使用flexbox这样强大的工具。
增强或改善，往往意味着从底部开始。仅仅针对各种浏览器普遍支持的特性进行Web设计是远远不够的，这也是造成当今许多网页如此平庸的原因。我们使用新的CSS特性作为一种工具时，需要为使用新浏览器和设备的用户设计更多、更好的体验，就如Dan Cederholm所说“为新版浏览器用户提供增强的文档，以便让他们获得更加丰富的体验。”
在过去的几年里，Zoe提出了很多非常有指导意义的Flexbox实战案例，具体查阅：zomigi.com/publications/#pub-fwd。
因为我们首先开始为老旧的浏览器设计，所以离最终的卓越设计还差着十万八千里。
我们绝不能被那些老旧的浏览器与过时的设备限制了创造力。相反，我们应该利用新技术，为每一位用户的每一次浏览，设计出最好的体验。这样我们可以充分利用一切能力更强的浏览器和新兴技术，实现更高和更优的设计。
我猜你现在肯定在想优雅降级的事儿？
渐进增强的另一面——优雅降级——确保当样式和脚本不可用或无法被浏览器解析时，用户依然可以访问网页的内容。采用优雅降级方法，意味着网站的功能永远都是可用的，尽管一定程度上也许是低保真的设计，好在它的内容仍然可以访问。
在老旧的或功能较弱的浏览器中，考虑可用性是我们能做的最基本，也是最重要的部分。但是优雅降级这个术语，意味着我们应该妥协。
去xx的优雅。
硬派的方法，是进一步推进优雅降级，并发挥我们的创造天赋去设计，不仅只针对设备的屏幕大小，而且也要考量其浏览器的功能。我们需要重新理解优雅降级，并面对今天这个领域所遇到的挑战。
如果要创建令人期待且鼓舞人心的网站，我们必须打破过往渐进增强和优雅降级的经验藩篱。只是鼓励人们去使用高性能或者对Web特性支持良好的浏览器，是远远不够的。
相反，我们应该充分利用新的技术，并且精心设计每一次用户体验，以便于充分发挥用户使用的浏览器的潜力。这可能意味着最终页面跟设计稿有很大不同，有时在不同的浏览器或设备上差异更大。
对于一些人来说，这种方法似乎太激进，甚至有些偏执。但这种方法更好地利用了当今的技术，充分释放创造性，令用户体验和设计达到更高水平，并让我们开发出更鼓舞人心和富有想象力的网站与应用。
在渐进增强和优雅降级的概念刚提出时，网络是一个与今日完全不同的环境。在浏览器新特性支持领域，两款竞争的浏览器间鲜有差异。而今天一切都改变了，优秀的现代浏览器支持各种Web特性，而老旧的浏览器的支持性很差，二者之间的鸿沟越来越大。下面是一些最新的CSS选择器和属性，在现代浏览器中有着稳定和良好的表现。
id跟class属性。opacity属性和CSS滤镜。当前桌面浏览器对CSS属性的支持情况
CSS作为高自由度的创作工具，帮助我们实现了很多惊艳的Web体验。如果在创作中不充分利用它们，是多么短视和愚蠢啊。如今，在掌握这些技术的前提下，我们为什么不去使用这些属性呢，哪怕只用其中的一个。
那么到底是什么在阻止我们?
只不过是几个陈旧的想法罢了。
渐进增强和优雅降级，都不应该被教条或不经大脑地应用在我们的Web设计中。相反，它们提供了一个新的起点，而现在，我们要重新定义响应式设计的原则，以适应不断变化的网络。
