>>>クリックしてより多くの記事を取得<<
最近demo 11を書く練習をしていて、XXXのカスタム属性について書いていて、calc、普段はあまり使わないで、生麺の口を比較して、そこでそれをmarkしました.

カスタム属性(--*)

接頭辞付き--example--nameなどの属性名は、var関数を使用してドキュメント全体で多重化できる値付きのカスタム属性を表します.
CSSカスタム属性はカスケード可能です.各カスタム属性は複数回表示され、変数の値はカスケードアルゴリズムとカスタム属性値によって演算されます.

構文

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

Link to sectionの例

This paragraph should have a blue background and yellow text.
This paragraph should have a yellow background and blue text.

  
This paragraph should have a green background and yellow text.

結果

calc

概要

CSS関数calc()は、任意の必要な場所、、、、または場所で使用できます.calc()があれば、計算によってCSS属性の値を決定することができます.また、1つのcalc()の内部に別のcalc()をネストすることもできます.中のcalc()は簡単に括弧を付けたものと見なされます.

構文

calc(  )
where 
 =  [ [ '+' | '-' ]  ]*

where 
 =  [ '*'  | '/'  ]*

where 
 =  |  |  | (  )

/* property: calc(expression) */
width: calc(100% - 80px);

式は、+(加算)-(減算)*(乗算、乗数の少なくとも1つがタイプ)/(除算、被除数(/右の数)がタイプである必要があります).式のオペランドは、任意の構文の種類の長さを使用できます.必要に応じて、1つの式に複数の異なる長さの単位を混用することができます.必要に応じて、カッコを使用して計算順序を調整することもできます.
+と-演算子の両方には常に空白の文字が必要です.

例(指定した外距離を使用してオブジェクトを配置)

calc()を用いることで、1つのオブジェクトに対して左右の等しい外距離を容易に設定ことができる.この例では、CSSを使用して、ウィンドウのエッジから40ピクセルの間隔が左右に1つずつあるウィンドウ全体にわたるbannerを作成します.

.banner {
    position: absolute;
/* fallback for browsers which still doesn't support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}

This is a banner!

CSS変数を使用してcalc()をネスト

次のコードを見てみましょう.

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

すべての変数が展開するとwidthCの値はcalc(calc(100 px/2)/2)となり、与える.fooのwidthプロパティの場合、すべての内部のこれらのcalc()は(ネストされている深さにかかわらず)直接括弧に「拍」されるので、このwidthプロパティの値はcalc((100 px/2)/2)に直接相当するか、25 pxになります.簡単に言えば、1つのcalc()の中のcalc()は括弧に相当するだけです.

リファレンスソース

https://developer.mozilla.org...*
https://developer.mozilla.org...