PostCSSで今後のCSS機能を有効にします

前の記事「PostCSS Guide：改善されたセレクターとメディアクエリ」に継承された

この記事では、CSS機能を拡張するPostCSSプラグインをさらに検討します。前の記事では、セレクターとメディアクエリを拡張することにより、スタイルシートの構造を改善することに焦点を当てていますが、この記事では、今後の仕様に新しいプロパティと値を実装する方法に焦点を当てます。この記事で説明されているプラ​​グインは、ニーズに応じて効果的にまたは個別に使用できるさまざまな機能を実装しています。

私のお気に入りのプラグインから始めましょう。

キーポイント

• POSTCSSプラグインを使用して、今後のCSS仕様に新しいプロパティと値を実装し、CSSの機能を効果的に拡張できます。これらのプラグインは、開発者のニーズに応じて、一緒にまたは個別に使用できます。
• POSTCSSを使用すると、ブラウザが正式に実装される前に、開発者が将来のCSS機能を使用できます。 postcss-initialプラグインは、initial値とall: initialの組み合わせのサポートを追加し、プラグインはブロックレベルレベルの要素とコンポーネントレベルの要素のスタイルを自動的にリセットします。 postcss-autoreset
• プラグインは、開発者が1つ以上の「カラーアジャスター」関数を使用して基礎となる色を変更できるようにする新しいpostcss-color-function関数を実装します。 color()プラグインは、HWBの色を定義する新しいpostcss-color-hwb関数を実装します。 hwb() postcss-color-grayPostCSSは、新しいCSS機能を早期に採用および評価する有望な機会を提供します。開発者は、まったく新しい視点からスタイルシートを作成し、生産性を向上させる可能性のある利用可能な機能をリストすることをお勧めします。 gray()
• 次のレベルにリセットを選択します

CSS3は、2つの優れた機能を紹介します：

valueと

属性。

値はinitialおよびall値で使用されるため、プロパティを元の値にリセットできます。 initial属性は、これら3つの状態のいずれかにすべての属性をリセットするShorthand属性として使用されます。どちらもそれ自体が興味深いものですが、一緒に使用すると、特定の要素のすべてのスタイルをすばやくリセットし、ページの親要素のスタイルを継承することを防ぐことができます。これは、モジュラーCSSを書くためのもう1つのステップです！ inherit unset残念ながら、IEはまだこれらの2つの機能をサポートしていません。ただし、ご想像のとおり、この問題を解決するプラグインがあります。 all

値と

の組み合わせのサポートが追加されました。それがどのように機能するかは次のとおりです postcss-initial initialにコンパイルされています：all: initial

<code class="language-css">.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}</code>

デフォルトでは、この機能をサポートするネイティブブラウザで使用するために、元のプロパティと

を保持します。

<code class="language-css">.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}</code>

順に、

属性はリセット属性の長いリストに変換されます。 initial

は次のように変換されます all

（宇宙のために、

<code class="language-css">.container {
  all: initial;
}</code>

の後の拡張コード）

BEMまたはスーツを使用する場合、このプラグインはpostcss-autoresetでうまく機能します。これにより、ブロックレベルの要素とコンポーネントレベルの要素のスタイルが自動的にリセットされます。

カスタム属性

レイアウトを使用する場合、スタイルシートでいくつかの値を共有する必要があることがよくあります。たとえば、ブランドの色は、ボタンの背景、リンクのテキスト色、またはテキストブロックの境界として使用できます。現在、これを達成するには、色が使用される場所に複数回繰り返す必要があります。この繰り返しにより、アプリケーションの色を変更するときにパレットを一貫させることが面倒です。

cssのようなpreprocessors like less and sassは、変数でこの問題を解決しました。幸いなことに、W3CはCustom Propertiesと呼ばれる同様の概念に取り組んでいます。同じ問題は解決されますが、プリプロセッサの変数とは異なる動作をします。コンパイル時にSASS変数が解析され、SASS変数が解析されます。 CSSにコンパイルまたはSASSをCSSにコンパイルすると、コンパイラは現在のコンパイル範囲に対応する可変宣言を探し、各インスタンスを対応する値に置き換えます。これは、変数の解析値がコードの使用場所に完全に依存することを意味します。カスタムプロパティは、DOMの要素に対して定義され、子要素によってのみアクセスできます。これは、変数の値がDOMの要素の位置に依存し、実行時にのみ解析できることを意味します。

これまでのところ、眉をひそめたり、眉を上げたりする必要があります。変数の値が実行時にのみ既知である場合、PostCSSプラグインはどのように解析しますか？真実は、できないということです。ただし、機能のサブセットを使用する方法を提供します。すべてのカスタムプロパティを:root要素で定義すると、これらのプロパティはページ上のすべての要素で使用できます。これは、コンパイル時にそれらを解析できることを意味します。

これがどのように見えるかの簡単な例です：

<code class="language-css">.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}</code>

は次のようにコンパイルされます

<code class="language-css">.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}</code>

変数は未定義であるため、20pxのフォールバック値に置き換えられていることに注意してください。ここでは、すべてのカスタムプロパティを--font-size内に保持することが重要です。他の場所で定義されているプロパティは、プラグインが適切に処理できないため無視されます。ここから始めることができ、より多くのブラウザがそれをサポートし始めたら、その使用を拡張できます。 Chromeはバージョン49以来それらをサポートしています。 :root

論理的プロパティ

さまざまなライティングディレクションカルチャーにまたがる国際的なWebサイトを開発したことがある場合は、インターフェイスの複数のバージョンを維持するために必要なことがわかります（左から右または右側など）。このニーズを満たすために、W3Cは論理属性の新しい概念を導入しました。物理的な方向（右または左など）について考える方法、むしろ論理的な方向は、始まり、終わります。仕様はまだ進行中ですが、すでに

プラグインで試してみることができます。 postcss-logical-props

>、border-block-start、border-block-end、offset-block-start たとえば、offset-block-end次のcssがある場合：

オプションを使用してプラグインを呼び出す

<code class="language-css">.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}</code>

は、次の結果が生成されます。

{ dir: 'LTR' }

を使用している間、鏡像が提供されます：

<code class="language-css">.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}</code>

{ dir: 'RTL' }新しいカラー関数

<code class="language-css">.container {
  all: initial;
}</code>

POSTCSSは、色を処理するための新しい機能を提供する完全なプラグインのセットを提供します。

色調整

プラグインは、新しい

関数を実装します。この関数を使用すると、1つ以上の「カラーアジャスター」関数を使用して、基礎となる色を変更できます。各カラーアジャスターは、特定の方法で色を操作できます。

postcss-color-functionここにそれを使用する方法のいくつかの例があります：color()

次の色にコンパイルします：

<code class="language-css">.container {
  /*  此处省略大量重置属性  */
  all: initial;
}</code>

カラーアジャスターの完全なリストは、 hwbカラー表記

<code class="language-css">:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}</code>

HWBは、色を定義する代替方法である色合いの黒さの略です。色を記述するために0から360の色合いの値を使用し、0％に100％白さと黒さを追加します。この表記はHSLに似ており、RGBよりも理解しやすいです。

プラグインは、HWBの色を定義するために新しい

関数を実装します。いくつかの例：

postcss-color-hwb次の色が生成されます：hwb()

<code class="language-css">h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}</code>

gray（）関数

CSSカラーモジュールには、便利な

<code class="language-css">.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}</code>

関数も導入されます。 RGB色の3つのチャネルすべてなど、冗長な情報を指定せずにグレーを生成するために使用できます。

プラグインは、この機能のポリフィルを実装し、非常に簡単に使用できます。

上記のコードは、さまざまな色合いの灰色を生成します：gray() postcss-color-gray

要約

<code class="language-css">.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}</code>

これは、利用可能なすべてのCSSプラグインの完全なリストではありませんが、より興味深いプラグインを選択するだけです。 postcss.partsでより多くのプラグインを探索できます。

<code class="language-css">.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}</code>

CSSは活況を呈しており、PostCSSは活況を呈しています。はい、私たちは皆、ブラウザによってこれらの新機能に対するネイティブサポートを熱心に待っていますが、PostCSSはこれらの機能を早期に採用および評価する有望な機会を提供します。ここでの全体的なアドバイスは、馴染みのあるプリプロセッサの使用から後退し、新しい観点からスタイルシートを書くことを検討しようとすることです。生産性を向上させる可能性のある利用可能な機能をリストし、ワークフローで使用できるようにしてください。すぐに、これらが不足している機能であることに気付くかもしれません。

PostCSSを使用して今後のCSS機能を有効にすることについてよく聞かれる質問（記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。PAQパーツは必要に応じて再編成および書き直すことができますが、元の意図は変わらない。

以上がPostCSSで今後のCSS機能を有効にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。