前幾天(5/20)正式釋出的 Chrome 83 版引入了一套新的表單元件樣式,底下可以比較改版前後的差異,左邊是改版前,右邊是改版後。

file

這個新的樣式可以藉由 chrome://flags/#form-controls-refresh 來設定是否啟用,各位可以更改設定之後,點選這邊來自行實驗上圖中的元件效果。我這個頁面當中完全沒有對元件設置任何的 CSS 樣式,以便比較完全預設的情況下元件會長怎樣。

不得不說,<input type="range">, <meter><progress> 這三者的樣式改良最為明顯,原本的設計相形之下真的是很醜(range 的設計活像停在 Win 95 的年代,meter 雖然不難看但是跟別的元件完全不協調,progress 就更不用說了,這是 Win 3.1 的質感吧?),而 <input type="checkbox"><input type="radio"> 的外觀也有明顯改進。其它包括 date, time, color 這些會有對話框的元件更是在對話框的設計上大幅改進,color 的部份再也不會出現 Windows 那根本不及格的選色對話方塊了,而是一個功能堪比我當年的色彩識別器(笑)的優質對話方塊。

只是有一點在最近的幾天裡面真的被轟得很慘——我第一次注意到那個設計的時候真的也快要抓狂了,那就是 <select> 元件裡面的選項竟然都在滑鼠經過的時候多了一個又粗又醜的黑框線。更糟的是,根據這個討論串的說法,暫時那個設計沒有任何方法可以關掉(同時這也意味著,不管網站用了什麼 CSS 框架,只要元件用的是原生的 <select> 而不是自訂的元件,就一定會跑出這個問題)。底下的回應滿滿地都是憤怒的砲轟,還有人嘲諷說現在 Google 的回應跟以前的微軟沒兩樣:提供的盡是技術上完全正確但沒有任何實質用處的資訊。最讓大家傻眼的是,這種糟糕透頂的設計竟然會這麼輕易地被加入到正式發行版本之中。

不用說,這當然也影響到了我們現在在做的案子的樣式……真的希望 Google 會在下一版把這個設計修正回來。

另一個 Chrome 的 <select> 元件讓我頭大的地方在於,也不知道從哪一版開始(不是最近的,因為這個問題已經有一陣子了),在某些電腦上,顯示出來的 <option> 就是會莫名其妙地加高高度,而且也是沒有任何方法可以修改。這個問題我也是今天順便調查才搞懂怎麼回事:原來是 Chrome 考量到一些觸控螢幕上要把 <option> 加高才比較好按,所以如果 Chrome 判斷當前的環境是觸控螢幕就會做這個調整。但是首先這種修改根本就不應該是瀏覽器自作主張而且還不允許人 override 地修改,其次 Chrome 的判斷也未必正確:我公司就有一台擺明不是觸控螢幕的電腦也冒出了這個問題。

講真的啦……Google 真的不應該浪費力氣試圖提昇表單元件的質感,因為老早就已經有多到不行的套件在做這件事了,而且不管原生外觀再怎麼改,設計者肯定還是會繼續用那些套件(以確保整體的外觀協調和跨瀏覽器的一致表現)。

套用之前一位(我記得是 Chrome 的)工程師的講法,「瀏覽器設計者真的應該承認自己在網頁設計這一塊沒有網頁設計者來得高明,所以在開 API 的時候不該開高階 API、而該開低階的讓網頁設計者自己來包出他們想要的高階功能」,如今看來不只在程式 API 上是如此,就連元件外觀上都該是如此呢。

分享此頁至:
最後修改日期: 2020/06/05

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。