[[440196]]

早之前，應(yīng)該有幾年了，對(duì) HTML 中的表單元素做過(guò)一些簡(jiǎn)單整理和了解，恍恍惚惚不知不覺(jué)過(guò)了好幾年了，一直未曾在意瀏覽器在不斷升級(jí)、系統(tǒng)在不斷升級(jí)之后，這些默認(rèn)的 HTML 標(biāo)簽元素是否有改變。

然而就在幾天前無(wú)意間發(fā)現(xiàn) input 標(biāo)簽的一些 type 類(lèi)型默認(rèn) UI 樣式發(fā)生了一些改變。于是突然又來(lái)了興趣想看看 input 中其他類(lèi)型的 UI 是否也發(fā)生了改變。

各瀏覽器對(duì)比圖

所謂的不看不知道，一看，嗯，意外了一下。改變還是有的，尤其是一些細(xì)節(jié)上的變化。上圖看到的在 macOS 中的截圖效果，再來(lái)看一下 iPadOS15 中 Safari 的一個(gè)變化。

iPadOS15 中的效果

主要的細(xì)節(jié)變化是：

• 按鈕的默認(rèn)顏色變了(文字、邊框、背景);
• color 的 UI 變了，從一個(gè)色塊變成了色環(huán);
• range 的樣式也變了;
• search 搜索框多了一個(gè)放大鏡的 icon，如果我沒(méi)記錯(cuò)的話(huà)，之前是沒(méi)有的;

同樣的在 iOS15 中也是有著一些變化，而這些變化跟 iPadOS 是相類(lèi)似的。

iOS 15 中的效果

上面提到的這些僅僅只是從表面上看到的變化，在交互以及一些細(xì)節(jié)上也有了變化，所以上述所提到的變化內(nèi)容，不包含激活后觸發(fā)鍵盤(pán)的鍵盤(pán)樣式以及彈層樣式，具體的大家可以自行體驗(yàn)一下。

input 類(lèi)型默認(rèn)樣式的二維碼

當(dāng)然，我也知道其實(shí)很多人，應(yīng)該說(shuō)是大部分人現(xiàn)在都是直接使用各種組件庫(kù)，而并不會(huì)在意這些原生的控件，甚至可能是各種模擬來(lái)實(shí)現(xiàn)。這其實(shí)并沒(méi)毛病，只不過(guò)是想要更強(qiáng)大的定制化，以及各個(gè)瀏覽器中的表現(xiàn)一致。僅此而已，其實(shí)大家都懂。

定制化體現(xiàn)的是技術(shù)價(jià)值以及滿(mǎn)足更多的業(yè)務(wù)需求，或許應(yīng)該是為了滿(mǎn)足更多的業(yè)務(wù)需求。瀏覽器的表現(xiàn)一致性應(yīng)該才是最關(guān)鍵的致命傷，要不然會(huì)收到各種 bug，無(wú)法滿(mǎn)足業(yè)務(wù)需求，想想就痛苦……

然而我對(duì)比了一下 iPad14 和 iOS15 中 color 這個(gè) type 類(lèi)型的效果，深感在 iPadOS15 和 iOS15 中，input 控件的變化是很大的。

iPadOS14 中的 color 面板

iOS15 中的 color 面板

視頻錄制后轉(zhuǎn) gif，圖片質(zhì)量有點(diǎn)差，不過(guò)不是關(guān)鍵，有興趣體驗(yàn)的可以直接掃下面這個(gè)二維碼來(lái)感受一下。其實(shí)也就是一句代碼。

二維碼

<input type="color" value="#f32600"> 

期望瀏覽器的 UI 統(tǒng)一是不現(xiàn)實(shí)了，就感受感受這樣的 UI 被浪費(fèi)的心情吧。

本文轉(zhuǎn)載自微信公眾號(hào)「志語(yǔ)職樂(lè)」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系志語(yǔ)職樂(lè)公眾號(hào)。