12 Modern CSS One-Line Upgrades
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
アプリケーションのCSSを改善するには、1行のアップグレードや拡張で十分です。プロジェクトで取り入れ始めるプロパティについて学び、技術的負債を減らし、JavaScriptを取り除き、ユーザーエクスペリエンスを簡単に向上させましょう。
以下の適切にサポートされているプロパティを使用すると、古い手法を置き換えることで、ハックや長年の問題を修正できます。
aspect-ratio
ビデオ埋め込みのアスペクト比を16:9などに強制するために、「パディングハック」を使ったことがありますか? 2021年9月以降、aspect-ratioプロパティはエバーグリーンブラウザで安定しており、アスペクト比を定義するための唯一のプロパティです。
HDビデオの場合、aspect-ratio: 16/9;を使用するだけで済みます。完全な正方形の場合は、aspect-ratio: 1;のみで済みます。2番目の値も1が暗黙的に設定されます。
/* aspect-ratioの基本的な使用法 */ .aspect-ratio-hd { aspect-ratio: 16/9; } .aspect-ratio-square { aspect-ratio: 1; }
適用されたaspect-ratioは許容性があり、コンテンツが優先されます。つまり、コンテンツの影響で、要素がいずれかの次元でアスペクト比を超えるようになっても、要素はコンテンツに合わせて伸びたり、形を変えたりします。この動作を防ぐまたは制御するには、max-widthなどの追加の寸法プロパティを適用する必要があります。これは、flexまたはグリッドコンテナの外に広がるのを防ぐために必要な場合があります。
/* フレックスボックスの子要素に適用され、親から大きさの制約を受ける */ .aspect-ratio-square { aspect-ratio: 1; }
パディングハックを完全に置き換えるのを躊躇し、寸法の制約を残したい場合は、Smol Aspect Ratio Galleryを参照して、aspect-ratioに対する進化的拡張のソリューションを確認してください。
object-fit
これは今回紹介するプロパティの中で最も古いものですが、重要な問題を解決し、確かにワンラインのアップグレードの意義に適しています。
object-fitプロパティを使用すると、imgやその他の置換要素がコンテンツのコンテナとして機能し、それらのコンテンツにbackground-sizeと同様のリサイズ動作が適用されます。
object-fitには複数の値がありますが、最も使用される可能性が高いのは以下の値です。
- cover - 画像がアスペクト比を維持したまま要素に収まるようにリサイズされ、コンテンツが歪むことはありません
- scale-down - 画像が要素の中に収まるようにリサイズされ(必要な場合)、アスペクト比が維持され、クリッピングされることはありません。要素のレンダリングされたアスペクト比が異なる場合、画像の周りに余白(レターボックス)が生じる可能性があります
いずれの場合も、object-fitとaspect-ratioを組み合わせると、カスタムのアスペクト比を適用した際に画像が歪まないようになります。
/* aspect-ratioとともにobject-fitを使用する */ .image { object-fit: cover; aspect-ratio: 1; /* オプション: 画像のサイズを制約 */ max-block-size: 250px; }
margin-inline
margin-inlineは、インライン(横書きの場合は左と右)のマージンを設定するための省略形です。
置き換えは単純です。
/* Before */ margin-left: auto; margin-right: auto; /* After */ margin-inline: auto;
論理プロパティは数年前から利用可能で、プレフィックスを付ける場合を除いて98%以上のサポート率があります。国際的なオーディエンスを持つサイトでの論理プロパティの重要性と使用法については、Ahmad Shadeedの記事を参照してください。
安定した拡張
これらの適切にサポートされている最新のCSSプロパティを使用すると、より良い体験を提供でき、古い方法やJavaScriptベースのソリューションを置き換えることができます。フォールバックソリューションが必要になる可能性は低いですが、具体的なアプリケーションの要件次第で、常にテストを行うことをお勧めします。
text-underline-offset
text-underline-offsetを使用すると、テキストのベースラインと下線の距離を制御できます。このプロパティは私の標準リセットの一部となっており、以下のように適用されます。
a:not([class]) { text-underline-offset: 0.25em; }
この設定を使うことで、下側の余白を空けたり、特に複数のリンクが近接して並んでいる場合(リストのリンクなど)の読みやすさを主観的に改善できます。
text-decoration-color
text-decoration-colorを使用すると、下線の色を変更できます。
text-decoration-thickness
text-decoration-thicknessを使用すると、下線の太さを変更できます。
outline-offset
これまでフォーカス時のカスタムアウトラインを表示するために、box-shadowやpseudo要素を使っていませんでしたか?
良いニュースです!2006年から利用可能なoutline-offsetプロパティを見落としていた可能性があります。このプロパティを使えば、正の値でアウトラインを要素から離すことができ、負の値でアウトラインを要素の内側に引き込むことができます。
デモでは、グレーの実線が要素の枠線で、青の破線がoutline-offsetによって位置が変更されたアウトラインです。
.outline-offset { outline: 2px dashed blue; outline-offset: var(--outline-offset, .5em); }
注意点として、アウトラインは要素のボックスサイズの計算に含まれないため、距離を増やしても要素が占める空間は増えません。これはbox-shadowがレンダリングされても要素のサイズには影響しないのと同様です。
outline-offsetをフォーカス可視性の向上に使う方法について、さらに学びましょう。
scroll-margin-top/bottom
scroll-marginプロパティ(および対応するscroll-padding)を使用すると、スクロール位置に応じて要素にオフセットを追加できます。つまり、scroll-padding-topを追加すると、要素の上部のスクロールオフセットが増えますが、ドキュメント内のレイアウト位置には影響しません。
なぜ便利なのでしょうか?これを使えば、アンカーリンクがアクティブ化されたときに、スティッキーナビゲーションがコンテンツを覆ってしまう問題を回避できます。scroll-margin-topを使えば、ナビゲーションによってスクロールされた要素の上部のスペースを、スティッキーナビゲーションで占有されている分だけ増やすことができます。
私は通常、リセットにこのようなルールを含め、[id]属性を持つ要素にはアンカーリンクになる可能性があるため、スクロールマージンを設定しています。
[id] { scroll-margin-top: 2rem; }
別の選択子がModern CSSの記事「コンポーネントベースのアーキテクチャ」で検討されており、このサイトでも使用されています。記事の目次サイドバーからリンクを使ってテストできます。
スティッキー、固定、絶対位置付けされた要素の重なりを考慮する場合は、カスタムプロパティとフォールバック値を使った、より堅牢なソリューションを使用することをお勧めします。次に、JavaScriptを使って実際に必要な距離を測定し、カスタムプロパティの値を更新します。
[id] { /* 必要に応じてJSで--scroll-marginを更新 */ scroll-margin-top: var(--scroll-margin, 2rem); }
さらにこのソリューションを改善し、論理プロパティの同等物であるscroll-padding-block-startとscroll-padding-block-endを使用することをお勧めします。
color-scheme
prefers-color-schemeメディアクエリを使ってダークとライトのテーマをカスタマイズする方法は知っていますか?color-schemeプロパティでは、フォームコントロール、スクロールバー、CSSのシステムカラーなどのブラウザUIの要素を適応させるかどうかをオプトインすることができます。適応を要求すると、ブラウザはそれらの項目をライトまたはダークのスキームでレンダリングし、プロパティでは優先順位を定義できます。
アプリケーション全体に適応させる場合は、:rootに以下のように設定します。これはダークテーマを優先するという意味で、順序を入れ替えればライトテーマを優先できます。
:root { color-scheme: dark light; }
また、個々の要素にcolor-schemeを定義することもできます。たとえば、ダークな背景の要素内のフォームコントロールのコントラストを調整できます。
.dark-background { color-scheme: dark; }
color-schemeの使い方について、Sara Joyのプレゼンテーション「簡単にダークモードを有効化する方法」や、この機能を組み込む方法をさらに学びましょう。
accent-color
チェックボックスやラジオボタンの色を変更したい場合、accent-colorプロパティが欲しいところでしょう。このプロパティを使用すると、ラジオボタンとチェックボックスの:checkedの外観、およびprogressエレメントとrangeインプットの塗りつぶし状態を変更できます。別のオーバーライドがない場合、ブラウザのデフォルトのフォーカス「ハロー」も調整される可能性があります。
:root { accent-color: mediumvioletred; }
カスタムテーマの管理に向けて簡単な勝利を収めるには、accent-colorとcolor-schemeの両方をアプリケーションのベースラインスタイルに追加することをお勧めします。
フォームコントロールのより包括的なカスタムスタイリングが必要な場合は、ラジオボタンから始まるModern CSSシリーズを参照してください。
width: fit-content
私のお気に入りのCSSの隠れた名曲の1つが、要素をコンテンツに合わせて"シュリンクラップ"するfit-contentの使用法です。
display: inline-blockなどのインラインディスプレイ値を使って要素の幅をコンテンツサイズに縮小していた場合、width: fit-contentへのアップグレードで同じ効果が得られます。width: fit-contentの利点は、ディスプレイ値を変更せずにそのまま残せるため、レイアウト内の要素の位置が変わらないことです。計算されたボックスサイズはfit-contentによって作成された寸法に合わせて調整されます。
/* fit-contentの基本的な使用法 */ .fit-content { width: fit-content; }
fit-contentの値は、インライン寸法の決定に使用できるキーワードの1つです。
このテクニックのセカンダリアップグレードとして、論理プロパティの同等物であるinline-size: fit-contentを検討してください。
進化的拡張
最後のセットのプロパティは、サポートされている場合にアップグレードされた体験を提供し、サポートされていないブラウザでも害を及ぼすことはありません。つまり、フォールバックメソッドは必要ありません。ただし、より最近のCSSの追加なので注意が必要です。
overscroll-behavior
スクロールが許可されている制限された寸法のエリア(スクロール可能な領域)のデフォルトの動作は、要素のスクロール範囲の端に到達すると、スクロール操作が背景ページに渡されることです。これは最悪の場合、ユーザーにとって不快な体験になる可能性があります。
overscroll-behavior: containを使用すると、スクロールを含まれた領域に分離でき、スクロール境界に到達した後も、スクロールを親ページに移動させることはありません。これは、メインページコンテンツ(長い記事やドキュメントページ)とは独立してスクロールできるサイドバーのナビゲーションリンクなどのコンテキストで便利です。
.sidebar, .article { overscroll-behavior: contain; }
text-wrap
2023年現在最新のプロパティの1つがtext-wrapで、この値を使うと、行の長さのアンバランスという組版の問題を解決できます。これには、孤立した単語が最終行の先頭にある「孤児」の防止も含まれます。
最初に利用可能な値はbalanceで、これは各行の文字数を均等にすることを目標としています。
ただし、ラップされるテキストの行数は6行までに制限されているため、この手法は見出しや他の短いテキスト部分に最適です。適用範囲を限定することで、ページレンダリング速度への影響も抑えられます。
/* text-wrap: balanceを適用 */ :is(h1, h2, h3, h4, .text-balance) { text-wrap: balance; /* デモ用 */ max-inline-size: 25ch; }
もう1つの値prettyは、特に孤児の発生を防ぐことを目的としており、より広範囲に適用できます。prettyの背後にあるアルゴリズムは、テキストブロックの最後の4行を評価し、必要に応じて調整を行い、最終行に2語以上の単語があるようにします。
/* text-wrap: prettyを適用 */ p { text-wrap: pretty; /* デモ用 */ max-inline-size: 35ch; }
text-wrapの使用は素晴らしい進化的拡張ですが、調整が要素の計算された幅を変更することはないため、一部のレイアウトでは、テキストの横に不要な空間が増える可能性があります。
scrollbar-gutter
特定のシナリオでは、スクロールバーの出現または消失によってレイアウトシフトが発生する可能性があります。たとえば、ダイアログオーバーレイが表示され、背景ページにoverflow: hiddenが適用されてスクロールが防止されると、不要になったスクロールバーが削除されることでシフトが発生します。
最新のCSSプロパティであるscrollbar-gutterを使用すると、レイアウトにスクロールバーの領域を確保できるため、そのような望ましくないシフトを防ぐことができます。スクロールバーが不要な場合、ブラウザはスクロールコンテナのパディングに加えて、ガターとして余分な空間を描画します。
重要: このプロパティは、ユーザーのシステム設定が「オーバーレイ」スクロールバーではない場合にのみ効果があります。Mac OSのデフォルトでは、スクロールバーはコンテンツの上に重ねて表示され、実際にスクロールしているコンテンツ上にのみ表示されます。スクロールバーが必要な場合に意図したスペースが失われるため、パディングをscrollbar-gutterで置き換えないで
これは視覚的に余分なスペースなので、2つのキーワードを使ってこのプロパティを割り当てることができます。scrollbar-gutter: stable both-edges です。stableを単独で使うと、スクロールバーが必要な場所にのみガターが追加されますが、both-edgesを追加すると、スクロールコンテナの反対側にも空間を確保する設定になります。これにより、まだスクロールバーが表示される必要がない場合でも、視覚的なバランスが保たれます。Ahmad Shadeedによるscrollbar-gutterの使用法の視覚的な例を参照してください。
