実用的なCSSカスタムプロパティの使用のパターン

CSS変数は、生産環境で使用できるポイントに到達しており、その強力な機能を調査しています。私はそれを使用するためにさまざまな方法を試しましたが、あなたが私と同じようにそれらについて興奮することを願っています。彼らは非常に実用的で強力です！

CSS変数の使用は、多くの場合、いくつかのカテゴリに要約できることがわかりました。もちろん、CSS変数を好きなように使用できますが、これらのさまざまなカテゴリからそれらについて考えることは、それらを使用するさまざまな方法を理解するのに役立つかもしれません。

• 変数：ブランドの色の設定や必要に応じて使用するなど、基本的な使用法。
• デフォルト値：たとえば、デフォルトのボーダーラジウスを設定します。これは、後で上書きすることができます。
• カスケード値：ユーザーの設定などの特定の使用手段に基づいています。
• スコープルールセット：リンクやボタンなどの個々の要素の意図的なスタイルのバリエーション。
• Mixin：その値を新しいコンテキストに適用するように設計されたルールセット。
• インラインプロパティ： HTMLのインラインスタイルから渡された値。

私たちが見る例は、私が作成および維持したCSSフレームワークであるCutestrapからの簡素化された集中パターンです。

ブラウザサポートの簡単な説明

カスタムプロパティに関しては、2つの一般的な質問をよく聞きます。最初のものは、ブラウザのサポートに関するものです。どのブラウザがそれらをサポートしていますか？ブラウザをサポートしていないブラウザで使用する必要があるフォールバックスキームは何ですか？

この記事で説明されているコンテンツをサポートするグローバル市場シェアは85％です。それでも、ユーザーベースに基づいて、プロジェクトの進歩的な強化の量とどこで使用するかを判断するために、Caniuseと相互参照する価値があります。

2番目の質問は、常にカスタムプロパティの使用方法についてです。それでは、その使用法をさらに詳しく見てみましょう！

パターン1：変数

まず、ブランドの色にカスタム属性変数を設定し、SVG要素で使用します。また、フォールバックスキームを使用して、古いブラウザーのユーザーを上書きします。

 html {
  -brand-color：HSL（230、80％、60％）;
}

.logo {
  塗りつぶし：ピンク; /*バックアッププラン*/
  塗りつぶし：var（ -  brand-color）;
}

ここでは、HTMLルールセットの名前が付いている変数-BRAND-COLORを宣言します。変数は常に存在する要素で定義されているため、使用する各要素にカスケードします。要するに、.logoルールセットでこの変数を使用できます。

古いブラウザにピンクのフォールバック値を宣言しました。 2回目の埋め込み宣言では、そのカスタムプロパティに設定した値を返すVar（）関数に渡されます。

パターンはほぼこのようなものです。変数（-variable-name）を定義し、要素（var（ - variable-name））で使用します。

モード2：デフォルト

最初の例で使用したvar（）関数は、アクセスしようとするカスタムプロパティが設定されていない場合にデフォルト値を提供することもできます。

たとえば、ボタンに丸い境界線を提供しているとします。変数を作成することができます - ラウンド - と呼ばれますが、以前のように定義することはありません。代わりに、変数を使用するときにデフォルト値を割り当てます。

 。ボタン {
  /*  - ラウンドネス：2px; */
  Border-Radius：var（ -  Roundness、10px）;
}

定義されているカスタムプロパティなしでデフォルト値を使用するための1つのユースケースは、プロジェクトがまだ設計中であるが、機能性が有効であることです。設計が変更された場合、これにより後で値を更新することがはるかに簡単になります。

したがって、ボタンに締め切りを満たす素敵なデフォルト値を与えることができます。そして、-Roundnessが最終的にグローバルカスタムプロパティに設定されたとき、ボタンはそれに戻らずにその更新を無料で取得します。

Codepenの上記のコードを編集および除外して、ボタンが設定の後にどのように見えるかを確認できます - ラウンドネス！

モード3：カスケード値

基本ができたので、私たちにふさわしい未来の構築を始めましょう。ユーザーがプロフィールでカスタムテキストとバックグラウンドカラーを使用できるようにすることで、AIMとMySpaceが自分の性格を表現することを本当に見逃しています。

それを持ち帰り、すべての生徒が投稿するメッセージの独自のフォント、背景色、テキストの色を設定できる学校のメッセージボードを作成しましょう。

ユーザーベースのトピック

基本的に、学生にカスタムテーマを作成させています。これらのトピック（この場合は.message要素）を使用する子要素がこれらのカスタム属性にアクセスできるように、データアトリブルールセットにトピック構成を設定します。

 。メッセージ {
  バックグラウンドカラー：var（ - 学生バックグラウンド、https：//www.php.cn/link/link/93ac0c50dd620dc7b88e5fe05c70e15bfff）;
  色：var（ - 学生型、https：//www.php.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b000）;
  font-family：var（ - 学生フォント、 "Times New Roman"、Serif）;
  マージンボトム：10px;
  パディング：10px;
}

[data-student-theme = "rachel"] {
  -student-background：RGB（43、25、61）;
  -student-color：RGB（252、249、249）;
  -student-font：arial、sans-serif;
}

[data-student-theme = "jen"] {
  -student-background：https：//www.php.cn/link/93ac0c0dd620dc7b88e5fe05c70e15bd55349;
  -student-color：https：//www.php.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b000;
   - 学生フォント：Avenir、Helvetica、Sans-Serif;
}

[data-student-theme = "Tyler"] {
   - 学生団体：青。
   - 学生色：黄色。
   - 学生フォント：「コミックサンズMS」、「コミックサンズ」、筆記体。
}

これがマーカーです：

<div data-student-theme="chris">
    <p>クリス：私はイベントで話し、世界中で会議でワークショップをしました。</p>
  </div>
  <div data-student-theme="rachel">
    <p>レイチェル：私は他の形式のコミュニケーションよりも電子メールを好む。</p>
  </div>
  <div data-student-theme="jen">
    <p>ジェン：これが、リアルタイムチャットのためにSlackで新しいチームをすぐに設定した理由です。</p>
  </div>
  <div data-student-theme="tyler">
    <p>タイラー：AIMとMySpaceが恋しいですが、このメッセージボードは大丈夫です。</p>
  </div>

[Data-Student-Theme]セレクターを使用して、学生トピックルールセットのすべての学生トピックを設定します。この学生のバックグラウンド、色、フォントのカスタムプロパティを設定すると、.Messageは使用するカスタム属性値を含むDivを含むDivの子要素であるため、これらのカスタムプロパティが.Messageルールセットに適用されます。それ以外の場合、提供されるデフォルト値が使用されます。

読みやすさのテーマカバレッジ

ユーザー向けのカスタムスタイルを制御するのは楽しくてクールですが、ユーザーが選択するスタイルには常にアクセスできるとは限らず、コントラスト、カラービジョンの欠陥、または読書中に目から出血しないのが好きな人を考慮する必要があります。 Geocities Eraを覚えていますか？

より明確なルックアンドフィールを提供するクラスを追加し、親要素に設定して、クラスが存在するときに学生のトピックを上書きするようにしましょう。

 .readable-theme [data-student-theme] {
  -student-background：HSL（50、50％、90％）;
  -student-color：HSL（200、50％、10％）;
  -student-font：Verdana、Geneva、Sans-Serif;
}

 ...

カスケードを利用して、背景、色、フォントが範囲内にあり、各.messageルールセットに適用されるように、より高い特異性を設定することにより、学生のトピックをカバーします。

パターン4：スコープルールセット

スコープといえば、カスタムプロパティをスコープし、それらを使用して、元々はボイラープレートCSSであったものを簡素化できます。たとえば、さまざまなリンク状態の変数を定義できます。

 {
   - リンク：HSL（230、60％、50％）;
  -link-visited：HSL（290、60％、50％）;
  -Link-Hover：HSL（230、80％、60％）;
   - リンクアクティブ：HSL（350、60％、50％）;
}

A：link {
  色：var（ -  link）;
}

A：訪問{
  色：var（ -  link-visited）;
}

A：ホバー{
  色：var（ -  link-hover）;
}

A：Active {
  色：var（ -  link-active）;
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンクの例</a>

今、私たちはすでにです<a></a>カスタムプロパティは、要素にグローバルに記述されており、リンク状態で使用されているため、再度書き込む必要はありません。これらのプロパティの範囲は私たちに限定されています<a></a>要素のルールセットなので、それらはアンカータグとその子要素にのみ設定されます。これにより、グローバルネームスペースを汚染しないことができます。

例：グレースケールリンク

今後、さまざまなユースケースのカスタムプロパティを変更することで作成したリンクを制御できます。たとえば、灰色のリンクを作成しましょう。

 .grayscale {
   - リンク：Lightslategrey;
  -Link-Visited：銀。
   - リンクホバー：dimgray;
   - リンクアクティブ：LightSteelBlue;
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンクの例</a>

さまざまなリンク状態の色を使用して、.grayscaleルールセットを宣言します。このルールセットのセレクターはデフォルトよりも具体的であるため、これらの変数値が使用され、リンクされた状態の擬似クラスルールセットに適用されます。<a></a>要素で定義されたコンテンツ。

例：カスタムリンク

4つのカスタムプロパティを設定すると、あまりにも多くの作業があると感じた場合、1つの色相値を設定した場合はどうなりますか？これにより、管理がはるかに簡単になる可能性があります。

 .custom-link {
   - -hue：30;
   - リンク：HSL（var（ -  hue）、60％、50％）;
  -link-visited：hsl（calc（var（ -  hue）60）、60％、50％）;
  -link-Hover：HSL（var（ -  hue）、80％、60％）;
  -link-active：hsl（calc（var（ -  hue）120）、60％、50％）;
}

。危険 {
   -  hue：350;
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンクの例</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンクの例</a>

変数の変数を導入し、それを他の変数のHSLカラー値に適用することにより、4つのリンク状態すべてを1つの値だけで更新できます。

コンピューティングは、カスタムプロパティと組み合わせて非常に強力です。これは、より多くの努力をすることなく、あなたのスタイルをより表現力豊かにすることができるためです。同様のアプローチを使用して、ボタンのアクセス可能な色のコントラストを強制するジョシュバダーによるこの手法をチェックしてください。

モード5：混合物

カスタムプロパティに関しては、Mixinはカスタムプロパティ値として宣言された関数です。 Mixinのパラメーターは、これらのプロパティが変更されると、Mixinを再計算する他のカスタムプロパティです。これにより、スタイルが更新されます。

見たカスタムリンクの例は、実際にはミックスインです。 -hueの値を設定でき、4つのリンク状態すべてがそれに応じて再計算されます。

例：ベースライングリッドファンデーション

垂直リズムに役立つベースラインメッシュを作成することにより、Mixinの詳細を学びましょう。このようにして、私たちのコンテンツは、一貫した間隔を使用することにより、心地よいリズムを実現します。

 .Baseline、
.baseline * {
   - リズム：2REM;
  -line-height：var（ -  sub-rhythm、var（ -  rhythm））;
  -line-height-ratio：1.4;
   - フォントサイズ：calc（var（ -  line-height） / var（ -  line-height-ratio））;
}

.baseline {
  font-size：var（ -  font-size）;
  Line-Height：var（ -  line-height）;
}

ベースラインメッシュのルールセットを.Baselineクラスと任意の子孫に適用します。

• - リズム：これは私たちのベースラインの礎石です。更新すると、他のすべてのプロパティに影響します。
• -line-height：defaultに設定されています。デフォルトでは、 - sub-rhythmはここに設定されていないためです。
• - sub-rhythm：これにより、全体的なベースライングリッドを維持しながら、-line-height-line-height-font-sizeが上書きすることができます。
• -line-height-ratio：これにより、テキスト行間の適切な間隔を実施するのに役立ちます。
• - フォントサイズ：これは、-line-height by -line-height-ratioを分割することによって計算されます。

また、ベースライングリッドから - フォントサイズとラインハイイトを使用するように設定された.Baselineルールでフォントサイズとライン高さを設定します。要するに、リズムが変化するたびに、読みやすいエクスペリエンスを維持しながら、ラインの高さとフォントのサイズがそれに応じて変化します。

わかりました、ベースラインを使用しましょう。

小さなウェブページを作成しましょう。 -rhythmカスタムプロパティを使用して、すべての要素間の間隔を設定します。

 .BaseLine H2、
.Baseline P、
.baseline ul {
  パディング：0 var（ - リズム）;
  マージン：0 0 var（ - リズム）;
}

.baseline p {
  -line-height-ratio：1.2;
}

.baseline H2 {
   -  sub-rhythm：calc（3 * var（ -  rhythm））;
  -line-height-ratio：1;
}

.Baseline P、
.baseline H2 {
  font-size：var（ -  font-size）;
  Line-Height：var（ -  line-height）;
}

.baseline ul {
  マージン左：var（ - リズム）;
}

<h2 id="小さなウェブページ">小さなウェブページ</h2>
  <p>これは最も小さなウェブページです。 3つの注目すべき機能があります。</p>
  

• 小さい
• 模範
• hufflepuffとして識別します

ここでは、基本的に2つの混合物を使用します。属性をfont-sizeとline-heightをカスタム属性に設定して、タイトルと段落を設定する必要があります。 Mixinはこれらのルールセットで再計算されていますが、更新されたスタイルが適用される前に設定する必要があります。

WildCardセレクターを使用してMixinを適用する場合、ルールセット自体でカスタム属性値を使用したくない場合があることに注意することが重要です。これらのスタイルは、カスケードによってもたらされた他のどの継承よりも具体的であるため、使用せずに上書きすることは困難です。

パターン6：インラインプロパティ

また、カスタムプロパティをインラインで宣言することもできます。実証する軽量グリッドシステムを構築しましょう。

 .grid {
   - コラム：Auto-Fit;

  ディスプレイ：グリッド;
  ギャップ：10px;
  Grid-Template-Columns：Repeat（var（ - 列）、minmax（0、1fr））;
}

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="実用的なCSSカスタムプロパティの使用のパターン"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468445958706.jpg" class="lazy" alt="実用的なCSSカスタムプロパティの使用のパターン"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446478697.jpg" class="lazy" alt="実用的なCSSカスタムプロパティの使用のパターングレー"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="実用的なCSSカスタムプロパティの使用のパターン・グレイ"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446644293.jpg" class="lazy" alt="実用的なCSSカスタムプロパティの使用のパターンクレイジー"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446996811.jpg" class="lazy" alt="Nic Cage GIF">
</div>

デフォルトでは、グリッドには等しいサイズの列があり、自動的に単一行に配置されます。

列の数を制御するために、グリッド要素に-columnsカスタムプロパティをインラインで設定できます。

<div style="--columns: 3;">
  ...
</div>

6つの異なるカスタム属性のユースケースを見ました。少なくとも私が最もよく使用しているものです。カスタムプロパティを既に知っていて使用している場合でも、これらの使用法を確認して、いつ、どこで効果的に使用するかについてより良いアイデアを提供したいと考えています。

カスタムプロパティを使用してさまざまな種類のパターンを使用しましたか？コメントでそれらを共有して、いくつかのデモをリンクしてください - 私はそれらを見たいです！

カスタムプロパティに精通しておらず、プロモーションを探している場合は、ここで説明した例を使用してみてください。これらのプロパティがどれほど適応可能であるか、そしていつでも値を変更する力があるときの興味深い機会の数がわかります。

さらに、CSS-Trickには、カスタム属性ガイドのカスタム属性スキルを向上させることができる他の優れたリソースが多数あります。

以上が実用的なCSSカスタムプロパティの使用のパターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。