您今天如何使用響應迅速的網絡組件-css教學-PHP中文網

首頁

web前端

css教學

您今天如何使用響應迅速的網絡組件

Christopher Nolan

Feb 22, 2025 am 09:38 AM

您今天如何使用響應迅速的網絡組件

幾年前，我開始聽到很多有關Web組件的信息。當噪音降低時，我感到非常興奮，然後完全忘記了它們。事實證明，有一些良好的運動，並且支持開始增加。尤其是響應式的Web組件設置為真正簡化我們如何處理響應設計的方式。聽起來很有前途，許多開發人員今天開始使用它們之前，有四個問題要知道：

他們會…

在本文中，我們將探索每個問題的答案！

鑰匙要點

> Web組件是W3規範，它允許開發人員構建自己的HTML元素，從而可以創建在瀏覽器中本來不存在的UI元素或將常用組件捆綁在社交按鈕或訂閱表單中。

使用Web組件的使用允許為每個組件的單個真實來源創建庫，減少代碼重複並允許與其他開發人員或網站所有者共享組件。這種方法促進了模塊化代碼並簡化了響應式設計的方法。
>

我為什麼要使用它們？

>一個很好的例子，說明您何時可能要使用Web組件，那就是當您在瀏覽器中構建不存在的UI時，例如彩色拾取器，旋轉木馬，手風琴或打字機等元素。另外，您可能會在各個站點上一直使用一些組件，這些組件每次都厭倦了重建。這些是社交按鈕，訂閱表格或通知之類的東西。使用Web組件，您可以使用HTML標籤將標記，樣式和腳本捆綁到封裝的模塊中，例如參考它們。如果您使用了角指令或反應組件，這似乎很熟悉，但是這裡的好處是它是瀏覽器和框架不可思議的。

> Web組件使您可以構建一次UI零件並在任何地方使用它們。這對於像Living StyleGuide這樣的項目是理想的選擇，您想為每個組件構建一個帶有真理來源的庫。這種方法意味著重複更少的代碼並擁有您或您的團隊可以簡單地將引用到界面中的便攜式組件。

>使用Web組件的另一個重要優勢是能夠將這些組件包裝好並與其他開發人員或網站所有者共享。本質上，消費者可以在其網頁中放置一個導入語句，例如：

然後，使用該組件中定義的自定義元素標籤。將此導入到他們的網頁中，他們可以在頁面上擁有自定義組件的許多實例。在訂閱表單示例中，我們可以在頁面上的多個位置使用標籤。當然，如果您這樣做，則需要確保製作的美麗組成部分非常靈活，並且可以在各種設備和屏幕尺寸上使用。 >

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

>將這些壞男孩變成響應式的網絡組件

>我覺得最好的演示方法是例子，所以我將繼續使用訂閱表單，這是一個常見的UI，在不同的站點和實現之間不會改變太大。

>

這是我之前做過的：

在我的Web組件模板中，我有一些對錶單的基本標記。

>我的標記和CSS被藏在我的組件內，利用了規範的陰影dom部分。這給了我封裝，使我可以在代碼中自由使用標籤和輸入選擇器，而不必擔心其他樣式出血或礦山出血到父站點。為了清楚和簡潔，我不會寫出除佈局所使用的樣式以外的其他樣式。我使用了Float：左圖和顯示的組合：桌子來實現此佈局，以防止在任何寬度上破裂。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

>我將使用HTML導入將其拉入站點站點的演示：

>現在我們都已設置，讓我們看一些響應式技術。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>媒體查詢

>我們所知道和愛的經典方法仍然活著，並且在響應式網絡組件內都很好。如果您想在某些斷點中烘烤組件，則可以在模板中應用這些模板，也可以將鉤子（例如，使用類別使用類）應用於容器，如果您想將該決定留給消費者。在這種情況下，我們需要做的就是剝離浮子並將其調整為完全寬度。 >

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

但是，媒體查詢這次不足以拯救我們。

>我對我的註冊表格樣式感到滿意，並且在體內效果很好，但是當網站作者想將其塞入側邊欄中時會發生什麼？突然，我的表格看起來被壓扁了，並不是真正可用的。

這是因為組件不知道其邊界 - 它沒有上下文。

> Web組件的全部要點是您可以將它們放在任何地方，它們可以正常工作嗎？因此，顯然這不會做到，但是您可以使用一些技術來確保您的組件響應迅速且上下文。

> Flexbox Trickery

>如果您正在考慮使用Web組件，那麼您只需要支持現代瀏覽器而不必擔心IE9，在這種情況下，一些Flexbox Magic可能非常適合您將這些魔術轉變為響應式的Web組件。這是我首選的方法，因為它不需要任何其他JavaScript。

再次，這裡的代碼示例純粹顯示了我使用過的佈局樣式：>

通過將容器設置為顯示：flex; flex-inp：包裝，.form__Item元素將出現並排，但是我們仍然需要進行一些調整，以便當容器變得太小時，它們會很好地堆疊。

> 在.form__Item內部，我使用了flex的flex速記：1 0 320px;它以柔性術語轉換為 - 一個生長，柔性收縮為零，柔性基礎為320像素。將Flex包裝設置為包裝，這意味著它不會比我們設置的基礎小（320px）小，但是將其設置為Flex意味著它將佔用其餘可用空間。

我給出了與標籤和輸入元素類似的處理。他們的柔性柔性值總計320，這意味著它們在較小的容器尺寸下的行為將按照所需的方式行為。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

進行這些調整，讓我們看一下Sitepoint的側邊欄中的同一形式：

好得多！但是，有多種方法可以使貓皮膚。

>元素查詢

元素查詢的想法是，您能夠模擬媒體查詢類型功能，但在組件級別 - 對於響應式Web組件非常方便。本質上，想像能夠在您的CSS中寫下類似的東西：

>具有元素查詢，這正是我們可以做的。非常強大嗎？

不幸的是，由於瀏覽器供應商關注導致無限循環的潛力，因此該技術不可用。但是，一些聰明的人已經編寫了插件來啟用此功能。

>在我的示例中，我使用了Marc J Schmidt的CSS元素查詢，這是一個非常不錯的實現。也有以下類似的項目：

>他們所做的就是使用JavaScript檢測組件的寬度並修改屬性，以便您能夠在CSS中進行樣式。有些是事件驅動的，有些是基於調整大小的。

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

>與以上類似的這些插件和小型代碼段的組合結合在一起，我們能夠獲得與側邊欄中的flexbox實現完全相同的結果。

屬性

>我們可以為響應式Web組件的消費者提供的很酷的東西之一是通過屬性的API。例如，您可以設置一個稱為佈局的屬性，並具有“小”和“大”的尺寸。然後，我們的組件消費者可以使用它如下：

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

這將觸發小型實現的樣式。

在陰影dom中，包含的元素被稱為：主機。一個例子看起來像：

然後，這將允許組件消費者編寫一些簡單的JavaScript，以在您提供的不同尺寸之間翻轉。這意味著您可以將其留給消費者，以決定如何將其掛在模塊中。這使您的組件能夠成為更多的未來證明。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>自己嘗試！

如果您有興趣查看我在自己的機器上使用此演示中所指的flexbox版本，則可以在Chrome中進行以下操作：

>安裝CORS Chrome Extension並將其打開。這是為了允許HTML導入從外部站點工作。

>刷新此頁面，要么在新標籤或窗口中打開任何網站，因此擴展名啟動。
在 tag中添加它：

<span><span>@media (max-width: 30em)</span> {
</span>  <span><span>.form__item</span> {
</span>    <span>float: none;
</span>    <span>width: 100%;
</span>  <span>}
</span><span>}</span>

>最後，添加：

<span><span>.form</span> {
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.form__item</span> {
</span>  <span>align-items: center;   
</span>  <span>display: flex;
</span>  <span>flex: 1 0 320px;
</span>  <span>flex-wrap: wrap;
</span>  <span>max-width: 100%;
</span><span>}       
</span>
<span>label {
</span>  <span>flex: 1 0 90px;
</span><span>}
</span>
<span>input {
</span>  <span>flex: 1 0 230px;
</span>  <span>width: 100%;
</span><span>}</span>

>上面的方法實際上可以用於任何UI開發，但由於其可重複使用和可共享的性質，它們特別適合響應式的網絡組件。

>如果您尚未查看Web組件，但我強烈建議您這樣做。雖然目前只有在Chrome和Opera中本地可用的規格，但其他瀏覽器供應商不遠。

>如果您在了解有關響應式網絡設計的更多方面有趣 >響應式Web組件上的經常詢問問題（FAQ）

>設計良好的響應式Web組件的關鍵要素是什麼？

>設計良好的響應式Web組件應該具有靈活性，適應性和高效。它應該具有一個流體網格系統，允許佈局根據屏幕尺寸進行調整。它還應該具有靈活的圖像和介質，可以調整大小以適合屏幕。此外，它應該具有媒體查詢，該查詢允許網站根據屏幕尺寸，分辨率和方向等特徵（例如屏幕尺寸，分辨率和方向）為不同設備使用不同的CSS樣式規則。最後，它應該在加載時間和性能方面有效。

> CSS容器查詢如何有助於響應式組件？