2020年的網絡：可擴展性和互操作性

在過去的幾年中，我們看到了有關網絡技術的許多變化和轉移。在2020年，我預計我們是一個朝著兩個主要趨勢/目標的網絡社區，可擴展性和互操作性。讓我們分解這些。

可擴展性

可擴展性描述了某人可以採用特定技術並將其擴展到他們自己的需求。在過去的幾年中，我們已經建立了一個基於組件的網絡（ReactComponents！Vue組件！Svelte組件！Web組件！）和Design Systems（DesignSystems！）。有趣的形式如何遵循功能，不是嗎？

現在，我們正在嘗試使該組件系統看起來和感覺更加獨特。網絡上的可擴展性使我們能夠根據自己的需求量身定制平台，並嘗試結果。

CSS本身變得越來越可擴展……

CSS Houdini

使用CSS Houdini，開發人員將能夠擴展CSS對像模型中當前可能的內容，並教授瀏覽器如何閱讀和渲染CSS。

這意味著以前在網絡上不可能的事情，例如傾斜的角落或圓形佈局，現在變得有可能。

如果您還不熟悉Houdini，那是一個傘術語，描述了一些不同的瀏覽器API，旨在提高瀏覽器性能。 ItmakessTyTymingMore Extensibleand letsusers ussusers signerssusers決定了自己的CSS功能。 Houdini的電流包括：

• 屬性和價值
• 油漆API
• 動畫工作
• TypedObjectModel
• 佈局API

使用這些API，用戶可以利用有意義的語義CSS（得益於鍵入對像模型），甚至可以將語義應用於其CSS變量（屬性和值）。使用PAPERT API，您可以繪製畫布並將其應用於邊框圖像（Hello hiell，漸變邊框），或創建動畫的Sparklesthat接受動態參數，並通過單個CSS來實現。

 .sparkles {
  背景：油漆（火花）
}

您可以建立圓形菜單，而無需通過邊距（通過Layoutapi）手動放置項目，並且可以集成自己的互動，這些互動與主線程（使用AnimationWorklet）。

Houdini絕對是新年觀看的人，如果您還沒有，現在是開始嘗試它的好時機。

可變字體

另一種符合使網站更具性能的目標同時提供更多用戶可擴展性的技術是可變的字體。隨著許多新的字體串聯（以及Google Fonts的Casterbeta啟動）現在更可用且易於使用。

可變字體是基於向量的，並且允許為各種字體軸（例如重量和傾斜）設置的廣泛值。這些斧頭字體的插值在點之間順利過渡。

這是一個例子：

可變字體還允許新的Axesto幫助設計師和開發人員的作品更具創造力。這是一些來自出色資源的名為v-fonts的示例：

可變字體得到相對良好的支持，其中87％的現代瀏覽器支持所需的字體格式。

自定義屬性

自定義屬性（如變量字體）也得到很好的支持。雖然它們並不新鮮，但我們會發現我們可以使用自定義屬性來完成的事情。

自定義屬性允許真正動態的CSS變量，這意味著我們可以以JavaScript進行調整，從而將邏輯和样式分開。一個很好的例子是來自david khourshid，他向我們展示瞭如何刺激動畫，並在不出汗的情況下同步樣式。

我們還開始在樣式表中嘗試更多邏輯。我最近發表了一篇博客文章，該文章解釋瞭如何使用本機CSS Calc（）函數以及自定義屬性創建動態顏色主題。

這消除了需要其他工具來處理我們的CSS的需求，並確保該技術在任何技術堆棧中都起作用，這使我進入了下一個2020 Vision：互操作性。

互操作性

根據我的定義，互操作性意味著技術與人類需求之間的工作能力。從技術的角度來看，由於網絡碎片，許多公司在最近的過去遷移了堆棧，或者有多個內部堆棧，現在很可能有興趣保護其技術堆棧免受未來的Changesto保持一定的統一性。

Web組件

Web組件從網絡標準的角度攻擊基於組件的架構的問題來解決此問題。願景是引入一種標準格式，該格式可以在或不帶有圖書館的情況下使用，從而使開發人員體驗和設置UnimoriSulityBetweencomponents受益。

每個Web組件都封裝，並在無依賴項的現代瀏覽器中工作。這項技術仍在不斷發展，我認為我們將在2020年看到很多增長。

邏輯屬性

邏輯屬性挑戰我們，以調整我們如何在頁面上應用佈局尺寸的心理模型，以便我們使我們的頁面跨語言和閱讀模式更加友好。它們允許我們的佈局與用戶體驗互操作。

在英語和其他從左到右的語言中，我們從高度和寬度方面想到了佈局世界，並使用指南針型表達式來邊緣，邊框和填充（頂部，左，底部，右）。但是，如果我們以這種方式進行樣式，然後將語言調整為左鍵的語言，例如阿拉伯語，padding-leftof我們的段落，則更長的是從我們閱讀的開始時開始填充。這打破了佈局。

如果您要寫入郵政局的範圍內，填充將在切換到左側語言時，將填充到頁面的另一側（一個人將要讀取的地方），並保持佈局完整性。

偏好媒體查詢

偏好媒體查詢也正在上升，2020年的功能更大。它們可以定製網站與喜歡高對比度或黑暗模式的人一起工作，以及那些喜歡較少動畫體驗的人。

theupcoming偏好媒體查詢包括：

• 喜歡彩色顏色
• 喜歡對比
• 喜歡減少動作
• 偏愛降低的透明度

在thisVideo中，我使用自定義屬性進行樣式來創建“黑暗模式”的優先介質查詢：

亞軍：速度

速度也是我認為是2020年網絡世界的重點的一個主題。我上面提到的幾種技術已經有了改善網絡性能的好處，即使這不是主要重點（Eghow可變字體可能會減少下載的字體的總重量）。當我們考慮到下一個數十億個用戶在網上速度速度可能缺少的領域時，表現越來越重要。

此外，Web Assembly是一個包裝器，可以使用戶更靠近瀏覽器金屬，這一包裝材料變得越來越受歡迎。 IALSoforesee在來年與Withwithwithbgllin的工作量更多，該技術使用類似的技術來用於高級和快速的圖形渲染。編寫低級代碼可以提供更快的體驗，在某些情況下，可能需要進行預防可視化的瀏覽器。我認為我們將看到這兩種技術在2020年看到Morewebgldemos。

網絡正在不斷發展，這就是使成為一部分的令人興奮的原因。您認為2020年要觀看的目標或技術是什麼？在評論中告訴我們！

以上是2020年的網絡：可擴展性和互操作性的詳細內容。更多資訊請關注PHP中文網其他相關文章！