グリッドシェパードテクニックを使用して、CSSでデータを注文する

羊飼いは群れの世話をするのが得意であり、秩序と構造を彼らにもたらします。何百もの羊がいても、羊飼いは一日の終わりに彼らを農場に連れ戻すでしょう。

データを処理する場合、プログラマーはしばしばデータが正しくフィルタリングされているかソートされているかを知らないことがよくあります。各要素が受信された場所が不明でないため、配列を反復してからページにデータを表示すると、特に痛みがあります。 Grid Shepherdは、JavaScriptの代わりにCSSグリッドを使用して、プロジェクトを必要な場所に配置してソートするのに役立つテクノロジーです。

これがこの記事で探求するものです。 Grid Shepherdテクノロジーは、処理するデータに順序と構造をもたらすと同時に、これまで以上にデータがどこでどのように使用されるかをより明確に理解することができます。

より深く理解しましょう。

JavaScriptを使用してソートします

私たちは、順序付けられていない農場の動物を繰り返すことから始めます。牛や羊が畑で喜んで放牧されていることを想像してください。 Array.prototype.sortメソッドを使用してプログラムで組み合わせることができ、ページにリストされています。

動物と= [
  {name： 'edna'、animal： 'cow'}、
  {name： 'liam'、animal： 'heep'}、
  {name： 'fink'、animal： 'heep'}、
  {name： 'olga'、animal： 'cow'}、
];
sortedanimals = animal.sort（（a、b）=> {
  if（a.animal> b.animal）return 1;
  0を返します。
}）;
console.log（sortedanimals）;
/* 戻る：
  [{name： 'elga'、animal： 'cow'}、
    {name： 'olga'、animal： 'cow'}、
    {name： 'liam'、animal： 'heep'}、
    {name： 'fink'、animal： 'heep'}]
*/

Grid Shepherdについて学びます

Grid Shepherdメソッドは、JavaScriptを使用せずにデータの並べ替えを可能にします。代わりに、私たちはCSSグリッドに頼って仕事をしています。

構造は上記のJavaScriptオブジェクト配列とまったく同じですが、DOMノードで表されます。

<main><div>エドナ</div>
  <div>リアム</div>
  <div>ジェン</div>
  <div>フィンク</div>
</main>

これらの動物を管理するには、私たちが使用しているものである共通エリアでそれらを囲む必要があります<main></main>要素の理由。 display: gridを設定することにより、各動物が占有する列（または行）を定義できるグリッドフォーマットコンテキストを作成します。

 .sheep {grid-column：1; }
.cow {grid-column：2; }

grid-auto-flow: denseを使用して、各動物は、定義された各エリアで最初の利用可能な場所に自動的に配置されます。これは、任意の数の異なるソートオプションでも使用できます - 別の列を定義するだけで、データは魔法のようにソートされます。

主要 {
  ディスプレイ：グリッド;
  Grid-auto-flow：密度;
}

.sheep {grid-column：1; }
.cow {grid-column：2; }

高度な羊

CSSカウンターを使用して、管理の例をさらに改善できます。これにより、各カラムの動物の数を計算し、Lea Verouの2011年のスピーチでHeydon Pickeringによって提案された数量クエリを適用できます。

数量クエリは、クラスをカウントするための何らかのセレクターに依存します。これは:nth-child(An B [of S]?)擬似クラス表記に最適ですが、現在はsafariでのみ利用可能です）。これは、回避策として:nth-of-type()セレクターを使用する必要があることを意味します。

それを機能させるには、いくつかの新しい要素タイプが必要です。これは、Webコンポーネントによって、またはHTML要素をカスタム名に変更することで実行できます。これは、これらの要素がHTML仕様にない場合でも適用されます。これは、ブラウザがHTMLUnknownElementを使用して未定義のタグを表すため、 divと非常に同様の動作を引き起こすためです。ドキュメントは今次のようになります：

<fence><sheep>リサ</sheep><sheep>ボニー</sheep><cow>オラフ</cow><sheep>ジェン</sheep></fence>

これで、カスタム要素タイプにアクセスできます。羊や牛の数が10以下の場合、赤い背景を適用しましょう。

羊：nth-​​last-of-type（n 10）、
羊：nth-​​last-of-type（n 10）〜羊、
牛：nth-​​last-of-type（n 10）、
牛：nth-​​last-of-type（n 10）〜牛、{
  背景色：赤;
}

さらに、カウンターは、 counter-reset: countsheep countcow; beforeセレクターを使用して各要素を見つけて上向きにカウントします。

羊::前{
  カウンターインクリメント：countsheep;  
  コンテンツ：counter（countsheep）; 
}

ここでは、VUEの移行と2つの異なるソートオプションを使用して、動物を動的に追加および削除するためにVUEを使用します。動物がより多くの動物を追加して削除したとしても、動物が正しい柱を自然に占める方法を見てください。

グリッドシェパードは、順序付けられていないデータにも使用できます。

• 投票で有権者を分離して計算し（おそらく2つの部分として、および対応するプロフィール写真）、リアルタイムで挿入します。
• 位置、年齢、身長に基づくグループの人員/同僚。そして
• 階層を作成します

管理とアクセシビリティ

grid-auto-flow: denseグリッドのDOM構造を変えません - 視覚的には要素が含まれています。カウンター番号が混合されるため、副作用はアルファベット順にソートされた最後の例で見ることができます。 DOM構造を変更すると、スクリーンリーダーを使用している人だけでなく、タブトラバーサルにも影響します。

また、スクリーンリーダーにとってフラットなドキュメント構造は有害である可能性があることに注意してください。代わりに、これらのデモグリッドをグラフィックスとして扱い、より長いテキストの代替情報を提供します。

エンディング！

メッシュなどのCSSレイアウトツールを、従来のレイアウト要件以外のユースケースに使用し、過去に他の言語を必要としていた可能性のあるエリアを入力することができることを見るのは非常に賢いです。この場合、CSSグリッドのレイアウトの利点とJavaScriptのダイナミックデータ処理能力がどのようにどのように希望どおりにレンダリングされたデータを曲げるかとパワーを与える方法と、これがどのようにより多くの選択肢とパワーを与えるかを見ることができます。

以上がグリッドシェパードテクニックを使用して、CSSでデータを注文するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。