CSS Secret Garden: 流体背景、固定 Content_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

質問

ここ数年、Web デザインのトレンドがあり、ますます人気が高まっています。これは私が「アダプティブ背景」と呼んでいるものです。幅の内容」。このモデルは通常、次のシナリオで使用されます。

• には複数のコンテンツ セクション
  があり、各コンテンツはウィンドウ幅全体を占め、異なる背景を持ちます。
• さまざまなメディアクエリに基づいて幅が変化する場合でも、固定幅のコンテンツ。場合によっては、異なる領域
  のコンテンツ幅が異なります

次の図に示すように、Web サイト全体がこのスタイルで構成される場合があります:

より微妙なモードは以下のとおりです:

このモードを使用する特定の領域はフッターであり、最も頻繁に使用されます:

この効果を実現する最も一般的な方法は、流体背景用と固定幅コンテンツ用の 2 つの要素を使用することです。後者は、margin: auto を使用して、コンテンツを水平方向の中央に配置します。たとえば、フッター領域は次のような構造になっています。

<footer>    <div class="wrapper">        <!-- 这里放页脚的内容 -->    </div></footer>

CSS は通常次のように記述されます。

footer {    background: #333;} .wrapper {    max-width: 900px;    margin: 1em auto;}

見覚えがあるでしょうか?ほとんどの Web デザイナーや開発者は同様のコードを作成しています。余分なタグ要素の追加が問題なのでしょうか、それとも最新の CSS を使用して余分なタグ要素の追加を回避できるでしょうか?

解決策

この例で使用されている margin:auto について考えてみましょう。このマージンの値は、ビューポートの幅の半分からページ コンテンツの幅の半分を引いたものに等しくなります。ウィンドウ幅の具体的な値がわからないため、その半幅はパーセンテージとしてのみ計算できます (この例では、その祖先要素が幅を明示的に設定していないことを前提としています)。 450ピクセル。 CSS の値と単位 レベル 3 では、いくつかの単純な数式演算を実行できる calc() 関数が定義されています。 auto 値は calc() で置き換えることができます。このとき、.wrapper スタイルは次のようになります。

.wrapper {    max-width: 900px;    margin: 1em calc(50% - 450px);}

margin:auto を使用して固定コンテンツ要素を中央に配置する必要があるためです。 2 番目のコンテナーのコンテンツでラップされます。ただし、現在は auto の代わりに calc() が使用されています。 calc() は単なる CSS の長さの値であり、長さの値を受け入れる任意のプロパティを使用できます。これは、必要に応じて、親要素のパディング値にそれを適用できることも意味します:

footer {    max-width: 900px;    padding: 1em calc(50% - 450px);    background: #333;}.wrapper {}

警告: calc() では式演算子が次のように指定されている必要があることを忘れないでください。スペースで区切らないとエラーが発生します。これは非常に奇妙なルールです。主な理由は上位互換性のためです。おそらく将来、calc() は識別子を認識し、ハイフンを含めることもできるようになります。

ご覧のとおり、この方法で処理すると、.wrapper コンテナーには CSS コードがありません。つまり、必要がなくなり、このコンテナー要素を構造から安全に削除できます。これで必要なスタイルが完成し、冗長な HTML タグは表示されなくなりました。それで、さらに改善できるでしょうか？いつものように、この質問に対する答えは「はい」です。

width スタイルをコメントアウトしても何も起こらないことに注意してください。ウィンドウのサイズに関係なく、視覚効果はまったく同じです。なぜ？パディングの値は 50% - 450px であるため、有効スペースが 900px (2 × 450px) から離れることはありません。幅が大きいか小さいかに関係なく、異なる効果が見られます。ただし、900px は取得した空き領域なので、冗長なので削除できます。

改善を行った場合、代替パディングを追加することで下位互換性を向上させることができます。これにより、ブラウザーが calc() 属性をサポートしていない場合でも、少なくとも何らかのパディングが存在します。

footer {    padding: 1em;    padding: 1em calc(50% - 450px);    background: #333;}

非常に簡単です。3 行の CSS コードのみを使用し、追加の HTML タグを使用せず、固定幅のコンテンツ効果を備えた柔軟でクリーンな下位互換性のある流動的な背景を実現します。

簡単な例を見てみましょう: