萬(wàn)維網(wǎng)不斷發(fā)展和演變，至今已經(jīng)有 27 年歷史。我們?nèi)绾握宫F(xiàn)內(nèi)容和給內(nèi)容添加樣式在萬(wàn)維網(wǎng)發(fā)展的不同階段有不同的形式，最近新出現(xiàn)的形式是響應(yīng)式網(wǎng)頁(yè) —— 一個(gè)網(wǎng)頁(yè)能夠適配多個(gè)瀏覽器和不同屏幕大小的設(shè)備。當(dāng)一個(gè)網(wǎng)站涉及到越來(lái)越多的“物聯(lián)網(wǎng)”（IoT）設(shè)備諸如樹(shù)莓派、智能手表、語(yǔ)音私人助理以及其他許多 —— 響應(yīng)式網(wǎng)頁(yè)的潛力面臨挑戰(zhàn)。

IoT 意味著更多五花八門的設(shè)備從網(wǎng)頁(yè)加載內(nèi)容。如果我們想要避免早期的移動(dòng)和 PC 桌面戰(zhàn)爭(zhēng)的歷史重演，我們就需要確保在這些新設(shè)備下，網(wǎng)頁(yè)仍然能夠像使用其他常用設(shè)備那樣可訪問(wèn)和可用。我們最不愿意見(jiàn)到的事情是不得不為 IoT 設(shè)計(jì)一個(gè)版本的網(wǎng)頁(yè)，然后為移動(dòng)和 PC Web 設(shè)計(jì)另外一個(gè)版本。

許多開(kāi)發(fā)者不太意識(shí)到潛在的眾多設(shè)備在未來(lái)很可能嘗試展現(xiàn)網(wǎng)頁(yè)內(nèi)容給用戶。

一些設(shè)備例如配有 2.4 英寸或者更大一些的微型顯示屏的樹(shù)莓派能使用 Wi-Fi、以太網(wǎng)甚至 3G/4G 網(wǎng)絡(luò)，使得它很有可能用來(lái)展現(xiàn)網(wǎng)頁(yè)內(nèi)容。這個(gè)內(nèi)容可能是來(lái)自萬(wàn)維網(wǎng)的網(wǎng)站或者本地網(wǎng)頁(yè)例如嵌入式設(shè)備的說(shuō)明書(shū)、基于網(wǎng)頁(yè)的設(shè)備控制頁(yè)面以及以網(wǎng)頁(yè)方式呈現(xiàn)的后臺(tái)系統(tǒng)儀表盤。

智能手表?yè)碛懈〉娘@示屏，與傳統(tǒng)的顯示屏在可顯示顏色范圍和屏幕分辨率上有明顯的區(qū)別。雖然 Apple Watch 還沒(méi)有內(nèi)置 Web 瀏覽器，Android 上有一個(gè) Appfour 開(kāi)發(fā)的 Android Wear 版的 Web 瀏覽器 ，而很有可能隨著時(shí)間的推移，更多智能手表的 Web 瀏覽器將問(wèn)世（假設(shè)有人某天突然領(lǐng)悟了如何為手表設(shè)計(jì)一款易于使用的 Web 瀏覽器！）。至少，如果 Web 真正能在任何設(shè)備上做到適配和可用，我們就能為（大量手表瀏覽器問(wèn)世的）這一天做好準(zhǔn)備。如果在將來(lái)，有人在他的智能手表上讀 email，當(dāng)他點(diǎn)擊郵件里的鏈接，會(huì)發(fā)生什么？一個(gè)簡(jiǎn)單的 Web 瀏覽器出現(xiàn)在一個(gè)強(qiáng)大的智能手表上的那一天不會(huì)太遙遠(yuǎn)。

在計(jì)算機(jī)領(lǐng)域的一個(gè)新的趨勢(shì)是智能語(yǔ)音服務(wù)，例如 Apple 的 Siri、Amazon Echo 的 Alexa、Google Now 以及 Microsoft 的 Cortana。這些助理在家居生活中可以起到的作用包括控制開(kāi)關(guān)燈、設(shè)置鬧鐘、調(diào)節(jié)空調(diào)溫度等等。這些服務(wù)響應(yīng)語(yǔ)音控制，對(duì)提問(wèn)進(jìn)行在線數(shù)據(jù)檢索 —— 通常這涉及到匹配每個(gè)公司的數(shù)據(jù)庫(kù)信息來(lái)找到詳細(xì)答案，而這些答案數(shù)據(jù)本身來(lái)自于用戶自身對(duì)這些服務(wù)的使用。對(duì)于這一有趣的領(lǐng)域，我之前在 SitePoint 這里寫(xiě)過(guò)如何上手建立你自己的簡(jiǎn)單的人工智能助手的內(nèi)容，其中一部分在“Five Simple Ways to Build Artificial Intelligence in 2016 以及一系列文章關(guān)于 “How to Build Your Own AI Assistant Using Api.ai”。

隨著時(shí)間的推移，隨著人工智能和機(jī)器學(xué)習(xí)的改進(jìn)，這些智能助理可能會(huì)在網(wǎng)頁(yè)上尋找信息，將其中的一些內(nèi)容反饋給我們。

為了讓這成為可能，網(wǎng)頁(yè)需要保持可訪問(wèn)性，讓機(jī)器人可讀取內(nèi)容，而不僅僅是將它視覺(jué)上展現(xiàn)出來(lái)。理想而言，網(wǎng)頁(yè)本該已經(jīng)被結(jié)構(gòu)化，以適合屏幕閱讀器閱讀，然而采用可訪問(wèn)的標(biāo)簽常常是事后才有的想法。私人助理 AI 服務(wù)的出現(xiàn)，可能有助于改變這一現(xiàn)狀。

全新的顯示設(shè)備

物聯(lián)網(wǎng)時(shí)代未來(lái)的計(jì)算機(jī)顯示，能夠包含一系列新的和非常神奇的可能性。想想一些設(shè)備例如智能鏡子、智能窗戶，智能汽車儀表盤 —— 這些變化將在我們的生活中隨處發(fā)生，但是 Web 在這些新設(shè)備上展現(xiàn)的效果如何？一系列新的設(shè)計(jì)決策將產(chǎn)生 —— 在鏡子/窗戶上顯示內(nèi)容，你可能需要有更多的顏色對(duì)比度。開(kāi)發(fā)者開(kāi)發(fā)鏡子/窗戶的顯示內(nèi)容是否需要考慮限制使用的顏色范圍？未來(lái)將迎來(lái)全新的（和令人興奮）的世界。

梅賽德斯·奔馳的儀表盤原型 （圖片來(lái)源： Mercedes Benz）

讓我們的 CSS 和標(biāo)記語(yǔ)言適用于未來(lái)

如果我們想擁有一個(gè)與新技術(shù)很好地相結(jié)合的 Web 未來(lái)，開(kāi)發(fā)者需要密切關(guān)注幾個(gè)關(guān)鍵領(lǐng)域。

真正的響應(yīng)式 CSS

網(wǎng)頁(yè)需要適配到微型顯示器，在它之上保持相對(duì)可讀。CSS將是適配非常小的顯示分辨率的關(guān)鍵。CSS 是否能像處理移動(dòng)網(wǎng)站那樣處理微型屏幕？我們是否需要?jiǎng)?chuàng)建新的規(guī)則和標(biāo)準(zhǔn)來(lái)以更大的字體顯示文本？是否需要新的類似于 Flexbox 的標(biāo)準(zhǔn)來(lái)為微型屏幕調(diào)整布局？是否需要新的標(biāo)準(zhǔn)來(lái)給微型顯示器的菜單增加樣式？時(shí)間會(huì)說(shuō)明一切，但是一些選擇了使用 Web 的開(kāi)發(fā)者可能會(huì)成為這一領(lǐng)域的先驅(qū)，而社區(qū)將如何跟進(jìn)會(huì)是一件非常吸引人的事。

picture 元素

《picture》 元素讓我們能夠指定多張圖片來(lái)根據(jù)不同的分辨率和設(shè)備類型決定加載哪一張圖。這一規(guī)范將是確保在相對(duì)低功率的設(shè)備和慢速連接設(shè)備，以及非常小的分辨率無(wú)法顯示大圖的設(shè)備上平滑運(yùn)行網(wǎng)頁(yè)的關(guān)鍵。

依賴 JavaScript 很危險(xiǎn)

一些低功率設(shè)備和個(gè)人輔助設(shè)備將讀取網(wǎng)頁(yè)內(nèi)容，但它們可能不需要運(yùn)行 JavaScirpt 或者不能像智能手機(jī)和平板電腦那樣處理 JavaScript。如果你的網(wǎng)站依賴 JavaScript 來(lái)拉取數(shù)據(jù)又沒(méi)有任何向后兼容，較新的 IoT 設(shè)備很可能不能訪問(wèn)你的網(wǎng)站。確保網(wǎng)頁(yè)在沒(méi)有 JavaScript 的時(shí)候能工作依然是一件值得做的事情！

WAI-ARIA 及其他無(wú)障礙技術(shù)

現(xiàn)有技術(shù)已經(jīng)能夠讓 Web 被那些殘障人士無(wú)障礙使用，他們一樣可以使用人工智能、私人助理和其他基于語(yǔ)音的技術(shù)。用 WAI-ARIA 和其他無(wú)障礙技術(shù)建立網(wǎng)站可能有助于減少未來(lái)的返工量，并且在當(dāng)下也對(duì)殘障人士非常有幫助。我們涵蓋了這個(gè)話題的一些細(xì)節(jié)內(nèi)容在 “How to Use ARIA Effectively with HTML5” 以及 “Avoiding Redundancy with WAI-ARIA in HTML Pages”。

顏色和設(shè)計(jì)選擇

基于鏡子和窗戶的顯示可能需要從設(shè)計(jì)上提高顏色對(duì)比度來(lái)確保它在浴室、天空和其他房間等有豐富背景色的場(chǎng)景下能夠清晰顯示。

顯示設(shè)備諸如智能鏡子可能顯示內(nèi)容的方式類似我們今天的操作系統(tǒng)里的 “高對(duì)比度模式”，這個(gè)模式反轉(zhuǎn)你的屏幕顏色來(lái)提高對(duì)比度。為了在這樣不同形式的顯示設(shè)備上顯示內(nèi)容，智能鏡子可能需要采用同樣的技術(shù)。如果你的網(wǎng)頁(yè)設(shè)計(jì)能夠在高對(duì)比度模式下很好地展現(xiàn)并且讓你的網(wǎng)站主題在這樣的模式下有強(qiáng)烈的色彩對(duì)比，那么這就不成為問(wèn)題了。

我的藝術(shù)家對(duì)高對(duì)比度 SitePoint 的印象：Max Braun’s concept smart mirror

DOM 復(fù)雜度

盡管臺(tái)式機(jī)和智能手表都能處理復(fù)雜的 DOM 結(jié)構(gòu)以及大量嵌套元素和 CSS transitions，但是 IoT 設(shè)備和可穿戴設(shè)備在處理復(fù)雜 DOM 時(shí)出問(wèn)題是完全有可能的。保持一個(gè)簡(jiǎn)潔的 DOM 元素結(jié)構(gòu)可能對(duì)提升這些新設(shè)備的性能比以往任何時(shí)候都重要。

測(cè)試將變得艱難

在智能手機(jī)、桌面平板、智能電視和桌面操作系統(tǒng)上測(cè)試你的網(wǎng)站已經(jīng)相當(dāng)困難，因?yàn)槲锫?lián)網(wǎng)和其他技術(shù)不斷進(jìn)步（虛擬和增強(qiáng)現(xiàn)實(shí)也來(lái)了！），充分測(cè)試每一種設(shè)備變得越來(lái)越困難。采用 Web 標(biāo)準(zhǔn)、無(wú)障礙標(biāo)準(zhǔn)以及上面提到的思路將有助于讓網(wǎng)頁(yè)設(shè)計(jì)盡可能可用。

一定程度的遠(yuǎn)見(jiàn)將成為未來(lái)十年內(nèi)專業(yè)的 Web 開(kāi)發(fā)人員的必要技能，因?yàn)樗麄冃枰诓粚?shí)際接觸每個(gè)具體設(shè)備來(lái)進(jìn)行測(cè)試的情況下，想象網(wǎng)頁(yè)設(shè)計(jì)將如何在一系列設(shè)備上展現(xiàn)。

通用的 API

響應(yīng)式網(wǎng)頁(yè)將不會(huì)是物聯(lián)網(wǎng)上唯一的基于 Web 的信息源。響應(yīng)式網(wǎng)頁(yè)將會(huì)有一個(gè)同伴，它與響應(yīng)式網(wǎng)頁(yè)同樣重要，我們之前討論過(guò)它 —— the Omnipresent API（通用的 API）。這將是 server 端等同于 Web 的重要性的技術(shù)，它能夠加快新技術(shù)的集成和適配，觸及 Web 瀏覽器自身達(dá)不到的領(lǐng)域。通用的 API 是指 API 能夠以平臺(tái)無(wú)關(guān)的方式，為一個(gè)應(yīng)用或服務(wù)提供功能或數(shù)據(jù)訪問(wèn)。缺少了通用 API，響應(yīng)式網(wǎng)站就沒(méi)有了適應(yīng)性，也導(dǎo)致新技術(shù)的每一部分彼此分離，不能融合到一起。

響應(yīng)式 Web 和通用 API 都存在是至關(guān)重要的。我們的響應(yīng)式 Web 將由可以適用于各種技術(shù)的通用 API 來(lái)填充內(nèi)容。沒(méi)有 Web 瀏覽器的設(shè)備應(yīng)該有應(yīng)用軟件可以通過(guò)通用 API 來(lái)填充內(nèi)容。一旦一臺(tái)設(shè)備訪問(wèn)了 Web 瀏覽器，內(nèi)容也應(yīng)該能夠通過(guò)響應(yīng)式 Web 來(lái)訪問(wèn)。要了解通用 API 的更多內(nèi)容，可以讀一讀我的作品： “［The Era of the Omnipresent API］”（https://devdiner.com/opinion/the-era-of-the-omnipresent-api）。

結(jié)論

我們前端開(kāi)發(fā)實(shí)踐者可以不做上面這些改變來(lái)適應(yīng)物聯(lián)網(wǎng)和其他技術(shù)演變。然而，我相信如果我們不去改變，Web 技術(shù)將被限制于桌面應(yīng)用和少量移動(dòng)應(yīng)用，正如響應(yīng)式 Web 的真正潛力被移動(dòng) App 的盛行所阻礙。如果 Web 不適應(yīng)，我們可能會(huì)看到應(yīng)用軟件分割為可穿戴 App、IoT App、Alex App 等等，這些 App 成為孤島 —— 而不是分享 Web 的共同生態(tài)圈。