」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 理解 Web 功能

理解 Web 功能

發佈於2024-11-05
瀏覽:759

Making sense of Web features

網路上有大量的功能。瀏覽器相容性資料項目列出了其中 14000 多個!如何理解這一切?

這是一個長期以來沒有答案的問題。是的,每個 Web 開發人員都使用 caiuse.com。或者他們用谷歌搜尋或詢問chatgpt。問題在於這些工具可以回答特定問題,但缺乏更大的圖像或指向事實來源的連結。

WebDX 集團

不再! WebDX 小組現在在網路平台上的組織、分類和命名方面做了令人難以置信的工作(←這是最困難的部分,如您所知)。他們正在嘗試以協調的方式改善網頁和瀏覽器的整體開發人員體驗。

WebDX 是一個屬於 W3C 的社區團體。您可以在他們的存儲庫中看到他們正在烹飪什麼。對我來說最有趣的輸出是網路功能儲存庫。他們所做的是將大量特定功能分類為一組更易於理解的高級功能。

例如,新推出的功能之一是設定方法。任何操作集合的新方法都可以是單一特徵。然而,如果將其作為單一高級功能進行交流和記錄,它會變得更加有用。

文件

另一部分是如何找到某個功能的詳細資料。好吧,這就是開放 Web 文件計劃的用武之地。雖然 MDN 一直是一個很好的參考,但一直缺乏實踐內容。 Open Web Docs 組織正試圖改變這一現狀。他們正在為 MDN Web 文件編寫大量新教學課程、指南和解釋器,以及基礎資料 - BCD(瀏覽器相容資料)的更新。

一個例子是 MDN 上關於相對顏色的頁面。它清晰地對應到高級 Web 功能。與每個顏色特徵的單獨參考頁面相比,它提供了更好的理解和圍繞該特徵的上下文。

調查

上述努力的真正好處在於他們真的想要合作。他們從「HTML 狀態」和「CSS 狀態」等調查中取得輸入,然後他們可以使用相同的 Web 功能名稱集來追蹤有關它們的調查結果。

順便說一句,當您填寫這些調查時,您可以點擊「新增到閱讀清單」按鈕。它將向您提供 MDN 鏈接,您可以在其中詳細了解您不知道的事情。

現實

很好,但網路變得更好了嗎?天哪,是的!

縮小跨瀏覽器所需功能和實際可用性之間差距的舉措是顯而易見的。也就是說,Interop 專案確保在所有主要瀏覽器中盡可能完整地實作一組功能。該項目每年都會有一個新的迭代。

這些功能的實現程度和實現程度是使用 Web 平台測試來衡量的。針對所有瀏覽器執行相同的測試集。這就是為什麼我們有這些很好的百分比來反映瀏覽器中功能的實際狀態。

基線

某個功能在所有主流瀏覽器中實現的時刻是一個非常重要的時刻。由於我們已經按照上述方式對功能進行了很好的分組,所以目前唯一缺少的就是名稱。現在我們已經看到了:當所有主要瀏覽器都支援某個功能時,它就是「基線」新功能。一項功能在新推出兩年半後就已廣泛可用。

您可以在 web.dev 上閱讀有關 Baseline 想法的更多信息,因為它是由 Google 發起的。

視覺化儀表板

當你能以更直觀的方式看待一切時,一切都會變得更有意義。精心設計的表格、圖表、方便的資源連結…

這是為了創建有用的儀表板而進行的一些嘗試。全部檢查一遍,每一個對這個主題都有不同的看法:

  • WebDX 小組背後的人員提供的簡單儀表板
  • Google Chrome 團隊提供的逐一功能通過網路平台測試的精美圖表
  • 以及我嘗試創建更具互動性的版本

您可以不時地使用它們來了解一般新內容或廣泛採用狀態中的新內容。當您開始一個新專案並決定哪些功能集實際可用並得到足夠支援時,它也是一個很好的參考。

Making sense of Web features
Web Features Explorer 以簡潔的方式顯示訊息

Making sense of Web features
Webstatus.dev 在圖表中顯示了透過網路平台測試的功能的實際進展

Making sense of Web features
我的 Web 平台功能儀表板允許過濾和排序功能

未來

一些功能最近很快就實現了所有瀏覽器。但有些瀏覽器製造商甚至可能認為這不是一個好主意。您可以在以下網站找到有關可能會或可能不會出現的內容的詳細資訊:

  • Mozilla 標準立場
  • Webkit團隊標準職位
  • Google Chrome 功能路線圖

結論

觀察網路平台的發展是令人著迷的。反饋循環正在改善。許多領域的互通性正在變得更好。

我長期以來一直想擁有一個具有網絡功能的有用儀表板,突然之間,數據的質量如此之好,以至於我在幾個晚上內成功構建了自己的儀表板。

版本聲明 本文轉載於:https://dev.to/lttr/making-sense-of-web-features-lo4?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段中:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內...
    程式設計 發佈於2024-11-19
  • 為什麼編譯器優化 lambda 函數比傳統函數更有效?
    為什麼編譯器優化 lambda 函數比傳統函數更有效?
    Lambda 優化和內聯函數:編譯器的優勢Nicolai Josuttis 的聲明(與普通函數相比,lambda 表現出卓越的編譯器優化)引起了許多人的興趣開發人員。透過調查這項說法,我們試圖揭示這種優化優勢背後的根本原因。 函數物件和內聯作為函數物件的Lambda 擁有一個關鍵優勢:將它們傳遞給函...
    程式設計 發佈於2024-11-19
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-19
  • PHP 的 time() 函數傳回與時區無關的時間戳記嗎?
    PHP 的 time() 函數傳回與時區無關的時間戳記嗎?
    PHP time() 傳回與時區無關的時間戳記嗎? 處理時間計算時,了解以下內容的上下文非常重要時間戳以及時區如何影響它。 PHP 的 time() 函數提供了時間戳記值,但其時區意義需要澄清。 GMT/UTC 時間戳UTC(協調世界時)和 GMT(格林威治)平均時間)是用作測量世界時間基礎的時區。...
    程式設計 發佈於2024-11-19
  • 如何有效率地檢索 Go 字串的最後一個字元?
    如何有效率地檢索 Go 字串的最後一個字元?
    檢索Go 字符串的最後一個字符在Go 中,處理字符串時會出現一個常見的需求:從Go 字符串中檢索最後X 個字元給定的字串。雖然 string 套件沒有為此任務提供特定函數,但有一些有效的方法可以使用切片表達式來完成此任務。 要取得字串的最後 N 個字符,請使用以下切片表達式語法:stringVari...
    程式設計 發佈於2024-11-19
  • 渲染後如何在 React 中聚焦輸入欄位?
    渲染後如何在 React 中聚焦輸入欄位?
    React渲染後對輸入字段進行聚焦在React中,渲染後對輸入字段設置焦點可以通過多種方法實現. 一種方法是使用文件中建議的引用。透過將 ref 指派給渲染函數中的輸入欄位(例如「nameInput」),您可以存取其 DOM 節點並手動呼叫 focus 方法。然而,了解何時何地呼叫該函數至關重要。 ...
    程式設計 發佈於2024-11-19
  • 由於來源凍結期導致 AWS DMS 表格失敗
    由於來源凍結期導致 AWS DMS 表格失敗
    我們正在將 AWS DMS 與 db2 連接以遷移資料。在來源中,我們有大約 8 小時的凍結期,因此我們將停止並恢復 DMS 服務。 一旦我們恢復 DMS,大多數表將恢復,但某些表仍將被鎖定,因為某些更改會導致“表錯誤”狀態。此後我們無法恢復表,唯一的選項是重新載入。 我們無法定義牌桌清單或這些...
    程式設計 發佈於2024-11-19
  • 如何在 PHP Script Echo 中處理雙引號?
    如何在 PHP Script Echo 中處理雙引號?
    PHP 腳本 Echo 中的雙引號在 PHP 腳本中回顯 HTML 程式碼時,正確處理雙引號至關重要。考慮以下範例:<?php echo "<script>$('#edit_errors').html('<h3'><em>Please Correc...
    程式設計 發佈於2024-11-19
  • 如何使用正規表示式驗證電子郵件地址:語法與完整驗證?
    如何使用正規表示式驗證電子郵件地址:語法與完整驗證?
    如何使用正規表示式驗證電子郵件地址透過表單收集使用者輸入時,確保提供的電子郵件地址有效至關重要。正規表示式 (regex) 提供了執行此驗證的便捷方法。然而,僅驗證語法是不夠的。 語法驗證要執行基本語法驗證,可以使用以下正規表示式模式:[^@] @[^@] \.[^@] 此模式檢視以下內容標準:剛好...
    程式設計 發佈於2024-11-19
  • 為什麼我們要在程式退出之前呼叫 C++ 中的「delete」?
    為什麼我們要在程式退出之前呼叫 C++ 中的「delete」?
    為什麼在程式退出之前在C中呼叫delete? 在C中,在程式終止之前明確調用堆分配記憶體的delete是很重要的。如果不這樣做,可能會導致記憶體洩漏和不可靠的應用程式行為。 程式退出時的記憶體釋放雖然大多數作業系統在程式退出時自動回收堆內存,僅依賴這種預設行為可能會出現問題。造成這種情況的主要原因有...
    程式設計 發佈於2024-11-19
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-11-19
  • ::content 偽元素如何在 Shadow DOM 中啟用深度樣式?
    ::content 偽元素如何在 Shadow DOM 中啟用深度樣式?
    揭開Shadow DOM 中的::content/:slotted 偽元素Shadow DOM 是Web 元件的一個關鍵方面,它引入了一種封裝和分離內容的新穎方法。在此領域中,::content(以前稱為 ::slotted)偽元素在啟用 ShadowTree 內的分散式節點的深層樣式方面發揮關鍵作...
    程式設計 發佈於2024-11-19
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-19
  • 如何在 InnoDB 中鎖定不存在的行:困境和解決方案
    如何在 InnoDB 中鎖定不存在的行:困境和解決方案
    鎖定不存在的 InnoDB 行:技術困境在資料庫管理領域,通常需要確保操作以原子方式執行,防止任何衝突或不一致。在處理可能嘗試修改相同資料的並發事務時尤其如此。在本文中,我們解決了一個需要鎖定不存在的 InnoDB 行的特定場景。 提出的問題是:如何確定資料庫中不存在使用者名,然後將其插入為一個新行...
    程式設計 發佈於2024-11-19
  • PHP 的 `__get` 和 `__set` 魔術方法何時被實際呼叫?
    PHP 的 `__get` 和 `__set` 魔術方法何時被實際呼叫?
    PHP 魔術方法:為屬性重載揭開__get 和__set 的面紗在PHP 中,__get 和__set 魔術方法提供了另一種處理方法超越傳統getter 和setter 的屬性存取和修改。這些方法使開發人員能夠在未明確定義所要求的屬性時攔截和自訂屬性存取的行為。 但是,一個常見的誤解是 __get ...
    程式設計 發佈於2024-11-19

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3