最近、HTMLとCSSの世界でグリッドスタイルのシート（GSS）を聞いたことがあるかもしれません。 GSSはCSSレイアウトを再想像し、ブラウザのレイアウトエンジンを cassowary Constraint Solverを活用するエンジンに置き換えます。その言葉を理解していなかったあなた方は…こんにちは、歓迎！
GSSはより良い未来を約束します。 GSSは、相対的なポジショニングとサイジングを約束します。 GSSは、ある1行のコードで別の要素を別の要素に集中させることを約束します。 GSSは配信します。問題は、どのように？
です この記事では、GSSの簡単な歴史と、それが提供する機能の詳細な概要について説明します。また、制約ベースのレイアウト、Cassowary Constraint AlgorithmのGSSを調べて、GSSのインストールと使用のプロセスを説明します。W3Cやブラウザが追いつくのを待たない人たちは、GSSである謎を説明しながら、そこに固執して細心の注意を払うことをお勧めします。そのメモで、少し歴史から始めましょう。
キーテイクアウト
FlexBoxは最新のソリューションの1つですが、そこで小さな変更でさえ、HTMLコンテンツとCSSプレゼンテーションの奥深くに進み、変更を加える必要があります。
GSSがアリーナを取る時が来ました。 GSSはこれらの問題やその他多くの問題に取り組んでいます - 開発者が10年以上抱えてきた問題。
本質的に、GSSはCSSプリプロセッサであり、cassowary.jsを悪用するJavaScriptランタイムです。まだ知らない人、cassowary.jsは、cocoa autolayoutで使用しているJavaScript Port Appleです。
GSSとCassowaryの両方が制約プログラミングに基づいているため、CSSのような宣言言語に力を与えるのに理想的です。制約プログラミングは、Web開発者が「What」を宣言し、「方法」を数学的ソルバーに任せることに関心があるパラダイムです。制約プログラミングは、実装ではなく意図に焦点を当てています
背景情報をいくつか確立したので、GSSオファーの機能に進みましょう。 GSSの概要
これは、GSSの最初の機能に私たちをもたらします。レイアウトが何であるかを定義します。無数の時間を費やし、レイアウトの構築方法を戦略化する時代は終わりました。
GSSがcassowary.jsを利用していることをすでに説明しているため、GSSのもう1つの優れた機能を次に示します。要素は、1つのコードを持つ他の任意の任意の中心にできます。これにより、多くの回避策が不要になり、過去のものがあります。 たとえば、たとえば、サイトのページの右側にある見出しと垂直にサブスクライブボタンを追加する場合は、次のコードを使用します。
別の機能：GSSは、フロート、テーブルセル、クリアフィックス、および水平/垂直センタリングを廃止します。フロート自体がアプリケーションレイアウトに理想的ではないと言っているため、フロートである危険な落とし穴に別れを告げます。
「ウェブサイトが簡単なドキュメントから複雑でインタラクティブなアプリケーション、ドキュメントレイアウト用のツールに進化したため。フロートは、アプリケーションレイアウトに必ずしも適していませんでした。」
- W3Cグリッドレイアウトモジュール（作業ドラフト）.subscribe-button[right] == <span>::window[width]; </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
重要なCSS機能はどうですか？重要ですか？ GSSの4番目の機能は同様のことを行います。GSSは制約階層を使用して、制約を強度で優先順位付けします。ここでは、4つの組み込み強度レベルについて話しています：
！medium
！弱い
！strong
ここまで行ったことがあります。制約ベースのレイアウトを今すぐ見てみましょう。 制約ベースのレイアウトのGSS
制約は、基本的に、保持される可能性のある2つ以上の変数間の関係です。要素のすべての数値特性は、制約される資格があります。例を次に示します：.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>
最初に、Elements ElementaとElementBの両方が150pxの高さを持つように制約されています。 3行目では、2つの要素の合計は225pxです。したがって、2つの要素の制約の1つは保持されません。 GSS
のセレクター GSSのセレクターは、HTML要素のグループに対するクエリであり、最終的に制約の影響を受ける要素を決定するために使用されます。セレクターは、制約を適用する前にDOMから要素を選択して観察する必要があるため、重要です。ルールセットでは、単一のセレクターを介して複数の制約を定義できます。それらをネストして、それらにCSSプロパティを使用することもできます。
このネストされたルールセット：
p[line-height] >= <span>10; </span>p[line-height] <= <span>::window[height] / 20;</span>
GSS
のプロパティ上記の例ではすでにプロパティをカバーしていますが、もう少し詳しく見てみましょう。 GSSでは、プロパティは要素に属する変数です。 CSSで知られているプロパティを使用する場合、対応する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>
GSSは、1999年にバドロス、ボーニング、スタッキーによるキャッサワリー線形算術制約解くアルゴリズムのJavaScriptポート（cassowary.js）を採用しています。
ユーザーは、入力の制約が互いに矛盾しないことを確認する必要はありません。実際、これはキャッソワリーアルゴリズムの本質です。制約を段階的に評価し、最適なソリューションを自動的に発見します。
キャッソワリーアルゴリズムの計算制限
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>GSSの背後にある制約ソルバーは、Cassowaryアルゴリズムと呼ばれます。このアルゴリズムは、線形の制約のみを計算できます（つまり、y = mx cの形式）。基本演算子（、 - 、 *、 /）はアルゴリズムによってサポートされています。 2つ（またはそれ以上）制約された変数の乗算と分割は線形ではないため、エラーが発生します。
<span>(section < article .aclass)[height] == 150;</span>
次に、このコードをマークアップのセクションに追加します：
gssをインストールしたら、タグにtype = text/gssを追加して.gss styleSheetsをロードしてください：
.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-Hostedバージョンを使用しますが、ここでCDNホストバージョンを見つけることができます。次に、GSSリファレンススクリプト（上記に追加した行）の下に次のコードを追加して、GSSをドキュメントオブジェクトに渡します。
p[line-height] >= <span>10; </span>p[line-height] <= <span>::window[height] / 20;</span>
必要に応じて、これはエンジンスクリプトの後に含まれる別のJavaScriptファイルに配置できます。
例1：要素を垂直に中心に#elementa[height] == <span>150; </span>#elementb[height] == <span>150; </span>#elementa[height] <span>+ #elementb[height] == 225;</span>
divを作成し、GSSレイアウトのH2タグにいくつかのテキストを囲み、HTMLに追加します：
私の目標は、そのサイズにもかかわらず、ビューポート内の.foo要素を垂直に中央に集中させ、要素のサイズが変更されても同じアライメントを所定の位置に保つことができることです。
#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
::ウィンドウセレクターを使用して、要素をブラウザ内のページの可視部分と中央に集中させます。
使用:: [Intrinsic-Height]属性は、相対幅を決定するために使用される要素の高さの相対値を取得します。
最初に、type属性をテキスト/gssに設定して、
フル画面のデモを試して、ブラウザを垂直にサイズ変更して、任意のウィンドウサイズの中心にある要素を確認してみてください。
例2：動的に変更されたウィンドウ幅に基づく要素の回転<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>.subscribe-button[right] == <span>::window[width]; </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
上記のコードを編集して、ファイルの正しい場所を指す必要があることに注意してください。 worker.jsファイルはこちらで、gss.jsファイルをこちらを入手できます。
注：いくつかのバグのため、上記のファイルパスは、これを機能させるためにGSSの2.0.0以前のバージョンを指します。 ここで、これを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制約をいくつか追加します。
p[line-height] >= <span>10; </span>p[line-height] <= <span>::window[height] / 20;</span>
この目標を達成するために適用する制約は次のとおりです。
:: window [center] selectorを使用して、要素を中心にブラウザ内のページの可視部分を中心にします。
>使用:: window [width]回転zで制約を作成し、z軸の周りの要素に回転効果を作成します。ここで、:: window [width]から受け取った値は、回転の程度を表します。
codepenでSitePoint（@sitepoint）によるGSSを使用したペン動的回転を参照してください。
フル画面のデモを表示する場合は、ウィンドウを変更してみてください。ウィンドウの幅が変更されたときに、四角いボックスが回転位置を変更することに気付くでしょう。#elementa[height] == <span>150; </span>#elementb[height] == <span>150; </span>#elementa[height] <span>+ #elementb[height] == 225;</span>
GSSの未来は有望に見えます。フロントエンドテクノロジーで前進する時が来ました。 StyleSheetライブラリ全体を引き裂く前に、小規模なプロトタイプで練習することをお勧めします。
#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
まだGSSを使用しましたか？あなたの経験はどうでしたか？コメントセクションでお知らせください。
GSS、またはグリッドスタイルシートは、Web開発者とデザイナーにとって強力なツールです。これは、シンプルで直感的な構文を使用してレスポンシブで柔軟なレイアウトを作成できる制約ベースのレイアウトエンジンです。 GSSは、制約の概念を導入することにより従来のCSSモデルを拡張します。これにより、要素間の関係をより正確かつ柔軟な方法で制御できるようになります。
従来のCSSは、レイアウトにボックスモデルを使用します。これは、複雑なレイアウトを作成するときに制限されて複雑になる可能性があります。一方、GSSは制約ベースのモデルを使用します。これにより、柔軟性と精度が向上します。 GSSを使用すると、要素間の関係を定義し、より直感的な方法で動作を制御できます。あなたのプロジェクトで。これは、公式WebサイトからGSSライブラリをダウンロードするか、NPMのようなパッケージマネージャーを使用することで実行できます。 GSSエンジンがプロジェクトに含まれると、CSSファイルにGSSコードの書き込みを開始できます。はい、GSSはオープンソースプロジェクトです。これは、誰でも開発に貢献し、プロジェクトで無料で使用できることを意味します。 GSSのソースコードはGithubで入手できます。
比較的新しいテクノロジーとして、GSSはまだ進化しています。ただし、その強力な機能と制約ベースのレイアウトへの関心の高まりは、有望な未来があることを示唆しています。より多くの開発者がGSSを採用するにつれて、この革新的なテクノロジーに対するリソース、ツール、コミュニティのサポートが増えることが期待できます。
GSSがアリーナを取る時が来ました。 GSSはこれらの問題やその他多くの問題に取り組んでいます - 開発者が10年以上抱えてきた問題。
本質的に、GSSはCSSプリプロセッサであり、cassowary.jsを悪用するJavaScriptランタイムです。まだ知らない人、cassowary.jsは、cocoa autolayoutで使用しているJavaScript Port Appleです。
GSSとCassowaryの両方が制約プログラミングに基づいているため、CSSのような宣言言語に力を与えるのに理想的です。制約プログラミングは、Web開発者が「What」を宣言し、「方法」を数学的ソルバーに任せることに関心があるパラダイムです。
背景情報をいくつか確立したので、GSSオファーの機能に進みましょう。 GSSの概要制約プログラミングは、実装ではなく意図に焦点を当てています
GSSがcassowary.jsを利用していることをすでに説明しているため、GSSのもう1つの優れた機能を次に示します。要素は、1つのコードを持つ他の任意の任意の中心にできます。これにより、多くの回避策が不要になり、過去のものがあります。 たとえば、
たとえば、サイトのページの右側にある見出しと垂直にサブスクライブボタンを追加する場合は、次のコードを使用します。別の機能：GSSは、フロート、テーブルセル、クリアフィックス、および水平/垂直センタリングを廃止します。フロート自体がアプリケーションレイアウトに理想的ではないと言っているため、フロートである危険な落とし穴に別れを告げます。
「ウェブサイトが簡単なドキュメントから複雑でインタラクティブなアプリケーション、ドキュメントレイアウト用のツールに進化したため。フロートは、アプリケーションレイアウトに必ずしも適していませんでした。」
- W3Cグリッドレイアウトモジュール（作業ドラフト）
.subscribe-button[right] == <span>::window[width]; </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
重要なCSS機能はどうですか？重要ですか？ GSSの4番目の機能は同様のことを行います。GSSは制約階層を使用して、制約を強度で優先順位付けします。ここでは、4つの組み込み強度レベルについて話しています：
！弱い
！medium
！strong
強度のレベルがリストの下に上昇し、実行中により強い制約がより高い優先度を与えられます。例を見てみましょう：
.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から要素を選択して観察する必要があるため、重要です。
次の基本的なセレクターは、GSSによってサポートされていますルールセットでは、単一のセレクターを介して複数の制約を定義できます。それらをネストして、それらにCSSプロパティを使用することもできます。
このネストされたルールセット：
#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>
は次のとおりです
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>ユーザーは、入力の制約が互いに矛盾しないことを確認する必要はありません。実際、これはキャッソワリーアルゴリズムの本質です。制約を段階的に評価し、最適なソリューションを自動的に発見します。
GSSの背後にある制約ソルバーは、Cassowaryアルゴリズムと呼ばれます。このアルゴリズムは、線形の制約のみを計算できます（つまり、y = mx cの形式）。基本演算子（、 - 、 *、 /）はアルゴリズムによってサポートされています。 2つ（またはそれ以上）制約された変数の乗算と分割は線形ではないため、エラーが発生します。
.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>
github経由でzipファイルとしてバージョン2.0.0をダウンロードすることもできます。
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>
すべてが稼働していると、いくつかのコードの例とともにフォローを開始できます。以下に、初心者のチュートリアルについて説明します
a GSS初心者のチュートリアル#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
作成する例はCodepenを介して表示されますが、標準のHTMLドキュメントなどのチュートリアルを使用します。最初に、次のコード行をHTMLに追加して、GSSエンジンスクリプトを追加します。
必要に応じて、これはエンジンスクリプトの後に含まれる別のJavaScriptファイルに配置できます。
例1：要素を垂直に中心に<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>divを作成し、GSSレイアウトのH2タグにいくつかのテキストを囲み、HTMLに追加します：
<span>(section < article .aclass)[height] == 150;</span>
基本的なスタイリングを追加した後、レイアウトを作成するためにいくつかのGSSを追加することができます。これが楽しみが始まるところです。
::ウィンドウセレクターを使用して、要素をブラウザ内のページの可視部分と中央に集中させます。
<span><span>.container</span> {
</span> <span>height: == #elm[height];
</span><span>}</span>最初に、type属性をテキスト/gssに設定して、
GSSの未来は有望に見えます。フロントエンドテクノロジーで前進する時が来ました。 StyleSheetライブラリ全体を引き裂く前に、小規模なプロトタイプで練習することをお勧めします。
ここで取り上げたのは、GSSでできることのほんの一部ですが、このチュートリアルがあなたを始めるために役立つ有益であることを願っています。
まだGSSを使用しましたか？あなたの経験はどうでしたか？コメントセクションでお知らせください。
GSS、またはグリッドスタイルのシートは、Web開発者とデザイナーにとって強力なツールです。これは、シンプルで直感的な構文を使用してレスポンシブで柔軟なレイアウトを作成できる制約ベースのレイアウトエンジンです。 GSSは、制約の概念を導入することにより従来のCSSモデルを拡張します。これにより、要素間の関係をより正確で柔軟な方法で制御できるようになります。
従来のCSSは、レイアウトにボックスモデルを使用します。これは、複雑なレイアウトを作成するときに制限されて複雑になる可能性があります。一方、GSSは制約ベースのモデルを使用します。これにより、柔軟性と精度が向上します。 GSSを使用すると、要素間の関係を定義し、より直感的な方法で動作を制御できます。 GSSの使用を開始するにはどうすればよいですか？GSSの使用を開始するには、プロジェクトにGSSエンジンを含める必要があります。これは、公式WebサイトからGSSライブラリをダウンロードするか、NPMのようなパッケージマネージャーを使用することで実行できます。 GSSエンジンがプロジェクトに含まれたら、CSSファイルにGSSコードの書き込みを開始できます。
既存のCSSコードでGSSを使用できますか？はい、GSSは従来のCSSと一緒に作業するように設計されています。これは、既存のCSSコードを書き換えることなく、プロジェクトにGSSを徐々に導入できることを意味します。 GSSコードは、個別のファイルで記述するか、通常のCSSコードと混合できます。
GSSは、従来のCSSよりもいくつかの利点を提供します。レイアウトをより正確に制御できるようになり、複雑で応答性の高いデザインを簡単に作成できます。また、GSSはコードを簡素化するため、読みやすくなりやすくなります。さらに、GSSはライブ編集をサポートしています。つまり、コードするときにリアルタイムで変更を確認できます。 GSSはJavaScriptを使用して制約ベースのレイアウトエンジンを実装しています。つまり、JavaScriptをサポートする最新のブラウザで動作するはずです。ただし、新しいテクノロジーと同様に、複数のブラウザでデザインをテストして互換性を確保することをお勧めします。はい、GSSを学習するために利用可能ないくつかのリソースがあります。公式のGSS Webサイトは、包括的なガイドとドキュメントを提供しています。 GSSを詳細にカバーするいくつかのオンラインチュートリアルとコースもあります。
はい、GSSはモバイルWeb開発のための優れたツールです。その制約ベースのレイアウトエンジンは、さまざまな画面サイズと向きに適応するレスポンシブデザインを可能にします。これにより、さまざまなデバイスで一貫したユーザーエクスペリエンスを作成しやすくなります。 はい、GSSはオープンソースプロジェクトです。これは、誰でも開発に貢献し、プロジェクトで無料で使用できることを意味します。 GSSのソースコードはGitHubで入手できます。比較的新しいテクノロジーとして、GSSはまだ進化しています。ただし、その強力な機能と制約ベースのレイアウトへの関心の高まりは、有望な未来があることを示唆しています。より多くの開発者がGSSを採用するにつれて、この革新的なテクノロジーに対するリソース、ツール、コミュニティのサポートが増えることが期待できます。
以上がGSSの紹介：グリッドスタイルシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
