CSS Secret Garden: ゼブラストライプの背景にテキストの行_html/css_WEB-ITnose

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

数年前に初めて疑似要素 :nth-child() / :nth-of-type() に出会ったとき、最も一般的な使用例の 1 つは「ゼブラ ストライプ」テーブルでした。

これには、以前はサーバー側のコード、クライアント側のスクリプト、または面倒な手動コードが必要でしたが、現在は次の単純なコード行だけで実現できます。

tr:nth-child(even) {    background: rgba(0,0,0,.2);}

UI デザインのゼブラ ストライプ行テーブル (上記のようにMac OSの場合

ただし、同じ効果を表の行ではなくテキスト行に適用する場合、できることは何もありません。これは、コード スニペットの読みやすさを向上させるのに役立ちます。多くの作成者は、このメソッドを :nth-child() テクニックと同じように構文の強調表示に使用できるように、JavaScript を使用して各行を dc6dce4a544fdca2df29d5ac0ea9906b で囲むことになります。これは、理論的な単純性が低下する (スタイル設定に JS を使用すべきではない) だけでなく、多くの DOM 要素によってページの読み込みが遅くなるため、非常に脆弱な解決策である (テキスト サイズを大きくしたり、改行するとどうなりますか?)もっと良い方法はありますか？

多くの作成者が CSS ワーキング グループに :nth-line() 疑似クラスを申請するリクエストを送信しましたが、パフォーマンス上の理由から拒否されました。

解決策

行を表す擬似要素に暗い背景色を適用する代わりに、別の角度から問題を考えてみましょう。ゼブラストライプの背景画像を要素全体に適用してみてはいかがでしょうか?最初は怖く聞こえるかもしれませんが、CSS グラデーションを通じて背景を CSS で直接生成し、フォント サイズの変更に自動的に適応するように em 単位で背景を作成できます。

このアイデアを拡張して、下の図のゼブラ ストライプのコードを書いてみましょう。

まず、「CSS Secret Garden: Striped Background」スキームに従って、横縞を作成する必要があります。各バーは 2 行を占めるため、background-size は line-height の 2 倍にする必要があります。初めて試したコードは次のとおりです。

padding: .5em;line-height: 1.5;background: beige;background-image: linear-gradient(                  rgba(0,0,0,.2) 50%, transparent 0);background-size: auto 3em;

効果は写真の通りです

結果は私たちが望んでいたものと非常によく似ています。フォント サイズを変更して、ストライプを必要なサイズに縮小または拡大してみてください。しかし、非常に深刻な問題があります。線が揃っていないということです。これは私たちの目的と矛盾します。何故ですか？

上の画像をよく見ると、背景画像と同じように、最初のストライプがコンテナーの上部から始まっていることがわかります。ただし、見た目が非常に醜くなるため、コードはそこから始まりません。ご覧のとおり、0.5em パディングを適用して、ストライプからオフセットさせます。

この問題を解決する 1 つの方法は、background-position を使用してストライプを下部に対して 0.5em 移動することです。ただし、後でパディングを調整する場合は、背景の位置も調整する必要がありますが、これはあまりドライではありません。背景をパディングの長さに自動的に適応させることはできますか?

背景原点を思い出してみましょう。これはまさに私たちが必要とするものです。背景位置を解決するためのベースとして、デフォルトのパディング エッジではなく、コンテンツ ボックスのエッジを使用するようにブラウザーに指示する方法です。これを前のコードに追加しましょう:

padding: .5em;line-height: 1.5;background: beige;background-size: auto 3em;background-origin: content-box;background-image: linear-gradient(rgba(0,0,0,.2) 50%,                  transparent 0);

示されているように

これは、まさに私たちが実現したいゼブラ ストライプ効果のコードです。ストライプには半透明の背景の色を使用しているため、背景の色を調整してもゼブラ ストライプはそのまま機能します。基本的に、これは非常に柔軟であり、これを破る唯一の方法は、background-size の値を変更せずに line-height の値を変更することです。

これは、コードスニペットに取り組んでいることを前提としています。一般に、より大きなフォントサイズの画像やインラインコンテンツなど、より大きな行高さを必要とするインライン要素がある場合にも壊れる可能性があります。