CSS計算関数ガイド

CSSは、基本的な数学操作を実行するための特別なcalc()関数を提供します。このガイドは、この非常に有用な機能について知っているほとんどすべてをカバーします。

例：

 .main-content {
  / * 100VHから80pxを減算 */
  高さ：calc（100VH -80px）;
}

このガイドは、この実用的な機能のあらゆる側面に飛び込みます。

calc()は値に使用されます

calc()関数は、値にのみ使用できます。次の例は、複数の異なるプロパティの値に使用する方法を示しています。

 .el {
  font-size：calc（3vw 2px）;
  幅：calc（100％-20px）;
  高さ：calc（100VH -20px）;
  パディング：Calc（1VW 5px）;
}

また、プロパティの一部にのみ使用することもできます。

 .el {
  マージン：10px calc（2vw 5px）;
  Border-Radius：15px calc（15px / 3）4px 2px;
  トランジション：変換計算（1s -120ms）;
}

プロパティの一部を形成する別の機能の一部でもあります！たとえば、以下は、勾配カラースケールでcalc()を使用する例です。

 .el {
  背景：＃1E88E5線形勾配（
    一番下に、
    ＃1e88e5、
    ＃1e88e5 calc（50％-10px）、
    ＃3949ab Calc（50％10px）、
    ＃3949AB
  ）;
}

calc()は、長さおよびその他の数値値に使用されます

上記の例はすべて、本質的にデジタルに基づいていることに注意してください。数値を使用するための考慮事項について説明します（ユニットが必要ない場合もあります）が、これは文字列や他の同様のものではなく、数値計算に使用されます。

 .el {
  /* いいえ！ */
  カウンターリセット：calc（ "my" "counter"）;
}
.el :: before {
  /* いいえ！ */
  コンテンツ：calc（ "Candyman" * 3）;
}

ただし、CSSには長さの多くの単位があり、それらはすべてcalc()で動作します。

• PX
• ％
• em
• rem
• で
• mm
• cm
• pt
• PC
• 元
• ch
• Vh
• VW
• vmin
• vmax

ユニット番号は受け入れられません。たとえば、 line-height: calc(1.2 * 1.2);およびtransform: rotate(calc(10deg * 5)); 。

計算を実行することもできませんが、それでも機能します。

 .el {
  / *少し奇妙ですが、それはできます */
  幅：calc（20px）;
}

メディアクエリには適用されません

calc()が正しく使用される場合（長さの単位は属性の値として使用されます）、残念ながらメディアクエリに適用した場合calc()機能しません。

 @media（max-width：40rem）{
  / *狭いまたは正確に40rem */
}

/* いいえ！ */
@media（min-width：calc（40rem 1px））{
  / * 40REMを超える幅 */
}

相互に排他的なメディアクエリをかなり論理的な方法で実行できるため、将来実装できる場合はクールです（上記のように）。

混合ユニット？

これはおそらくcalc()の最も価値のある機能です！上記のほぼすべての例がこれを行っていますが、これを強調するために、ここにはさまざまなユニットが混在しています。

 /*ピクセル単位と混合したパーセント単位*/
幅：calc（100％-20px）;

これは、要素幅と同じ幅、マイナス20ピクセルを意味します。

流体幅の場合、ピクセルのみで値を事前に計算することは単に不可能です。言い換えれば、PolyFillを完了しようとするSASSなどのツールを使用してcalc()事前に処理することはできません。もちろん、ブラウザはそれをうまくサポートしているため、これを行う必要もありません。しかし、ポイントは、この方法calc()ユニットを混合する場合、これをブラウザ（「ランタイム」）で行う必要があることです。

混合ユニットの他の例をいくつか紹介します。

変換：回転（calc（1turn 45deg））;

Animation-Delay：calc（1s 15ms）;

これらのユニットは、実行時に決定されたものとは何の関係もないため、これらは前処理される可能性があります。

プリプロセッサ数学との比較

calc()できることができない最も有用なアクションをカバーしました。ただし、少し重複しています。たとえば、SASSには数学が組み込まれているため、以下を実行できます。

 $パディング：1rem;

.el [data-padding = "extra"] {
  パディング：$パディング2Rem; //処理は3REMです。
  マージンボトム：$パディング * 2; // 2REMに処理されました。
}

ユニットを備えた数学的操作でさえ、そこで機能し、同じユニットを単位の数字で合わせたり増やしたりするか、複数の値を増やします。ただし、ユニットを混合することはできません。また、 calc()にも同様の制限があります（たとえば、乗算や分割は単位のない数値を使用する必要があります）。

数学操作を表示します

calc()のみに固有の機能を使用していなくても、それを使用してCSSで「作業を表示」することができます。たとえば、要素幅の正確な^1⁄7_を計算する必要があるとします…

 .el {
  /*これは理解しやすい*/
  幅：calc（100％ / 7）;

  /*これよりも理解しやすい*/
  幅：14.2857142857％;
}

これは、ある種の自己作成CSS APIで機能する可能性があります。

 [data-columns = "7"] .col {width：calc（100％ / 7）; }
[data-columns = "6"] .col {width：calc（100％ / 6）; }
[data-columns = "5"] .col {width：calc（100％ / 5）; }
[data-columns = "4"] .col {width：calc（100％ / 4）; }
[data-columns = "3"] .col {width：calc（100％ / 3）; }
[data-columns = "2"] .col {width：calc（100％ / 2）; }

calc()の数学演算子

あなたが持っています、 - 、 *および /。しかし、それらは異なって使用されます。

追加（）と減算（ - ）では、両方の数値が長さであることが必要です

.el {
  /* 効率的？ */
  マージン：calc（10px 10px）;

  /* 無効？ */
  マージン：calc（10px 5）;
}

無効な値は、単一の宣言全体を無効にします。

分割（/）では、2番目の数字にユニットがないことが必要です

.el {
  /* 効率的？ */
  マージン：calc（30px / 3）;

  /* 無効？ */
  マージン：calc（30px / 10px）;

  /* 無効？ （0で分割することはできません） */
  マージン：calc（30px / 0）;
}

乗算（*）には、数字の1つにユニットがないことが必要です

.el {
  /* 効率的？ */
  マージン：calc（10px * 3）;

  /* 効率的？ */
  マージン：calc（3 * 10px）;

  /* 無効？ */
  マージン：calc（30px * 3px）;
}

スペースは重要です

まあ、それは追加と減算に当てはまります。

 .el {
  /* 効率的？ */
  font-size：calc（3vw 2px）;

  /* 無効？ */
  font-size：calc（3vw 2px）;

  /* 効率的？ */
  font -size：calc（3vw -2px）;

  /* 無効？ */
  font-size：calc（3VW-2px）;
}

負の数は問題ありません（例： calc(5vw - -5px) ）が、これはスペースが必要だけでなく助けを必要とする例です。

タブ・アトキンスは、スペースが周りに必要であり、実際には解析の問題である理由を教えてくれます。私はそれを完全に理解しているとは言えませんが、たとえば、 2px-3pxは数字「2」とユニット「PX-3px」に解析されます。スペースはカスタムプロパティの構文に関連している必要があると思いましたが、そうではありませんでした！

乗算と分裂は、オペレーターの周りのスペースを必要としません。しかし、良い一般的なアドバイスは、読みやすさや他の演算子の筋肉の記憶のためのスペースを含めることだと思います。

外側のスペースは関係ありません。あなたが好きななら、あなたはラインを破ることもできます：

 .el {
  /* 効率的？ */
  幅：calc（
    100％ / 3
  ）;
}

ただし、これに注意してください。Calc calc()と開いたブラケットの間にスペースはありません。

 .el {
  /* 無効？ */
  幅：calc（100％ / 3）;
}

ネストされたcalc(calc());

あなたはこれを行うことができますが、それは決して必要ありません。 calc()部品を使用しないのと同じですが、追加のブラケットのセットのみを使用します。例えば：

 .el {
  幅：calc（
    Calc（100％ / 3）
     - 
    calc（1rem * 2）
  ）;
}

ブラケットは個別に機能する可能性があるため、これらは内側のcalc()必要としません。

 .el {
  幅：calc（
   （100％ / 3）
     - 
   （1rem * 2）
  ）;
}

この場合、「操作の順序」は、括弧がなくても私たちを助けることができます。つまり、分裂と乗算は最初に（追加と減算の前）に行われるため、ブラケットはまったく必要ありません。このように書くことができます：

 .el {
  幅：calc（100％ / 3-1rem * 2）;
}

ただし、明確さが増していると感じた場合は、ブラケットを自由に使用してください。操作の順序があなたにとって悪い場合（たとえば、最初に追加または減算する必要があります）、ブラケットが必要です。

 .el {
  /* これ*/
  幅：calc（100％2REM / 2）;

  /*これとは大きく異なります*/
  幅：calc（（100％2rem） / 2）;
}

CSSカスタムプロパティとcalc() ？

calc()がユニットを混合する驚くべき能力とは別に、 calc()の次の最高のものは、カスタムプロパティで使用することです。カスタムプロパティは、計算で次のように使用する値を持つことができます。

 html {
   - 間隔：10px;
}

.module {
  パディング：calc（var（ - 間隔） * 2）;
}

多くの構成がCSSカスタムプロパティの束を設定し、必要に応じて残りのCSSを使用できるようにすることで、多くの構成が上部で行われるCSSセットアップを想像できると思います。

カスタムプロパティは互いに参照することもできます。いくつかの数学操作を使用した例を次に示します（ calc()関数が最初に欠落していることに注意してください）、その後後で適用します。 （最終的にはcalc()内にある必要があります。）

 html {
   - 間隔：10px;
  -pacing-l：var（ - 間隔） * 2;
  -pacing-xl：var（ - 間隔） * 3;
}

.module [data-acting = "xl"] {
  パディング：calc（var（ -  spacing-xl））;
}

そのプロパティに覚えてからcalc()を使用する必要があるため、それが好きではないかもしれませんが、これは可能であり、読みやすさの観点から興味深いものになる可能性があります。

カスタムプロパティはHTMLから来ることがありますが、これは非常にクールで便利なものです。 （例を参照してください。

<div style="--index: 1;"> ...</div>
<div style="--index: 2;"> ...</div>
<div style="--index: 3;"> ...</div>

 div {
  /*インデックス値はHTML（フォールバック付き）から来ています*/
  Animation-Delay：calc（var（ -  index、1） * 0.2s）;
}

後でユニットを追加します

ユニットのない数字を簡単に保存したり、事前に数学にユニットのない数字を使用しやすい状況にある場合は、1つとユニットを乗算してユニットを追加する前に、数字が適用されるまでいつでも待つことができます。

 html {
  -importantnumber：2;
}

.el {
  /*番号は2に残りますが、現在はユニットがあります*/
  パディング：calc（var（ -  falitynumber） * 1rem）;
}

色の処理

RGBやHSLなどのカラー形式にはcalc()で処理できる数値があります。たとえば、いくつかの基本的なHSL値を設定してから、それらを変更して自分で作成したシステムを形成します（例）：

 html {
  --H：100;
  --S：100％;
  -l：50％;
}

.el {
  背景：HSL（
    calc（var（ -  h）20）、
    calc（var（ -  s）-10％）、
    calc（var（ -  l）30％）
  ））
}

calc()とattr()を結合することはできません

CSSのattr()関数は、HTMLから属性値を抽出してそれらを使用できるのと同じように、魅力的に見えます。しかし……

<div data-color="red"> ...</div>

 div {
  /* いいえ*/
  色：attr（data-color）;
}

残念ながら、ここには「タイプ」が動作していないため、 attr() content属性で使用される文字列にのみ使用されます。これはこれが機能することを意味します：

 div :: before {
  コンテンツ：attr（data-color）;
}

たとえば、計算のためにこの方法で数値を抽出しようとするのが魅力的である可能性があるため、これについて言及しました。

<div data-columns="7" data-gap="2"> ...</div>

 .grid {
  ディスプレイ：グリッド;

  /*これらの作品のいずれも*/
  Grid-Template-Columns：Repeat（attr（data-columns）、1fr）;
  グリッドギャップ：calc（1Rem * attr（data-gap））;
}

幸いなことに、HTMLのカスタムプロパティも同様に便利またはより便利であるため、これは問題ではありません。

<div style="--columns: 7; --gap: 2rem;"> ...</div>

 .grid {
  ディスプレイ：グリッド;

  /* できる！ */
  Grid-Template-Columns：Repeat（var（ - 列）、1fr）;
  グリッドギャップ：calc（var（ -  gap））;
}

ブラウザツール

ブラウザのdevtoolsは、スタイルシートで作成したcalc()表示する傾向があります。

計算された値を見つける必要がある場合、「計算」タブ（すべてのブラウザdevtools、少なくとも私が知っているもの）があります。

ブラウザのサポート

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

非常に古いバージョン（IE 8やFirefox 3.6など）をサポートする必要がある場合、通常のトリックは、 calc()のプロパティまたは値を使用する前に別のプロパティまたは値を追加することです。

 .el {
  幅：92％; /* 後退する*/
  幅：calc（100％-2REM）;
}

calc()いくつかの既知の問題もありますが、それらはすべて古いブラウザー用です。使用できますか…13がリストされています。ここにいくつかあります：

• Firefox
• IE 9-11 calc()任意の値として使用すると、 box-shadowプロパティはレンダリングされません。
• IE 9-11もエッジサポートwidth: calc()もありません。

ユースケース

calc()を最後に使用した期間をCSS開発者に尋ねました。

それを使用して、フルスクリーンユーティリティクラスを作成します： .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } calc()は、3つのCSSアイテムの1つに属していると思います。

私はそれを使用して、粘着性のあるフッター用のスペースを作ります。

私はそれを使用して、いくつかの流体タイプ/ダイナミックタイポグラフィを設定します...最小、最大、およびビューポートの単位率に基づいて計算されたフォントサイズ。フォントサイズだけでなく、ラインの高さも。

ViewPortユニットなどを含むFluid Typeケースの一部としてcalc()を使用している場合は、必要に応じてズームインしてユーザーがフォントアップまたはダウンアウトを制御できるように、REMまたはEMを使用するユニットを必ず含めてください。

私が本当に気に入っているのは、「コンテンツ幅」カスタムプロパティを持ち、それを使用して必要な間隔を作成することです.margin { width: calc( (100vw - var(--content-width)) / 2); }

それを使用して、クロスブラウザーイニシャルシンクコンポーネントを作成します。これは一部です：

.drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }

私はそれを使用して、いくつかの画像を記事のページで彼らのコンテナをオーバーフローするようにします。

それを使用して、パディングとVW/VHユニットと組み合わせることにより、ページに視覚化を正しく配置します。

私はそれを使用して、 background-positionの制限を克服しますが、特に勾配でのカラーマーカーを配置することの制限を克服します。たとえば、「停止は下から0.75EMです」。

他のヒント

• メディアクエリなしで単一の列に変換できる2列のグリッド
• アスペクト比に似たヒーローコンポーネント
• 強制的な高コントラスト色
• パーセンテージに基づいてクリップパスの調整を支援します

出力は、要求に応じて元の画像形式と配置を維持します。テキストは、コアの意味を保持しながら、独創性のために言い換えられ、再編成されています。

以上がCSS計算関数ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。