梅赛德斯·奔驰的仪表盘原型 (图片来源: Mercedes Benz )
Future Proofing Our CSS and Markup
让我们的 CSS 和标记语言适用于未来
如果我们想拥有一个与新技术很好地相结合的 Web 未来,开发者需要密切关注几个关键领域。
真正的响应式 CSS
网页需要适配到微型显示器,在它之上保持相对可读。CSS将是适配非常小的显示分辨率的关键。CSS 是否能像处理移动网站那样处理微型屏幕?我们是否需要创建新的规则和标准来以更大的字体显示文本?是否需要新的类似于 Flexbox 的标准来为微型屏幕调整布局?是否需要新的标准来给微型显示器的菜单增加样式?时间会说明一切,但是一些选择了使用 Web 的开发者可能会成为这一领域的先驱,而社区将如何跟进会是一件非常吸引人的事。
The picture Element
picture 元素让我们能够指定多张图片来根据不同的分辨率和设备类型决定显示哪一张图。这一规范将是确保在相对低功率的设备和慢速连接设备,以及非常小的分辨率无法显示大图的设备上平滑运行网页的关键。
依赖 JavaScript 很危险
一些低功率设备和个人助理设备将读取网页内容,但它们可能不需要运行 JavaScirpt 或者不能像智能手机和平板电脑那样处理 JavaScript。如果你的网站依赖 JavaScript 来拉取数据又没有任何向后兼容,较新的 IoT 设备很可能不能访问你的网站。确保网页在没有 JavaScript 的时候能工作依然是一件值得做的事情!
WAI-ARIA 及其他无障碍技术
现有技术已经能够让 Web 被那些残障人士无障碍使用,他们一样可以使用人工智能、私人助理和其他基于语音的技术。用 WAI-ARIA 和其他无障碍技术建立网站可能有助于减少未来的返工量,并且在当下也对残障人士非常有帮助。我们涵盖了这个话题的一些细节内容在 “ How to Use ARIA Effectively with HTML5 ” 以及 “ Avoiding Redundancy with WAI-ARIA in HTML Pages ”。
颜色和设计选择
基于镜子和窗户的显示可能需要从设计上提高颜色对比度来确保它在浴室、天空和其他房间等有丰富背景色的场景下能够清晰显示。
显示设备诸如智能镜子可能显示内容的方式类似我们今天的操作系统里的 “高对比度模式”,这个模式反转你的屏幕颜色来提高对比度。为了在这样不同形式的显示设备上显示内容,智能镜子可能需要采用同样的技术。如果你的网页设计能够在高对比度模式下很好地展现并且让你的网站主题在这样的模式下有强烈的色彩对比,那么这就不成为问题了。
我的艺术家对高对比度 SitePoint 的印象: Max Braun’s concept smart mirror
DOM 复杂度
尽管台式机和智能手表都能处理复杂的 DOM 结构以及大量嵌套元素和 CSS transitions,但是 IoT 设备和可穿戴设备在处理复杂 DOM 是出问题是完全有可能的。保持一个简洁的 DOM 元素结构可能对提升这些新设备的性能比以往任何时候都重要。
测试将变得艰难
在智能手机、桌面平板、智能电视和桌面操作系统上测试你的网站已经相当困难,因为物联网和其他技术不断进步(虚拟和增强现实也来了!),充分测试每一种设备变得越来越困难。采用 Web 标准、无障碍标准以及上面提到的思路将有助于让网页设计尽可能可用。
一定程度的远见将成为未来十年内专业的 Web 开发人员的必要技能,因为他们需要在不实际接触每个具体设备来进行测试的情况下,想象网页设计将如何在一系列设备上展现。
通用的 API
响应式网页将不会是物联网上唯一的基于 Web 的信息源。响应式网页将会有一个同伴,它与响应式网页同样重要,我们之前讨论过它 —— the Omnipresent API (通用的 API)。这将是 server 端等同于 Web 的重要性的技术,它能够加快新技术的集成和适配的,触及 Web 浏览器自身达不到的领域。通用的 API 是指 API 能够以平台无关的方式,为一个应用或服务提供功能或数据访问。缺少了通用 API,响应式网站就没有了适应性,也导致新技术的每一部分彼此分离,不能融合到一起。