介紹GSS：網格樣式表
>您最近可能聽說過HTML和CSS世界中的網格樣式（GSS）。 GSS重新構想CSS佈局，並用利用
那些寧願不再等待W3C或瀏覽器趕上的人，我敦促您掛在那裡並密切注意，而我解釋了GSS的謎團。在這一點上，讓我們從一點點歷史開始。
鑰匙要點
要開始使用GSS，需要通過bower安裝它或通過github作為zip文件下載，然後可以通過在a
>上添加type = type/gss或使用>來加載GSS樣式表。
>。
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>
我將創建一個div，並將一些文本包裝在GSS佈局中的H2標籤中，然後將其添加到HTML：
中
>添加一些基本樣式後，我可以添加一些GSS來創建佈局。這是樂趣開始的地方。
#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
這是我將適用於實現此目標的限制：
>使用::窗口選擇器將元素與瀏覽器中的頁面的可見部分保持為中心。
>使用:: [intinsic-height]屬性要獲得元素高度的相對值，該值將用於確定相對寬度。
- 首先，我將帶有類型屬性設置為文本/GSS的HTML添加一個塊：
- >
- a 塊對於定義我要添加的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>
的元素旋轉 在下一個示例中，
>我將創建一個簡單的彩色正方形形狀，並動態旋轉。首先，讓我們通過在文檔的部分中添加以下代碼行來引導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：
>
#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演示：
#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>
的未來 GSS的未來看起來很有希望。是時候我們前進了前端技術了。我建議您在撕裂整個樣式表圖書館之前練習較小的原型。
>我在這裡介紹的只是您可以使用GSS的一小部分樣本，但我希望您發現本教程有用且有益的是讓您開始。
您是否使用過GSS？您的經歷如何？在評論部分中讓我知道。經常詢問有關GSS（網格樣式）的問題
>>什麼是GSS（網格樣式表）？
GSS或網格樣式表，是Web開發人員和設計師的強大工具。這是一種基於約束的佈局引擎，可讓您使用簡單而直觀的語法創建響應式和靈活的佈局。 GSS通過引入約束概念來擴展傳統的CSS模型，這使您能夠以更精確，更靈活的方式來定義元素之間的關係，並以更精確和靈活的方式來控制其行為。 > >使用GSS？ GSS的未來是什麼？但是，其強大的功能以及對基於約束的佈局的日益興趣表明，它具有有希望的未來。隨著越來越多的開發人員採用GSS，我們可以期望看到更多的資源，工具和社區支持這項創新技術。
使浮子，桌子細胞，透明封裝和水平/垂直居中過時，並採用約束層次結構來優先使用強度的約束，提供四個內置的強度水平：！弱，中等，！強，！ 本質上，GSS是利用CassoWary.js的CSS預處理器和JavaScript運行時。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。
的概述
CSS最大的問題之一是相對論。您可以期望任何CSS元素都具有無休止的屬性列表 - 填充，高度，寬度，浮動，邊距，邊界，輪廓 - 但是這些信息都不告訴我們該元素在頁面上的其他元素（甚至整個頁面）。無盡的列表也沒有回答以不同的屏幕尺寸顯示元素的位置。
“隨著網站從簡單文檔演變為複雜的，交互式應用程序，文檔佈局的工具，例如浮子不一定適合應用程序佈局。”
>強度水平提高了列表，並且在執行過程中，優先級更高。讓我們看一個示例： 您已經做到了這麼遠，讓我們現在看一些基於約束的佈局。 的約束基本上是兩個或多個變量之間可能存在或可能不存在的變量之間的關係。元素的所有數字屬性都有資格受到約束。這是一個示例： 在上面給出的示例中，這兩個約束都有效。這是一個不存在的約束的示例。 最初，兩個元素elementa和Elementb都被約束為150px的高度。在第三行中，兩個元素的總和為225px。因此，這兩個元素的約束之一將無法成立。 GSS支持以下基本選擇器。
中的規則集
相同
>我已經在上面的示例中介紹了屬性，但讓我們更仔細地看一下它們。在GSS中，屬性是屬於元素的變量。當我們使用CSS已知的屬性時，它們相應的GSS計算值將分配為元素上的內聯樣式。
>
cassowary約束算法的簡介 >不需要用戶確保輸入約束不會彼此矛盾。實際上，這是刀片算法的本質。它會逐步評估約束並自動發現最佳解決方案。 GSS背後的約束求解器稱為CASSOWARY算法。該算法只能計算線性的約束（即形式y = mx c）。基本運算符（ - ， *， /）由算法支持。兩個（或多個）約束變量的乘法和劃分不是線性的，因此會丟棄錯誤。 >用於客戶端安裝，請通過鮑爾安裝： 然後將此代碼添加到您的標記的 安裝GSS後，通過在上添加type = type/gss來加載.gss樣式表
或使用元素： >一旦您啟動並運行了所有內容，就可以開始關註一些代碼示例。在下面，我將介紹初學者的教程。
我將創建的示例將通過Codepen顯示，但我將像標準HTML文檔一樣瀏覽教程。首先，我將以下代碼行添加到我的HTML中以添加GSS引擎腳本：
>示例1：垂直居中元素 中
>我的目標是儘管大小尺寸將.foo元素垂直將.foo元素集中在視口內，並且即使元素的大小更改，也能夠將相同的對齊保持在適當的位置。
>使用::窗口選擇器將元素與瀏覽器中的頁面的可見部分保持為中心。 >使用:: [intinsic-height]屬性要獲得元素高度的相對值，該值將用於確定相對寬度。
首先，我將帶有類型屬性設置為文本/GSS的HTML添加一個塊： 參見codepen上的SitePoint（@sitepoint）的GSS的筆垂直中心。 >嘗試全屏演示，然後嘗試垂直調整瀏覽器大小以查看元素以任何窗口尺寸的中心保持。 >我將創建一個簡單的彩色正方形形狀，並動態旋轉。首先，讓我們通過在文檔的> GSS與傳統CSS有何不同？
>傳統CSS使用框模型進行佈局，在創建複雜的佈局時，該模型可能會限制和復雜。另一方面，GSS使用基於約束的模型，該模型允許更具靈活性和精確度。使用GSS，您可以定義元素之間的關係，並以更直觀的方式控制其行為。 是的，是的，GSS旨在工作。與傳統CSS一起。這意味著您可以逐漸將GSS引入項目，而無需重寫現有的CSS代碼。 GSS代碼可以用單獨的文件編寫或與常規CSS代碼混合。
gss開源嗎？這意味著任何人都可以為其開發做出貢獻，並在其項目中免費使用它。 GSS的源代碼可在GitHub上獲得。
網格樣式表（GSS）是CSS預處理器和JavaScript運行時，用CassoWary約束求解器，有前途的相對定位和尺寸以及將任何元素置於另一個代碼中的任何元素的能力。 >
gss採用約束編程，該編程的重點是意圖而不是實施，使開發人員可以聲明“什麼”並將“如何”留給數學求解器。
GSS 。
> GSS是時候參加競技場了。 GSS解決了這些問題，還有更多的問題 - 開發人員十多年來遇到的問題。
約束編程的重點是意圖，而不是實現。
GSS >由於我們已經討論了GSS利用cassowary.js，因此這是GSS的另一個重要功能：一個元素可以以任何一行代碼為中心。這使得很多解決方法都不必要和過去的事情。
>
例如，如果要在網站頁面右側垂直添加訂閱按鈕，請使用以下代碼：.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
！弱
！
！
特殊的
.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>
中的選擇器
GSS中的選擇器是一組HTML元素的查詢，它們用於確定最終受約束影響的元素。選擇器很重要，因為您必須在對其應用約束之前從DOM中選擇和觀察元素。
>
#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>
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>
等於：<span>(section < article .aclass)[height] == 150;</span>
刀片算法的計算限制
.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>
#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>
>我將使用該文件的Codepen託管版本，但是您可以在此處找到CDN託管版本。接下來，我將在GSS參考腳本（我剛剛添加的行）下添加以下代碼，以傳遞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>
>添加一些基本樣式後，我可以添加一些GSS來創建佈局。這是樂趣開始的地方。
<span><span>.container</span> {
</span> <span>height: == #elm[height];
</span><span>}</span>
>示例2：基於動態更改窗口寬度
的元素旋轉
在下一個示例中，
.subscribe-button[right] == <span>::window[width]; </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
>
注意：由於某些錯誤，上面的文件路徑指向pre-2.0.0 gss的版本以使其工作。現在，讓我們通過將其添加到html：
現在，我將返回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上的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（網格樣式）？對於網絡開發人員和設計師來說，>傳統CSS使用框模型進行佈局，在創建複雜的佈局時，該模型可能會限制和復雜。另一方面，GSS使用基於約束的模型，該模型允許更具靈活性和精確度。使用GSS，您可以定義元素之間的關係，並以更直觀的方式控制其行為。>如何開始使用GSS？ 要開始使用GSS，您需要在項目中包括GSS引擎。這可以通過從官方網站下載GSS庫或使用NPM等軟件包管理器來完成。項目中包含GSS引擎後，您可以在CSS文件中開始編寫GSS代碼。 gss使用JavaScript實現其基於約束的佈局引擎，這意味著它應該在支持JavaScript的任何現代瀏覽器中工作。但是，與任何新技術一樣，在多個瀏覽器中測試您的設計總是一個好主意，以確保兼容性。 是的，有幾種資源可以學習GSS。 GSS官方網站提供了綜合指南和文檔。還有幾個在線教程和課程可深入涵蓋GSS。是的，GSS是移動Web開發的絕佳工具。其基於約束的佈局引擎允許適應不同屏幕尺寸和方向的響應式設計。這使得更容易在不同設備上創建一致的用戶體驗。 GSS的未來是什麼？作為一種相對較新的技術，GSS仍在發展。但是，其強大的功能以及對基於約束的佈局的日益興趣表明，它具有有希望的未來。隨著越來越多的開發人員採用GSS，我們可以期望看到更多的資源，工具和社區支持這項創新技術。
以上是介紹GSS：網格樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
