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

可擴展性

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

現(xiàn)在，我們正在嘗試使該組件系統(tǒng)看起來和感覺更加獨特。網(wǎng)絡上的可擴展性使我們能夠根據(jù)自己的需求量身定制平臺，並嘗試結(jié)果。

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

CSS Houdini

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

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

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

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

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

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

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

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

可變字體

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

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

這是一個例子：

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

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

自定義屬性

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

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

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

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

互操作性

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

Web組件

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

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

邏輯屬性

邏輯屬性挑戰(zhàn)我們，以調(diào)整我們?nèi)绾卧陧撁嫔蠎脕丫殖叽绲男睦砟Ｐ?，以便我們使我們的頁面跨語言和閱讀模式更加友好。它們允許我們的佈局與用戶體驗互操作。

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

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

偏好媒體查詢

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

theupcoming偏好媒體查詢包括：

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

在thisVideo中，我使用自定義屬性進行樣式來創(chuàng)建“黑暗模式”的優(yōu)先介質(zhì)查詢：

亞軍：速度

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

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

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

以上是2020年的網(wǎng)絡：可擴展性和互操作性的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！