谷歌Chrome 與 微軟 Edge 合作改善表單控制項 UI 及體驗

2020-12-20 IT之家

IT之家3月31日消息 據Chromium官方博客,在過去的一年中,Google Chrome團隊和微軟Edge團隊合作,「對Chromium瀏覽器中的內置表單控制項進行了主體化和改進」,改善了按鈕、下拉菜單、複選框等HTML控制項的UI及體驗。

另個團隊致力於「一致且易於感知」的新UI,採用新主題的HTML控制項在設計上更加現代及平面化。

重新設計前 vs. 重新設計後

除了改進默認樣式,兩個團隊還調整了表單控制項的可訪問性以及增強對觸摸的支持,比如採用自適應背景、更加清晰的「對焦環」,增加了適配多顯示器的點擊目標大小,以及改進了拾色器等。

IT之家注意到目前這些改進在Windows版的Edge上已經可用,在Chrome 81上需要開啟以下flag標記:

訪問chrome://flags/#form-controls-refresh;下拉菜單改為Enable;重啟瀏覽器。重新設計的控制項將於5月中旬在macOS、Windows和Chrome OS版本的Chrome上可用,晚些時候Android版也將進行類似的改進。

相關焦點

  • 微軟谷歌增強合作 共同推進Chromium的現代化表單控制項
    微軟正和谷歌的Chrome團隊緊密合作,共同開發基於Chromium的現代化表單控制項。 在過去幾個月中,微軟一直在研究探索表單控制項現代化的方法,以嘗試更新包括日期選擇器之類的網頁UI元素設計。根據雙方合作的設想,Chromium的現代化網頁控制項能對觸控和輔助功能友好。微軟表示,計劃在即將到來的Chromium預覽版引入重新設計的控制項,而其他基於Chromium的瀏覽器也將會獲得這些改進。通過Chromium中改進的表單控制項支持,Microsoft希望在整個平臺上提供設計和用戶體驗的連續性。
  • 谷歌Chrome 83 Beta 發布:與 Edge 合作改進的表單控制項
    改進表單控制項HTML 表單控制項為大多數 Web 交互提供了基礎。它們易於開發人員使用,具有內置的可訪問性。但表單控制項的樣式完全不一致。最早的窗體控制項與所使用的作業系統匹配,後來的控制項則遵循了創建它們時流行的設計風格。這種變化迫使開發人員花費更多的時間並交付額外的代碼。在過去的一年中,Chrome 和 Edge 進行了合作,以改善 HTML 表單控制項的外觀和功能。這項工作包括使控制項和其他交互元素的集中狀態更容易感知。下圖顯示了 Chrome 中某些控制項的新舊版本對比。舊版本:
  • Chrome 83 Beta 發布:與 Edge 合作改進的表單控制項
    :Content-Security-Policy: require-trusted-types-for 'script';report-uri //my-csp-endpoint.example詳情可參考 Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types改進表單控制項
  • 谷歌Chrome 83 對表單控制項和焦點元素的更新被吐槽
    最新發布的 Chrome 83 對表單控制項進行了視覺效果的更新,其中對焦點元素的處理引起了眾人的關注,當文本輸入框處於焦點以及選定下拉菜單中的選項時,瀏覽器會在它們周圍顯示一個「黑框」,以突出表單中的這些內容。
  • 谷歌Chrome 81瀏覽器將用上微軟Chromium版Edge現代Web控制項
    微軟在2018年加入了Chromium陣營,這一變化為公司、用戶乃至Google帶來了許多積極影響。去年,谷歌同意用微軟的解決方案更新Chrome,以延長電池續航,可以減少瀏覽器在Windows上過多的電池消耗。
  • Chrome 83 對表單控制項和焦點元素的更新被吐槽
    最新發布的 Chrome 83 對表單控制項進行了視覺效果的更新,其中對焦點元素的處理引起了眾人的關注,當文本輸入框處於焦點以及選定下拉菜單中的選項時,瀏覽器會在它們周圍顯示一個「黑框」,以突出表單中的這些內容。
  • 谷歌Chrome 81瀏覽器將用上微軟Chromium現代Web控制項
    IT之家3月20日消息 微軟在2018年加入了Chromium陣營,這一變化為公司、用戶乃至Google帶來了許多積極影響。去年,谷歌同意用微軟的解決方案更新Chrome,以延長電池續航,可以減少瀏覽器在Windows上過多的電池消耗。
  • [下載]Chrome Canary 77最新版:啟用全局多媒體控制項UI
    不過在即將到來的Chrome 77中谷歌引入了「全局媒體控制項UI」(Global Media Controls UI,簡稱GMC),不再需要多媒體按鍵也不會立刻消失,只需要點擊工具欄上的圖標即可播放YouTube視頻。
  • 谷歌Chrome 83 穩定版正式發布:新跨域政策、表單控制項,改進 Web 體驗
    `;elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});// Create an elementconst img = document.createElement('img');img.src = 'xyz.jpg';elem.appendChild(img);更新表單控制項
  • Chrome 83 穩定版發布:新的跨域政策、表單控制項,和改進的 Web 體驗
    `;elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});// Create an elementconst img = document.createElement('img');img.src = 'xyz.jpg';elem.appendChild(img);更新表單控制項
  • WebBrowser控制項自動提交表單
    這個效果稍做改變,加個循環,就可以實現批量填入網頁表單數據,並自動提交。(備註:公司內部的表單一般是不會有驗證碼的,所以暫時不用考慮識別驗證碼的工作。)這就是WebBrowser控制項的強大之處。下面就教大家如何實現上述網頁自動化的效果。
  • 如何開啟Chrome谷歌、Edge瀏覽器的夜間模式?
    開啟方法打開 Chrome,或基於 Chromium 的瀏覽器;在URL處輸入:谷歌瀏覽器:chrome://flags/#enable-force-darkEdge瀏覽器:edge://flags
  • 微軟:Chromium版Edge正獲得流暢設計、Touch UI、圓角設計等
    上個月,微軟為 Microsoft Edge 和包括 Office 套件在內的其他流行應用推出了新的 Fluent 圖標。作為設計改造的一部分,微軟稱之為 「Fluent Design」,微軟 Edge 瀏覽器的新更新正在推送,帶來更多 Fluent UI 元素。
  • 通過HTTP明文協議提交表單有洩露風險 谷歌瀏覽器將默認阻止此類行為
    在谷歌和謀智基金會等推動下目前全網 HTTPS 流量已經佔據主流 , 多數網站已經啟用HTTPS加密安全連接協議。 在這種情況下谷歌瀏覽器正在加強安全管理,對混合加密連接的網頁和內容施加更多限制以確保數據不會被洩露。
  • Google Chrome 63.0.3239.108 正式版發布
    谷歌瀏覽器Google Chrome穩定版迎來v63正式版第二維護版發布,詳細版本號為v63.0.3239.108,上一個正式版v63.0.3239.84
  • 谷歌Chrome瀏覽器V46.0.2490.80正式版發布
    谷歌瀏覽器Chrome Stable穩定版迎來例行升級,新版本號為V46.0.2490.80,本次更新了Flash和穩定性改進及Bug修復! 64位Chrome能更好地利用當今的硬體,並且對速度、安全性、穩定性進行了改善! ◆速度:64位Chrome能利用最新的處理器和編譯器優化、更現代的指令集、更快的調用協議,從而實現了速度大提升,尤其是在圖形和多媒體內容方面,性能提升25%。
  • 向外部人士開放Chrome基礎構建權限:谷歌收穫更多盟友
    谷歌在本周早些時候舉行的BlinkOn會議上煞費苦心地吸引人們對這些變化的關注。谷歌Chrome工程師Danyao Wang指出:「看到這麼多有著不同優先級的人和團體聚在一起找到解決方案真的很酷,這不僅滿足了他們各自的議程,而且還推進了改善網絡這一共同目標。」向外部開放符合谷歌更廣泛的網絡戰略。
  • 新版Edge如何原生啟用Chromecast支持
    不過在Edge版本中,只需要手動啟用某些Flag標記,就能獲得完整的Chromecast體驗。雖然許多人認為谷歌會迫使微軟從瀏覽器中撤出對Chromecast的支持,但這種情況不太可能發生,因為微軟正成為Chromium項目的首要貢獻者之一。今年早些時候,微軟Edge的新版本作為預覽版上線,微軟目前提供兩種不同的版本,即dev和canary版本。
  • 谷歌瀏覽器Google Chrome
    立即下載這個chrome瀏覽器下載安卓版,在您的所有設備上享受與電腦體驗一致的chrome瀏覽器下載。谷歌瀏覽器下載手機版的特點是簡潔、快速。谷歌瀏覽器下載手機版支持多標籤瀏覽,每個標籤頁面都在獨立的"沙箱"內運行,在提高安全性的同時,就算一個標籤頁面的崩潰但也不會導致其他標籤頁面被關閉。此外chrome瀏覽器下載最新版基於更強大的JavaScript V8引擎。
  • 視頻|表單控制項+INDEX函數,輕鬆實現Excel動態圖表
    營長說表單控制項常常被認為是Excel高級用戶才使用的工具,要不微軟已經做出來了,默認不顯示給你。表單控制項+INDEX函數是Excel動態圖表的經典製作方式,今天營長就帶你看看這個組合的效果。其實可以通過表單控制項+INDEX函數的方式隨時調取指定月份的KPI項目,並生成每月KPI圖表。1:添加滾動條控制項需要開啟「開發工具」選項卡,在【文件】-【Excel選項】-【自定義功能區】對話框中,啟用【開發工具】按鈕。