搜尋

首頁 >web前端 >css教學 >介紹GSS：網格樣式表

介紹GSS：網格樣式表

Jennifer Aniston
Jennifer Aniston原創
2025-02-23 09:26:10146瀏覽

Introducing GSS: Grid Style Sheets

介紹GSS：網格樣式表

>您最近可能聽說過HTML和CSS世界中的網格樣式（GSS）。 GSS重新構想CSS佈局，並用利用來代替瀏覽器的佈局引擎。那些不明白這句話的人……你好，歡迎！ > GSS承諾將獲得更美好的未來。 GSS承諾相對定位和尺寸。 GSS承諾將任何元素以一行代碼為中心。 GSS提供。問題是：如何？

> 在本文中，我將介紹GSS的簡要歷史，並深入概述其所提供的功能。我還將查看GSS的基於約束的佈局，Cassowary約束算法，並引導您完成安裝和使用GSS的過程。

那些寧願不再等待W3C或瀏覽器趕上的人，我敦促您掛在那裡並密切注意，而我解釋了GSS的謎團。在這一點上，讓我們從一點點歷史開始。

鑰匙要點

要開始使用GSS，需要通過bower安裝它或通過github作為zip文件下載，然後可以通過在a

>上添加type = type/gss或使用

>來加載GSS樣式表。

  • >簡短的歷史 GSS是與Dan Tocchini成為其創始人兼首席執行官的網格的創建。這回答了為什麼不是基於網格的樣式表被稱為網格樣式表。 >
    • >網絡開發人員與前端技術之間的戰爭已經持續了多年。在過去的十年中，CSS已被證明是勝利的。但是，Web開發人員會定期使用越來越多的工具來建立越來越複雜的用戶界面。例如，以CSS為中心的元素並不是最簡單的任務，尤其是使用可變的高度元素。

    >。

    flexbox是最新的解決方案之一，但是即使是小的更改也需要您深入HTML內容和CSS演示並進行更改。

    > GSS是時候參加競技場了。 GSS解決了這些問題，還有更多的問題 - 開發人員十多年來遇到的問題。

    本質上，GSS是利用CassoWary.js的CSS預處理器和JavaScript運行時。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。

    GSS和CASSOWARY都建立在約束編程上，使其非常適合授權CSS等聲明語言。約束編程是一個範式，Web開發人員關注聲明“什麼”並將“如何”留給數學求解器。

    約束編程的重點是意圖，而不是實現。 >

    >現在我們已經建立了一些背景信息，讓我們繼續進行GSS優惠的功能。

    GSS

    的概述 CSS最大的問題之一是相對論。您可以期望任何CSS元素都具有無休止的屬性列表 - 填充，高度，寬度，浮動，邊距，邊界，輪廓 - 但是這些信息都不告訴我們該元素在頁面上的其他元素（甚至整個頁面）。無盡的列表也沒有回答以不同的屏幕尺寸顯示元素的位置。 >

    這使我們成為GSS的第一個功能：您定義了想要的佈局。花費無數小時的試用和錯誤的日子已經一去不復返了，制定瞭如何構建佈局的策略。

    >由於我們已經討論了GSS利用cassowary.js，因此這是GSS的另一個重要功能：一個元素可以以任何一行代碼為中心。這使得很多解決方法都不必要和過去的事情。

    > 例如，如果要在網站頁面右側垂直添加訂閱按鈕，請使用以下代碼：>

    另一個功能：GSS使浮子，表單元，透明封碼和水平/垂直中心過時。告別危險的陷阱，因為我們有W3C本身，說浮子不是應用程序佈局的理想之選。

    “隨著網站從簡單文檔演變為複雜的，交互式應用程序，文檔佈局的工具，例如浮子不一定適合應用程序佈局。”

    - W3C網格佈局模塊（工作草稿）
    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    > CSS功能呢！ GSS的第四個功能也有類似的事情：GSS採用約束層次結構來優先考慮優勢的約束。我們在這裡談論的四個內置力量級別：


    ！弱

    ！

    ！

    ！
    • 請注意，需要！
      • 特殊的
    • 強度，可確保約束成立，如果沒有，一切都會破裂。建議仔細且不經常使用它。
      • >
    • >強度水平提高了列表，並且在執行過程中，優先級更高。讓我們看一個示例：
      • 您已經做到了這麼遠，讓我們現在看一些基於約束的佈局。
    > 基於約束的佈局

    gss 的約束基本上是兩個或多個變量之間可能存在或可能不存在的變量之間的關係。元素的所有數字屬性都有資格受到約束。這是一個示例：

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    • p稱為selector
      • >
    • > line-height是GSS將計算
      • >值的屬性
    • []用於訪問屬性
    • =定義不等式約束
    • 10和20是像素中的數值
      • >

    在上面給出的示例中，這兩個約束都有效。這是一個不存在的約束的示例。

    > 
    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

    最初，兩個元素elementa和Elementb都被約束為150px的高度。在第三行中，兩個元素的總和為225px。因此，這兩個元素的約束之一將無法成立。

    GSS

    中的選擇器 GSS中的選擇器是一組HTML元素的查詢，它們用於確定最終受約束影響的元素。選擇器很重要，因為您必須在對其應用約束之前從DOM中選擇和觀察元素。

    >

    GSS支持以下基本選擇器。

    GSS

    中的規則集

    規則集將使您在單個選擇器上定義多個約束。您也可以嵌套它們並在其中使用CSS屬性。 
    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

    此嵌套規則集：

    與：

    相同

    GSS 
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    中的屬性

    >我已經在上面的示例中介紹了屬性，但讓我們更仔細地看一下它們。在GSS中，屬性是屬於元素的變量。當我們使用CSS已知的屬性時，它們相應的GSS計算值將分配為元素上的內聯樣式。

    類似的東西：
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

    等於：

    >

    cassowary約束算法的簡介

    GSS使用Badros，Borning and Stuckey，1999年的CASSOWARY線性算術約束解決算法的JavaScript端口（cassowary.js），1999年。算法找到基於用戶使用自然語言給出的輸入約束的佈局的最佳解決方案。 
    <span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

    >不需要用戶確保輸入約束不會彼此矛盾。實際上，這是刀片算法的本質。它會逐步評估約束並自動發現最佳解決方案。

    > 
    <span>(section < article .aclass)[height] == 150;</span>
    刀片算法的計算限制

    GSS背後的約束求解器稱為CASSOWARY算法。該算法只能計算線性的約束（即形式y = mx c）。基本運算符（ - ， *， /）由算法支持。兩個（或多個）約束變量的乘法和劃分不是線性的，因此會丟棄錯誤。

    >安裝GSS

    >用於客戶端安裝，請通過鮑爾安裝：

    然後將此代碼添加到您的標記的部分：> 
    <span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

    >您還可以通過github作為zip文件下載版本2.0.0。

    安裝GSS後，通過在上添加type = type/gss來加載.gss樣式表 

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    或使用元素：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    >一旦您啟動並運行了所有內容，就可以開始關註一些代碼示例。在下面，我將介紹初學者的教程。

    a GSS初學者的教程

    我將創建的示例將通過Codepen顯示，但我將像標準HTML文檔一樣瀏覽教程。首先，我將以下代碼行添加到我的HTML中以添加GSS引擎腳本：>

    >我將使用該文件的Codepen託管版本，但是您可以在此處找到CDN託管版本。接下來，我將在GSS參考腳本（我剛剛添加的行）下添加以下代碼，以傳遞GSS文檔對象。 

    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

    如果您願意，可以將其放置在引擎腳本後包含的單獨的JavaScript文件中。 

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    >示例1：垂直居中元素

    我將創建一個div，並將一些文本包裝在GSS佈局中的H2標籤中，然後將其添加到HTML：

    中

    >添加一些基本樣式後，我可以添加一些GSS來創建佈局。這是樂趣開始的地方。 

    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    >我的目標是儘管大小尺寸將.foo元素垂直將.foo元素集中在視口內，並且即使元素的大小更改，也能夠將相同的對齊保持在適當的位置。

    這是我將適用於實現此目標的限制：>

    >使用::窗口選擇器將元素與瀏覽器中的頁面的可見部分保持為中心。

    >使用:: [intinsic-height]屬性要獲得元素高度的相對值，該值將用於確定相對寬度。

      首先，我將帶有類型屬性設置為文本/GSS的HTML添加一個塊：
    • >
    • a 塊對於定義我要添加的GSS是必要的。我將通過在標籤中添加以下代碼來將元素放置在屏幕的中心：>
    >這就是需要的。現在，使用GSS將該元素垂直（動態高度）居中。以下是演示：

    參見codepen上的SitePoint（@sitepoint）的GSS的筆垂直中心。 
    <span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

    >嘗試全屏演示，然後嘗試垂直調整瀏覽器大小以查看元素以任何窗口尺寸的中心保持。 

    <span>(section < article .aclass)[height] == 150;</span>
    >示例2：基於動態更改窗口寬度

    的元素旋轉 在下一個示例中，

    >我將創建一個簡單的彩色正方形形狀，並動態旋轉。首先，讓我們通過在文檔的部分中添加以下代碼行來引導GSS：>
    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    >請注意，您必須編輯上面的代碼才能指向文件的正確位置。您可以在此處獲取worker.js文件，然後在此處獲取GSS.JS文件。 >

    >

    注意：由於某些錯誤，上面的文件路徑指向pre-2.0.0 gss的版本以使其工作。 現在，讓我們通過將其添加到html：來創建平方形狀。

    …並在CSS中添加一些樣式：

    > 

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    現在，我將返回HTML並添加一些GSS約束。

    >

    >請記住，使用GSS，您只需做出意圖，然後將數學計算留在算法上。在此示例中，我正在嘗試在窗口寬度動態變化時在元素和元素中產生旋轉的窗口之間創建一個約束。 >>>>>。 
    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>
    這是我將適用於實現此目標的限制：>

    >使用::窗口[中心]選擇器將元素置於瀏覽器中的頁面的可見部分。

    >使用::窗口[width]用旋轉-Z創建約束，該約束將對其Z軸周圍的元素產生旋轉效果。在這裡，從:: window [width]收到的值表示旋轉程度。

    >

      >就像我在第一個示例中一樣，我將在html上添加一個樣式塊，並在文本/gss上添加樣式塊。請記住，要定義我要添加的GSS的樣式塊是必需的。
    • >
    • >我將通過在樣式標籤中添加以下代碼來將方框與屏幕相關聯：

    >就這樣做了。查看最終的Codepen演示：

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    >請參閱codepen上的sitepoint（@sitepoint）使用GSS的筆動力旋轉。

    如果您查看全屏演示，請嘗試調整窗口大小。您會注意到，當窗口的寬度更改時，方框將改變其旋轉位置。 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    GSS

    的未來 GSS的未來看起來很有希望。是時候我們前進了前端技術了。我建議您在撕裂整個樣式表圖書館之前練習較小的原型。

    >

    我在這裡介紹的只是您可以使用GSS的一小部分樣本，但我希望您發現本教程有用且有益的是讓您開始。

    您是否使用過GSS？您的經歷如何？在評論部分中讓我知道。

    經常詢問有關GSS（網格樣式）的問題

    >

    >什麼是GSS（網格樣式表）？

    GSS或網格樣式表，是Web開發人員和設計師的強大工具。這是一種基於約束的佈局引擎，可讓您使用簡單而直觀的語法創建響應式和靈活的佈局。 GSS通過引入約束概念來擴展傳統的CSS模型，這使您能夠以更精確，更靈活的方式來定義元素之間的關係，並以更精確和靈活的方式來控制其行為。

    > GSS與傳統CSS有何不同？

    >傳統CSS使用框模型進行佈局，在創建複雜的佈局時，該模型可能會限制和復雜。另一方面，GSS使用基於約束的模型，該模型允許更具靈活性和精確度。使用GSS，您可以定義元素之間的關係，並以更直觀的方式控制其行為。

    >

    >我如何開始使用GSS？

    開始使用GSS，您需要包括GSS引擎在您的項目中。這可以通過從官方網站下載GSS庫或使用NPM等軟件包管理器來完成。項目中包含GSS引擎後，您可以在CSS文件中開始編寫GSS代碼。

    我可以將GSS與我現有的CSS代碼一起使用嗎？

    是的，是的，GSS旨在工作。與傳統CSS一起。這意味著您可以逐漸將GSS引入項目，而無需重寫現有的CSS代碼。 GSS代碼可以用單獨的文件編寫或與常規CSS代碼混合。

    >使用GSS？

    GSS提供了比傳統CSS的多種好處。它允許對佈局進行更精確的控制，從而更輕鬆地創建複雜而響應的設計。 GSS還簡化了代碼，使閱讀和維護更加容易。此外，GSS支持實時編輯，這意味著您可以在代碼時實時看到更改。

    > GSS是所有瀏覽器支持的嗎？

    GSS使用JavaScript來實現其基於約束的佈局引擎，這意味著它應該在支持JavaScript的任何現代瀏覽器中工作。但是，與任何新技術一樣，在多個瀏覽器中測試您的設計總是一個好主意。可用於學習GSS的資源。 GSS官方網站提供了綜合指南和文檔。還有幾個在線教程和課程可深入覆蓋GSS。其基於約束的佈局引擎允許適應不同屏幕尺寸和方向的響應式設計。這使得在不同設備上創建一致的用戶體驗變得更加容易。

    gss開源嗎？這意味著任何人都可以為其開發做出貢獻，並在其項目中免費使用它。 GSS的源代碼可在GitHub上獲得。

    GSS的未來是什麼？但是，其強大的功能以及對基於約束的佈局的日益興趣表明，它具有有希望的未來。隨著越來越多的開發人員採用GSS，我們可以期望看到更多的資源，工具和社區支持這項創新技術。

    網格樣式表（GSS）是CSS預處理器和JavaScript運行時，用CassoWary約束求解器，有前途的相對定位和尺寸以及將任何元素置於另一個代碼中的任何元素的能力。 >

    gss採用約束編程，該編程的重點是意圖而不是實施，使開發人員可以聲明“什麼”並將“如何”留給數學求解器。 GSS

    使浮子，桌子細胞，透明封裝和水平/垂直居中過時，並採用約束層次結構來優先使用強度的約束，提供四個內置的強度水平：！弱，中等，！強，！

    GSS使用CASSOWARY線性算術約束算法解決算法來根據用戶自然語言給出的輸入約束來找到最佳的佈局解決方案，從而逐漸評估約束並自動發現最佳解決方案。 >>>>>>>>>>>>
      。
      • 要開始使用GSS，需要通過bower安裝它或通過github作為zip文件下載，然後可以通過在a
    • >上添加type = type/gss或使用
      • >來加載GSS樣式表。
    • 簡短的歷史
      • GSS是與Dan Tocchini成為其創始人兼首席執行官的網格的創建。這回答了為什麼不是基於網格的樣式表被稱為網格樣式表。 >
    • >網絡開發人員與前端技術之間的戰爭已經持續了多年。在過去的十年中，CSS已被證明是勝利的。但是，Web開發人員會定期使用越來越多的工具來建立越來越複雜的用戶界面。例如，以CSS為中心的元素並不是最簡單的任務，尤其是使用可變的高度元素。 >。 flexbox是最新的解決方案之一，但是即使是小的更改也需要您深入HTML內容和CSS演示並進行更改。
    > GSS是時候參加競技場了。 GSS解決了這些問題，還有更多的問題 - 開發人員十多年來遇到的問題。

    本質上，GSS是利用CassoWary.js的CSS預處理器和JavaScript運行時。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。

    GSS和CASSOWARY都建立在約束編程上，使其非常適合授權CSS等聲明語言。約束編程是一個範式，Web開發人員關注聲明“什麼”並將“如何”留給數學求解器。

    約束編程的重點是意圖，而不是實現。 >

    >現在我們已經建立了一些背景信息，讓我們繼續進行GSS優惠的功能。
    GSS

    的概述 CSS最大的問題之一是相對論。您可以期望任何CSS元素都具有無休止的屬性列表 - 填充，高度，寬度，浮動，邊距，邊界，輪廓 - 但是這些信息都不告訴我們該元素在頁面上的其他元素（甚至整個頁面）。無盡的列表也沒有回答以不同的屏幕尺寸顯示元素的位置。 >

    這使我們成為GSS的第一個功能：您定義了想要的佈局。花費無數小時的試用和錯誤的日子已經一去不復返了，制定瞭如何構建佈局的策略。

    >由於我們已經討論了GSS利用cassowary.js，因此這是GSS的另一個重要功能：一個元素可以以任何一行代碼為中心。這使得很多解決方法都不必要和過去的事情。

    > 例如，如果要在網站頁面右側垂直添加訂閱按鈕，請使用以下代碼：>

    另一個功能：GSS使浮子，表單元，透明封碼和水平/垂直中心過時。告別危險的陷阱，因為我們有W3C本身，說浮子不是應用程序佈局的理想之選。

    “隨著網站從簡單文檔演變為複雜的，交互式應用程序，文檔佈局的工具，例如浮子不一定適合應用程序佈局。”

    - W3C網格佈局模塊（工作草稿）

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    > CSS功能呢！ GSS的第四個功能也有類似的事情：GSS採用約束層次結構來優先考慮優勢的約束。我們在這裡談論的四個內置力量級別：

    ！弱


    ！

    ！
    ！

    請注意，需要！
      特殊的
    • 強度，可確保約束成立，如果沒有，一切都會破裂。建議仔細且不經常使用它。
      • >

      >強度水平提高了列表，並且在執行過程中，優先級更高。讓我們看一個示例：

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    您已經做到了這麼遠，讓我們現在看一些基於約束的佈局。

    > 基於約束的佈局

    gss

    的約束基本上是兩個或多個變量之間可能存在或可能不存在的變量之間的關係。元素的所有數字屬性都有資格受到約束。這是一個示例：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    • p稱為selector
      • >
    • > line-height是GSS將計算
      • >值的屬性
    • []用於訪問屬性
    • =定義不等式約束
    • 10和20是像素中的數值
      • >

    在上面給出的示例中，這兩個約束都有效。這是一個不存在的約束的示例。

    > 
    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

    最初，兩個元素elementa和Elementb都被約束為150px的高度。在第三行中，兩個元素的總和為225px。因此，這兩個元素的約束之一將無法成立。

    GSS

    中的選擇器 GSS中的選擇器是一組HTML元素的查詢，它們用於確定最終受約束影響的元素。選擇器很重要，因為您必須在對其應用約束之前從DOM中選擇和觀察元素。

    >

    GSS支持以下基本選擇器。

    GSS

    中的規則集

    規則集將使您在單個選擇器上定義多個約束。您也可以嵌套它們並在其中使用CSS屬性。 
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    此嵌套規則集：

    與：

    相同

    GSS 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    中的屬性

    >我已經在上面的示例中介紹了屬性，但讓我們更仔細地看一下它們。在GSS中，屬性是屬於元素的變量。當我們使用CSS已知的屬性時，它們相應的GSS計算值將分配為元素上的內聯樣式。

    類似的東西：
    <span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

    等於：

    >

    cassowary約束算法的簡介

    GSS使用Badros，Borning and Stuckey，1999年的CASSOWARY線性算術約束解決算法的JavaScript端口（cassowary.js），1999年。算法找到基於用戶使用自然語言給出的輸入約束的佈局的最佳解決方案。 
    <span>(section < article .aclass)[height] == 150;</span>

    >不需要用戶確保輸入約束不會彼此矛盾。實際上，這是刀片算法的本質。它會逐步評估約束並自動發現最佳解決方案。

    >

    刀片算法的計算限制

    GSS背後的約束求解器稱為CASSOWARY算法。該算法只能計算線性的約束（即形式y = mx c）。基本運算符（ - ， *， /）由算法支持。兩個（或多個）約束變量的乘法和劃分不是線性的，因此會丟棄錯誤。 

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    >安裝GSS

    >用於客戶端安裝，請通過鮑爾安裝：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

    然後將此代碼添加到您的標記的

    部分：> 

    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>
    >您還可以通過github作為zip文件下載版本2.0.0。

    安裝GSS後，通過在上添加type = type/gss來加載.gss樣式表

    或使用元素：

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    >一旦您啟動並運行了所有內容，就可以開始關註一些代碼示例。在下面，我將介紹初學者的教程。 

    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    a GSS初學者的教程

    我將創建的示例將通過Codepen顯示，但我將像標準HTML文檔一樣瀏覽教程。首先，我將以下代碼行添加到我的HTML中以添加GSS引擎腳本：>

    >我將使用該文件的Codepen託管版本，但是您可以在此處找到CDN託管版本。接下來，我將在GSS參考腳本（我剛剛添加的行）下添加以下代碼，以傳遞GSS文檔對象。

    如果您願意，可以將其放置在引擎腳本後包含的單獨的JavaScript文件中。 
    <span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

    >示例1：垂直居中元素

    <span>(section < article .aclass)[height] == 150;</span>
    我將創建一個div，並將一些文本包裝在GSS佈局中的H2標籤中，然後將其添加到HTML：

    中

    >添加一些基本樣式後，我可以添加一些GSS來創建佈局。這是樂趣開始的地方。

    >我的目標是儘管大小尺寸將.foo元素垂直將.foo元素集中在視口內，並且即使元素的大小更改，也能夠將相同的對齊保持在適當的位置。

    這是我將適用於實現此目標的限制：> 
    <span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

    >使用::窗口選擇器將元素與瀏覽器中的頁面的可見部分保持為中心。

    >使用:: [intinsic-height]屬性要獲得元素高度的相對值，該值將用於確定相對寬度。

    首先，我將帶有類型屬性設置為文本/GSS的HTML添加一個塊：

    >
    • a 塊對於定義我要添加的GSS是必要的。我將通過在標籤中添加以下代碼來將元素放置在屏幕的中心：>
    • >這就是需要的。現在，使用GSS將該元素垂直（動態高度）居中。以下是演示：

      • 參見codepen上的SitePoint（@sitepoint）的GSS的筆垂直中心。

      >嘗試全屏演示，然後嘗試垂直調整瀏覽器大小以查看元素以任何窗口尺寸的中心保持。

      >示例2：基於動態更改窗口寬度

      的元素旋轉 在下一個示例中，

      >我將創建一個簡單的彩色正方形形狀，並動態旋轉。首先，讓我們通過在文檔的

      部分中添加以下代碼行來引導GSS：> 

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    >請注意，您必須編輯上面的代碼才能指向文件的正確位置。您可以在此處獲取worker.js文件，然後在此處獲取GSS.JS文件。 >

    >

    注意：由於某些錯誤，上面的文件路徑指向pre-2.0.0 gss的版本以使其工作。

    現在，讓我們通過將其添加到html：來創建平方形狀。 …並在CSS中添加一些樣式：

    >

    現在，我將返回HTML並添加一些GSS約束。 
    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    >

    >請記住，使用GSS，您只需做出意圖，然後將數學計算留在算法上。在此示例中，我正在嘗試在窗口寬度動態變化時在元素和元素中產生旋轉的窗口之間創建一個約束。 >>>>>。

    這是我將適用於實現此目標的限制：> 
    p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

    >使用::窗口[中心]選擇器將元素置於瀏覽器中的頁面的可見部分。

    >使用::窗口[width]用旋轉-Z創建約束，該約束將對其Z軸周圍的元素產生旋轉效果。在這裡，從:: window [width]收到的值表示旋轉程度。

    >

    >就像我在第一個示例中一樣，我將在html上添加一個樣式塊，並在文本/gss上添加樣式塊。請記住，要定義我要添加的GSS的樣式塊是必需的。
      >
      • >我將通過在樣式標籤中添加以下代碼來將方框與屏幕相關聯：
    >就這樣做了。查看最終的Codepen演示：

    >請參閱codepen上的sitepoint（@sitepoint）使用GSS的筆動力旋轉。 
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    如果您查看全屏演示，請嘗試調整窗口大小。您會注意到，當窗口的寬度更改時，方框將改變其旋轉位置。

    GSS 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    的未來 GSS的未來看起來很有希望。是時候我們前進了前端技術了。我建議您在撕裂整個樣式表圖書館之前練習較小的原型。

    >

    我在這裡介紹的只是您可以使用GSS的一小部分樣本，但我希望您發現本教程有用且有益的是讓您開始。

    您是否使用過GSS？您的經歷如何？在評論部分中讓我知道。

    經常詢問有關GSS（網格樣式）的問題

    > > 什麼是GSS（網格樣式）？對於網絡開發人員和設計師來說， gss或網格樣式表是一個有力的工具。這是一種基於約束的佈局引擎，可讓您使用簡單而直觀的語法創建響應式和靈活的佈局。 GSS通過引入約束的概念來擴展傳統的CSS模型，該模型使您能夠以更精確，更靈活的方式來定義元素之間的關係。

    >傳統CSS使用框模型進行佈局，在創建複雜的佈局時，該模型可能會限制和復雜。另一方面，GSS使用基於約束的模型，該模型允許更具靈活性和精確度。使用GSS，您可以定義元素之間的關係，並以更直觀的方式控制其行為。>如何開始使用GSS？

    要開始使用GSS，您需要在項目中包括GSS引擎。這可以通過從官方網站下載GSS庫或使用NPM等軟件包管理器來完成。項目中包含GSS引擎後，您可以在CSS文件中開始編寫GSS代碼。

    >我可以將GSS與現有的CSS代碼一起使用嗎？是的，GSS旨在與傳統CSS一起工作。這意味著您可以逐漸將GSS引入項目，而無需重寫現有的CSS代碼。 GSS代碼可以用單獨的文件編寫或與常規CSS代碼混合。

    >使用GSS有什麼好處？ GSS比傳統CSS提供了多種好處。它允許對佈局進行更精確的控制，從而更輕鬆地創建複雜而響應的設計。 GSS還簡化了代碼，使閱讀和維護更加容易。此外，GSS支持實時編輯，這意味著您可以在編碼時實時看到更改。 GSS是否由所有瀏覽器支持？

    gss使用JavaScript實現其基於約束的佈局引擎，這意味著它應該在支持JavaScript的任何現代瀏覽器中工作。但是，與任何新技術一樣，在多個瀏覽器中測試您的設計總是一個好主意，以確保兼容性。

    > 是否有任何資源可以學習GSS？

    是的，有幾種資源可以學習GSS。 GSS官方網站提供了綜合指南和文檔。還有幾個在線教程和課程可深入涵蓋GSS。是的，GSS是移動Web開發的絕佳工具。其基於約束的佈局引擎允許適應不同屏幕尺寸和方向的響應式設計。這使得更容易在不同設備上創建一致的用戶體驗。

    是的，GSS是一個開源項目。這意味著任何人都可以為其開發做出貢獻，並在其項目中免費使用它。 GSS的源代碼可在GitHub上獲得。

    GSS的未來是什麼？作為一種相對較新的技術，GSS仍在發展。但是，其強大的功能以及對基於約束的佈局的日益興趣表明，它具有有希望的未來。隨著越來越多的開發人員採用GSS，我們可以期望看到更多的資源，工具和社區支持這項創新技術。

    以上是介紹GSS：網格樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    JavaScript css html npm Float Object define if for while select include require try throw catch Error using Attribute Property JS dom this location history position padding viewport background input table github idea cocoa everything Access word Other
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：我當前的HTML電子郵件開發工作流程下一篇：我當前的HTML電子郵件開發工作流程

    相關文章

    看更多