計算された値：目に合う以上のもの

フロントエンド開発者は、ブラウザ開発者ツールなしではできません。この記事では、開発者ツールの[コンピューティング]タブに飛び込みます。目立たないものの、相対的なCSS値がどのように解析されるかなど、多くの重要な情報を明らかにすることができます。また、ブラウザのスタイル計算プロセスで継承がどのように機能するかを学びます。

[コンテンツ]タブのコンテンツは、ブラウザが実際にウェブサイトをレンダリングするために使用する値を表示するため、重要です。要素のスタイルが期待と一致しない場合、計算タブはその理由を理解するのに役立ちます。

[Styles]タブ（Firefoxのルールと呼ばれる）の使用に慣れている場合、[計算]タブとどのように異なるのか疑問に思うかもしれません。それらはすべて、要素に適用されるスタイルを示しています。答えは次のとおりです。計算タブには、スタイルシートで宣言されたスタイル、継承されたスタイル、ブラウザのデフォルトスタイルなど、アルファベット順に配置された解析スタイルのリストが表示されます。

一方、[スタイル]タブは、選択した要素のルールセットが書かれたときとまったく同じように表示されます。したがって、スタイルタブには.subhead {font-size: 75%}のようなものが表示されますが、計算タブは実際のフォントサイズ、つまり現在解析された値の70％を表示します。たとえば、上記のレンダリングされたテキストの実際のフォントサイズは13.2pxです。

次に、継承とカスケードの概念を簡単に確認しましょう。これは、計算された値を[計算]タブで導出する上で2つの重要な要素です。

継承とカスケードクラッシュコース

CSSはカスケードスタイルシートの略で、「カスケード」という言葉は非常に重要です。カスケードの動作方法は、CSSを理解するための鍵です。

MDN

カスケードは、CSSの「C」を表すため、注意に値します。これは、文書宣言のソース間の競合を解決するために使用されるメカニズムです。

たとえば、スタイルシートがDivの幅を2回定義するとします。

 <code>div { width: 65vw; } /* 在后面的某个位置*/ div { width: 85vw; }</code>

この例では、最後に宣言するため、2番目の幅が勝ちます。最初の幅は引き続き使用できます!important勝利ですが、これは実際にブルートフォースによってカスケードを破壊することです。重要なのは、カスケードアルゴリズムが各要素に適用されるスタイルを決定し、値を決定するために所定の順序でそれらを優先することです。

カスケードは、ブラウザー、Web開発者、またはユーザーによって設定されているかどうかにかかわらず、明示的に設定されたプロパティに適しています。カスケードの出力が空の場合、継承が作用します。これが発生すると、要素の親要素の属性の計算値が属性の値として抽出されます。たとえば、要素の色を指定した場合、子要素の色を指定しない場合、すべての子要素がその色を継承します。

先に進む前に、継承に関連する4つの重要な属性値に精通している必要があります。記事全体でそれらを使用します。

イニシャル

HTMLドキュメントでは、DOMツリーの最高レベルは要素、 initial ...

...この要素のテキスト色は黒です。要素は緑に設定されています。<code><div>セレクターは特異性が高いですが、 <code>initialが黒に変換される理由に興味があります。

簡単に言えば、このキーワードは、定義テーブル（CSS仕様内）に基づいて属性のデフォルト値を設定します。この場合、Blackはたまたまブラウザの初期色の値の実装です。

記事の最後で、MDNのページを見ることでデフォルトで属性が継承されるかどうかを確認できると述べました。この方法で任意の属性の初期値を見つけることもできます。

継承

非Herited属性の場合、このキーワードは継承を強制します。次の例では、<p>この要素には、無地の赤い境界線があります。 <code>border属性はデフォルトでは継承されませんが、 border属性のinheritキーワードを使用することでお知らせください。<div>で継承<code><p>同じ赤い境界線が要素に宣言されました：</p> <h4 id="解き放つ">解き放つ</h4> <p>属性が継承されている場合、 <code>unset継承された値に解決します。それ以外の場合、初期値が使用されます。これは基本的に、属性が継承するかどうかに基づいて、 unset属性をリセットすることを意味します。以下は、異なるレベルの特異性を持つ要素への影響を示すためにスイッチをunsetデモです。

戻る

CSS属性が要素に設定されていない場合、スタイルは取得されますか？確かに。ブラウザのデフォルトスタイルを使用します。

例えば、<span></span>要素のdisplayプロパティの初期値はinlineですが、スタイルシートのblockとして指定できます。次のデモでボタンを使用します<span></span>トグル要素のdisplayとcolorプロパティにrevert 。

<span></span>インライン要素に正しく戻りますが、待ってください！気づきましたか<span></span>ブラウザのデフォルトのブラック値の代わりに、色の色は緑に変わりますか？これは、 revertにより継承が可能になるためです。ブラウザのデフォルト値に戻って色を設定しますが、<p>緑は要素に明示的に設定されているため、継承するものです。</p> <h3 id="開発者ツールで計算値を見つけます">開発者ツールで計算値を見つけます</h3> <p>これは、開発者ツールの値の計算について話し始める場所です。 CSS属性のデフォルト値と同様に、CSS属性の計算値は、CSS仕様の属性の定義テーブルによって決定されます。これが<code>height属性の外観です。

10EMまたは70％または5VWのいずれかなど、CSSで相対長さを使用しているとします。これらは何か（フォントサイズまたはビューポート）に関連しているため、絶対値をピクセルに解決する必要があります。たとえば、ビューポート幅が1000pxの場合、10％の幅の要素は100pxとして計算できますが、ビューポート幅が変化すると、他の数値として計算されます。

これらの値は、DOMが変更されたときにスタイルの計算と呼ばれるプロセス中に計算されます。これにより、ブラウザは各ページ要素に適用するスタイルを知ることができます。

スタイルの計算には、複数の値を含む複数のステップが含まれます。これらは、CSSカスケードと継承レベル4の仕様に文書化されており、どちらも[計算]タブに表示される最終的な値に影響します。これらを次に見てみましょう。

価値とそれらを処理する方法

スタイル計算プロセスで定義された値には、宣言された値、指定された値、カスケード値、計算値、使用値、および実際の値が含まれます。誰がそんなにたくさんあることを知っていますよね？

値を宣言します

宣言値は、要素に適用される属性宣言です。ブラウザは、以下を含むいくつかの条件に基づいてこれらのステートメントを認識します。

• 宣言は現在のドキュメントに適用されるスタイルシートにあります
• スタイル宣言には一致するセレクターがあります
• スタイル宣言には、有効な構文（つまり、有効な属性名と値）が含まれています

次のHTML：

<code><main>
<p>それは否定ではありません。私は私が受け入れる現実について選択的です。</p>
</main></code>

テキストフォントサイズに適用される宣言された値は次のとおりです。

 <code>main { font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */ } main > p { font-size: 1.5em; /* 声明值*/ }</code>

カスケード値

要素に適用されるすべての宣言された値は、単一の値を返すように優先順位を付けられます。

• ステートメントのソース（ブラウザ、開発者、またはその他のソースからのものですか？）
• 宣言が「 !important 」としてマークされているかどうか
• ルールの特異性（例： span {}およびsection span {} ）
• 外観順序（たとえば、複数の宣言が適用されている場合は、最後の宣言を使用します）

言い換えれば、カスケード値は「勝利」のステートメントです。カスケードが勝利の宣言された価値を生成しない場合、カスケード値はありません。

 <code>main > p { font-size: 1.2em; } main > .product-description { /* 上一个规则中定位的相同段落*/ font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源*/ }</code>

値を指定します

前述のように、カスケード出力が空である可能性があります。ただし、他の方法で値を見つける必要があります。

ここで、要素上の特定の属性の値を宣言するのではなく、親要素について宣言します。複数の場所で同じ値を設定する必要がないため、これは私たちがしばしば意図的に行うことです。この場合、親要素の継承値が使用されます。これは指定された値と呼ばれます。

多くの場合、カスケード値も指定された値です。ただし、カスケード値がなく、関心のあるプロパティが継承されている場合（デフォルトで継承されているか、 inheritキーワードを使用しているか）、継承値にもなります。プロパティが継承されていない場合、指定された値はプロパティの初期値であり、前述のように、 initialキーワードを使用して明示的に設定することもできます。

全体として、指定された値は、その要素で明示的に宣言されているかどうかにかかわらず、要素で使用する予定の値です。これは、スタイルシートに宣言がない場合、ブラウザのデフォルト値も指定された値になる可能性があるため、少しあいまいです。

 <code>/* 浏览器默认值= 16px */ main > p { /* 没有为段落元素及其所有祖先声明字体大小的值*/ }</code>

値を計算します

相対値をどのように絶対ピクセル等価値に解析する必要があるかについて簡単に説明しました。前述のように、このプロセスは事前に決定されています。たとえば、属性定義テーブルには、指定された値が通常どのように解析されるかを詳述する計算値フィールドがあります。

次の例では、相対単位であるEMを使用します。ここで、属性が適用される要素をレンダリングするときに使用される最終的な値は、宣言された値に表示される固定数ではなく、いくつかの要因に基づいて計算する必要がある値です。

 <code>main { font-size: 1.2em; } main > p { font-size: 1.5em; /* 声明值*/ }</code>

段落要素のフォントサイズは1.5EMに設定されており、 main要素のフォントサイズに対して1.2EMです。 mainの場合要素の直接の子要素 ​​- および追加のフォントサイズの宣言は行われません。たとえば、 :rootセレクターを使用して、パラグラフフォントサイズの計算が次の一般的なプロセスに従うと仮定できます。

 <code>Browser_Default_FontSize = 16px; Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>

28.8pxは計算値です。これがデモンストレーションです：

開発者ツールを開き、[計算]タブで計算されたフォントサイズを表示します。

REMユニットを使用しているとします：

 <code>html { font-size: 1.2em; } main { font-size: 1.5rem; } div { font-size: 1.7rem; }</code>

REMユニットの計算値は、ルートHTML要素のフォントサイズに基づいています。つまり、計算はわずかに異なります。この場合、HTML要素に相対ユニットも使用するため、ブラウザのデフォルトフォントサイズ値を使用して、すべてのREM値を解析するために使用するベースフォントサイズを計算します。

 <code>Browser_Default_FontSize = 16px Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>

このデモ用の開発者ツールを再度開きます：

Browser_Default_FontSizeの値は通常、ブラウザで使用されますが、これはブラウザごとに異なる場合があります。現在のデフォルト値を表示するには、開発者ツールの要素を選択し、表示されているフォントサイズを表示します。例のようにルート要素の値を明示的に設定する場合、[ルール]タブで閉じる必要がある場合があることに注意してください。次に、[計算]タブで、ショーのすべてまたはブラウザスタイル（Firefox）チェックボックスを切り替えて、デフォルト値を表示します。

継承中、計算された値は親要素から子要素に渡されます。この計算プロセスでは、以前に見た4つの継承制御キーワードを考慮しています。通常、相対値は絶対になります（つまり、1REMは16pxになります）。これは、相対URLが絶対的なパスになる場所であり、 bolder （ font-weightプロパティの値）などのキーワードが解析される場所でもあります。この例では、ドキュメントでより多くの例を見ることができます。

値を使用します

値の使用は、すべての計算が計算された値で完了した後の最終結果です。ここでは、すべての相対値が絶対値になります。この使用値は（一時的に）ページレイアウトに適用されます。なぜさらなる計算が必要なのか疑問に思うかもしれません。指定された値を処理して値を計算するときに、これがすべて前の段階ですでに処理されていませんか？

問題はこれです：一部の相対値は、ここで絶対値をピクセルにするためにのみ解決できます。たとえば、パーセンテージで指定された幅は、ページレイアウトを解析する必要がある場合があります。ただし、多くの場合、計算された値も使用済みの値になります。

場合によっては、使用値が存在しない場合があることに注意してください。 CSSのカスケードと相続レベル4の仕様によると：

...属性が要素に適用されない場合、値は使用しません。したがって、たとえば、 flex属性は、柔軟なアイテムではない要素に値を使用しません。

実際の値

ブラウザはすぐに使用値を適用できず、調整する必要がある場合があります。この調整された値は、実際の値と呼ばれます。使用可能なフォントに従ってフォントサイズを調整する必要がある状況、またはブラウザがレンダリング中に整数値のみを使用し、非整数値を近似する必要がある場合を考えてください。

ブラウザスタイルの計算の継承

要約すると、継承は明示的に設定されていない要素の値を制御します。継承された属性の場合、この値は、親要素で計算された値から取得され、非相続属性の場合、属性の初期値（ initialキーワードが指定されているときに使用される値）。

「計算値」の存在について以前に簡単に説明しましたが、何かを明確にする必要があります。コンピューターされた値は、スタイル解析プロセスに参加する値タイプとして説明しますが、「計算値」は、ページスタイルのブラウザによって計算された値の共通の用語でもあります。通常、周囲のコンテキストを通じて私たちが言及しているタイプを理解できます。

計算された値のみが継承されたプロパティにアクセスできます。ピクセルの絶対値（477pxなど）、数（例：3）、または値（例： left （例： text-align: left ）は継承プロセスの準備ができています。85％のようなパーセンテージ値はそうではありません。したがって、値（デバイスビューポートの幅など）。

ブラウザの計算タブに表示される値は、必ずしも前述した計算値（計算値と指定値や値の使用など）ではないことに気付いた場合があります。代わりに、表示された値は、 getComputedStyle()関数によって返される値と同じです。この関数は、プロパティに依存する値を返し、計算された値または使用値となります。

それでは、いくつかの例を見てみましょう。

色の継承

<code>main { color: blue; } /* 颜色无论如何都会继承，但我们也可以明确说明： */ main > p { color: inherit; }</code>

main要素のcolor属性は青として計算されます。デフォルトでは色の継承であるため、実際にcolor: inherit必要はありません。しかし、これはこれを説明するのに役立ちます。

色の値は、独自の解析プロセスを経て、使用値になります。

フォントサイズの継承

<code>main { font-size: 1.2em; } main > p { /* 未指定样式*/ }</code>

値とその処理方法に関するセクションでわかるように、フォントサイズの相対値は絶対値として計算され、段落要素によって継承されます。以前にグローバル段落要素セレクターを介してスタイルを整えたことがある場合、段落はカスケードのためにいくつかの追加のスタイルを得ることがあります。可能な継承値は継承され、値を生成しない一部のプロパティは初期値に設定されます。

指定されたフォントサイズ継承率

<code>body { font-size: 18px; } main { font-size: 80%; } main > p { /* 未指定样式*/ }</code>

前の例と同様に、<main></main>要素のフォントサイズは、継承の準備前に絶対になり、段落は体の18px値の80％、つまり14.4pxのフォントサイズを継承します。

強制継承と敷設後の計算

計算された値は通常、レイアウトなしで可能な限り多くの指定された値を解析しますが、前述のように、一部の値は、指定された幅値の割合など、レイアウト後にのみ解析できます。 width継承属性ではありませんが、継承を強制して、レイアウト前後のスタイルの解析を説明することができます。

これは人為的な例ですが、私たちがしたことは、 displayプロパティをnoneに設定して、ページレイアウトから要素を削除することです。タグ内の2つのdivは、親要素の幅の50％を継承します。私の開発者ツール「計算」タブでは、最初のDIVの計算幅は絶対的であり、ピクセル値（私にとって243.75px）に解決されています。一方、 display: none 。

コンピュータータブに表示される値を使用して、親要素の指定されて計算された値が50％（レイアウト前）であると仮定します - レイアウト後の私にとっては487.5pxです。この値キルトDivは2つに分割されます（ブロックの50％を含む）。

これらの値は、ブラウザビューポートの幅が変更されるたびに計算する必要があります。したがって、パーセンテージで指定された値は、計算値の割合になり、ピクセルの使用値になります。

デフォルトの継承プロパティ

属性がデフォルトで継承されているかどうかをどのようにして知りますか？ MDNドキュメントの各CSSプロパティについて、プロパティが継承されているかどうかなど、いくつかの追加の詳細を提供する仕様セクションがあります。これがcolor属性の外観です：

デフォルトで継承し、どの属性が継承しないかは、常識に大きく依存します。

MDN

別の参照オプションは、W3C仕様のプロパティセクションです。もう1つは、このstackoverflowスレッドです。これは、執筆時点では網羅的ではない場合があります。

デフォルトの継承属性の例は次のとおりです。

• color
• direction
• font-family
• font-size
• font
• letter-spacing
• line-height
• list-style-type
• tab-size
• text-align
• text-justify
• text-transform
• visibility
• word-wrap

継承されていない属性の例（ただし、 inheritキーワードを使用して継承を強制することができます）：

• box-shadow
• border
• content
• height
• margin
• object-fit
• opacity
• padding
• position
• transform
• transition
• width
• z-index

うまくいけば、これにより、ブラウザがスタイルをどのように計算するか、そして開発者ツールでそれらを参照する方法を明確に理解することができます。ご覧のとおり、舞台裏では多くの価値があります。これらのコンテキストを持つことは、仕事のトラブルシューティングを支援し、私たちが知っている素晴らしい言語CSSについて詳しく知るのに非常に役立ちます。

さらに読む

• quirksmode.org inherit 、 initialとunset値
• Asha LaxmiのCSS相続財産：紹介
• Heydon PickeringのCSS相続、カスケード、およびグローバルな範囲：あなたの新しい、古い、悪い親友
• Ollie Williamsのカスケード、相続、特異性を処理するための最新のアプローチ
• MDNのカスケードと継承
• MDN継承
• MDNのカスケード
• CSSカスケードと相続レベル4（W3C仕様）
• Ilya Grigorikのレンダリングツリーの構造、レイアウト、描画
• mdn's Window.getComputedStyle()
• アーロン・グスタフソンのインタラクティブURL