所谓的渐进增强,其实就是基于内容(模型)的分层设计(语义、视觉、交互),用户看到的只是视图而已。拥抱“最佳实践”,去除耦合,实现正交!
作者从过往的经验中,总结出了一套有关于渐进增强的“最佳实践”。只有理解并遵循“最佳实践”,我们才能设计出够健壮、易拓展、可访问的Web应用。虽然HTML不是编程语言,但网页也是Web应用中的一种工件。对于网页的设计,也应当“早重构、常重构”,以避免腐败发生。
在设计时引入文案,避免使用占位符填充。设计风格组件,建立视觉规范或组件库。为内容设置断点,而不是为设备设置断点。
在页面中使用结构化数据(微格式、微数据、RDFa)、ARIA的role属性、以及data属性。避免因实现基于JavaScript的交互行为而引入与语义无关的冗余标签,应当提供一个供JavaScript使用的接口,实现语义结构与交互结构的解耦(如:通过修改接口名称,来引入标签式或手风琴式的交互行为)。
文摘
Web的概念之所以经久不衰,是因为它无关于设备与屏幕尺寸;Web不是软件,不需要用户去安装;Web本身对其承载的内容具有良好的适应性和无限的延展性;Web可以作为内容访问的窗口,集成在任何需要的地方;Web可以触及每个用户,当今的Web几乎能够胜任一切。
内容是Web页面的核心,先要保证在比较落后的设备上能够正常访问核心内容,再在比较先进的设备上利用设备性能来逐步增强用户的交互体验——这就是渐进增强思想的核心。
可访问性就是无论用户是有一些生理上的缺陷,还是受网络或设备条件的限制,都确保每个人能平等地访问Web上的内容。
用户界面是和用户产生交流的地方,交流是双向的,需要知道“用户要什么”,以及清晰地表达“你想说的话”。
class旨在定义一个有限的、具有共同内容特征的HTML元素集合。id的作用是为页面标记出一个具有唯一名称的HTML元素。
section包含的是一个较大的章节或部分,而article包含的则是独立的、完整的内容。如果把一段内容从整个文档中删除,但不影响对文档的理解,那么这段内容该用article;如果删除一段内容,使文档变得难以理解,那么就该用section。
如果在CSS选择器中的任何地方出现错误(即使选择器的其他地方是正确的),那么整条语句都将被忽略。