随着我们不断打磨能力测试框架并应用X光透视,一套术语和方法开始浮现,定义了我们的渐进增强开发过程。我们需要支持两种体验:“基本”体验对所有能上网的设备(在我们力所能及的范围内)全部有效,另一种“增强”体验则用于功能更强的浏览器。前者的标记是构建其他一切事物的基础,所以我们就将它命名为“基础标记”(foundation markup)。又因为功能更加丰富的体验依赖于高级的表现方式和行为,所以我们称呼任何实现它们的标记、样式表或脚本为“高级”(advanced)或“增强”(enhanced)资源。 为了成功实现这些体验,必须遵守渐进增强方法的三条关键原则: 以清晰的内容和恰当的标记作为起点; 坚持布局和表现严格分离; 高级行为和样式层无缝叠加,兼顾可访问性。 鉴于我们为基本体验设定的目标是普遍访问,所以开发方法必须以清晰的内容和恰当的标记作为起点。排列整齐的语义标记是基础,它既有意义又具备功能性,在此之上可以添加增强信息;它也更有可能在更广泛的设备上具备可用性;它还为用户使用辅助技术导航网站提供了一张清晰的地图。 围绕网页内容选择标记的方式会大大影响CSS和JavaScript等增强信息的加入方式,以及你的网页内容对那些视障用户的可访问性。一个由干净、整齐、结构良好且准确的标记构建而成的网站能够大大方便制作样式和交互,还可以重用代码。 为了给基本和增强体验打造出最健壮的基础标记,关键在于理解语义化HTML的特性、功能和限制,以及当前HTML官方规范里的一系列元素、标签和属性(乃至后续规范中放置向前兼容代码的新功能)。第3章将分析这些方面,并推荐最佳方法。 我们在渐进增强开发里严格遵循的第二个关键原则是布局和表现严格分离。首先制作出网页的线框图(wireframe),然后再填充内容,因为这样大大简化了项目级模板系统的创建工作,同时将所有受CSS影响的表现和样式与内容严格分离。 当一张网页的结构和样式被构建成独立于它的内容时,就能很容易地创建相同布局的多种变体,为各种各样的浏览器和设备提供最佳体验,而不用使用会影响内容样式的结构性CSS。然后,就有了考虑更多媒体类型(标准桌面屏幕、移动设备、印刷品和辅助设备)的灵活性,有选择地运用基本和高级CSS特性来适应它们。第4章将分析哪些类型的样式能安全地应用于大多数环境,那些相对更复杂的CSS规则是如何工作和互相影响的,以及如何为最简洁的基本体验和最健壮的增强体验集中并优化样式。 用JavaScript实现的高级行为和表现能大大增强用户体验,但是如果用得不合适或者不当心,就会导致一大部分用户完全无法使用某个组件、网页甚至整个网站。许多优秀的指南和明确的最佳实践方法都介绍了如何组织和引用脚本,从而无缝叠加增强行为,让它们能够安全地提升有能力的浏览器的体验,同时也能确保基本体验不受损。第5章会详细说明这些原则和技巧,以及相关的可访问性考量。 在更好地理解HTML标记、良好定义的CSS以及非干扰性JavaScript如何协同工作之后,第6章将深入介绍能力测试,看看如何使用上述原则和方法来实现一种更为可靠的渐进增强体验。
渐进增强的Web设计——1.3 从X光到实践:渐进增强开发的构成
书名: 渐进增强的Web设计
作者:
出版社: 人民邮电出版社
原作名: Designing with progressive enhancement:building the web that works for everyone
译者: 牛化成 | [英] Patty Toland | [英] Scott Jehl | [法] Maggie Costello Wachs
出版年: 2014-1
页数: 328
定价: 69.00
装帧: 平装
ISBN: 9787115338396