12のモダンCSS単行アップグレード

時には、アプリケーションの CSS を改善するのに、1 行のアップグレードや強化で済むことがあります！12 のプロパティを学び、それをプロジェクトに取り入れ、技術的負債を減らし、JavaScript を削除し、ユーザー体験を簡単に向上させる楽しさを味わいましょう。

以下のカテゴリのプロパティを探求してください：

安定したアップグレード：古い技術を置き換えることでハッキングや問題を修正
安定した強化：十分にサポートされた現代のプロパティを通じてより良い体験を提供
漸進的な強化：これらのプロパティをサポートする際にアップグレードされた体験を提供し、サポートされていないブラウザに対しては影響を与えない

安定したアップグレード#

以下の十分にサポートされたプロパティは、古い技術を置き換えることでハッキングや長年の問題を修正するのに役立ちます。

アスペクト比#

「 padding hack 」を使用して、動画埋め込みのアスペクト比（例えば 16:9）を強制的に設定したことはありますか？2021 年 9 月時点で、aspect-ratioプロパティは一般的なブラウザで非常に安定しており、アスペクト比を定義するために必要な唯一のプロパティです。

高解像度のビデオには、aspect-ratio: 16/9を使用します。完全に正方形の場合は、aspect-ratio: 1だけで済みます。なぜなら、暗黙の 2 番目の値も1だからです。

.aspect-ratio-hd {
  aspect-ratio: 16/9;
}
.aspect-ratio-square {
  aspect-ratio: 1;
}

高解像度 16:9、正方形 1:1

注目すべきは、適用されたaspect-ratioの許容度が非常に高く、コンテンツを優先することを許可することです。これは、コンテンツが要素の少なくとも 1 つの次元で比率を超えた場合でも、要素がコンテンツに合わせて大きくなったり形を変えたりすることを意味します。この動作を防止または制御するために、max-widthなどの他のサイズプロパティを追加することができます。これは、弾力性またはグリッドコンテナを超えるのを避けるために必要な場合があります。

/* 親からサイズ制約を受けたフレックスボックスの子に適用 */
.aspect-ratio-square {
  aspect-ratio: 1;
}

もし完全に padding hack を置き換えることに抵抗があり、いくつかのサイズのバリアを提供したい場合は、aspect-ratioの段階的な強化ソリューションについてSmol アスペクト比ギャラリーをチェックしてください。

オブジェクトフィット#

これは実際にはこのリストの中で最も古いプロパティですが、重要な問題を解決し、確実に 1 行のアップグレードの精神に合致しています。

object-fitを使用すると、imgや他の置き換え要素がそのコンテンツのコンテナとして機能し、これらのコンテンツがbackground-sizeのようなリサイズ動作を取ることができます。

object-fitにはいくつかの利用可能な値がありますが、以下は最も使用する可能性が高い値です：

coverは、画像を要素を_覆う_ようにリサイズし、そのアスペクト比を維持してコンテンツが歪まないようにします
scale-downは、画像を要素_内_でリサイズ（必要に応じて）し、完全に表示されるようにし、切り取られずにアスペクト比を維持します。要素が異なるレンダリングアスペクト比を持つ場合、画像の周りに余分なスペース（「信箱」）ができることがあります。

いずれにせよ、object-fitはaspect-ratioと組み合わせることで、カスタムアスペクト比を適用する際に画像が歪まないことを保証する素晴らしいプロパティです。

.image {
  object-fit: cover;
  aspect-ratio: 1;
  /* オプション：画像サイズを制約 */
  max-block-size: 250px;
}

インラインマージン#

多くの論理プロパティの 1 つであるmargin-inlineは、行内（水平書きモードでの左と右）のマージンを設定するためのショートハンドです。

ここでの置き換えは簡単です：

/* 以前 */
margin-left: auto;
margin-right: auto;

/* 後 */
margin-inline: auto;

論理プロパティは数年前に導入され、現在は98% のサポート率を誇ります（時折プレフィックスを追加する必要があります）。Ahmad Shadeed のこの記事をチェックして、論理プロパティの使用についての詳細や、国際的なオーディエンスを持つウェブサイトにとっての重要性を学んでください。

安定した強化#

これらの十分にサポートされた現代の CSS プロパティは、より良い体験を提供し、古い方法や JavaScript の補助ソリューションを置き換えることができます。バックアップソリューションは必ずしも必要ではありませんが、それは特定のアプリケーションの考慮事項に依存し、常にテストを奨励します。

テキスト下線オフセット#

text-underline-offsetを使用すると、テキストのベースラインと下線の間の距離を制御できます。このプロパティは私の標準リセットの一部となっており、以下のように適用されています：

a:not([class]) {
  text-underline-offset: 0.25em;
}

このオフセットを使用して、降部をクリアし、特にリンクが密接に隣接してグループ化されている場合（例えば、箇条書きのリンクリスト）に、（主観的に）可読性を向上させることができます。

このアップグレードは、古いテクニック、例えばボーダー、擬似要素、さらにはグラデーション背景を置き換える可能性があります。特にその友人と一緒に使用する場合：

text-decoration-colorは下線の色を変更します
text-decoration-thicknessは下線の太さを変更します。

アウトラインオフセット#

box-shadowを使用して、要素とフォーカスのアウトラインの間の距離を調整するために擬似要素を使用したことはありますか？

良いニュースです！長い間利用可能なoutline-offsetプロパティ（2006 年には存在していました！）を見逃しているかもしれません。これは、正の値を使用してアウトラインを要素から押し出すか、負の値を使用してアウトラインを要素に引き込むことができます。

デモでは、灰色の実線が要素のボーダーで、青い破線がoutline-offsetによって位置決めされたアウトラインです。

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, .5em);
}

正のオフセットと負のオフセット

注意：アウトラインは要素のボックスサイズの一部として計算されないため、距離を増やしても要素が占有するスペースは増えません。これはbox-shadowのレンダリング方法に似ており、要素のサイズにも影響を与えません。

焦点の可視性を改善するためのアウトラインオフセットの使用についての詳細を学んでください。

スクロールマージン上部 / 下部#

scroll-marginプロパティセット（および対応するscroll-padding）は、スクロール位置の文脈で要素にオフセットを追加することを許可します。言い換えれば、scroll-padding-topを追加すると、要素の上方のスクロールオフセットが増加しますが、文書内のレイアウト位置には影響を与えません。

なぜこれが便利なのか？それは、アンカーリンクをアクティブにしたときに、粘着性のナビゲーション要素がコンテンツを覆うことによって引き起こされる問題を緩和できるからです。scroll-margin-topを使用すると、ナビゲーションを介して要素にスクロールする際に、要素の上方のスペースを増やして、粘着性のナビゲーションが占めるスペースを補うことができます。

私は、[id]属性を持つ任意の要素に対して一般的な開始ルールをリセットに含めることを好みます。なぜなら、それがアンカーリンクになる可能性があるからです。

[id] {
  scroll-margin-top: 2rem;
}

コンポーネントベースのアーキテクチャに基づく現代 CSS の記事では、代替セレクタが探求されており、このサイトでも使用されているため、記事の目次サイドバーのリンクを使用してテストできます。

粘着性、固定、または絶対位置の要素の重なりを考慮して、より堅牢なソリューションを得るには、バックアップ値を持つカスタムプロパティを使用する必要があるかもしれません。その後、JavaScript の助けを借りて、必要な実際の距離を測定し、カスタムプロパティの値を更新します。

[id] {
  /* 必要に応じてJSで--scroll-marginを更新 */
  scroll-margin-top: var(--scroll-margin, 2rem);
}

このソリューションをさらに更新し、論理プロパティの等価物：scroll-padding-block-startと-block-endを使用することをお勧めします。

カラースキーム#

prefers-color-schemeを使用してカスタムのダークおよびライトテーマを作成するためのメディアクエリに慣れているかもしれません。CSS プロパティcolor-schemeは、ブラウザの UI 要素（フォームコントロール、スクロールバー、CSS システムカラーを含む）を調整するための選択肢です。調整は、ブラウザにlightまたはdarkスキームを使用してこれらのアイテムを表示するように要求し、このプロパティは好みの順序を定義することを許可します。

アプリケーション全体の適応を有効にするには、:rootに以下を設定し、好みのdarkテーマを選択します（または順序を反転させて好みのlightテーマを選択します）。

:root {
  color-scheme: dark light;
}

また、color-schemeを単一の要素に定義することもできます。例えば、ダーク背景の要素内のフォームコントロールのコントラストを改善するために調整します。

.dark-background {
  color-scheme: dark;
}

Sara Joy のデモから、カラースキームを使用してダークモードを簡単に実現する方法や、この機能を統合するための詳細を学んでください。

アクセントカラー#

チェックボックスやラジオボタンの色を変更したいと思ったことがあるなら、あなたはずっとaccent-colorを探していました。このプロパティを使用すると、:checkedのラジオボタンやチェックボックスの外観、進捗要素や範囲入力の塗りつぶし状態を変更できます。他にオーバーライドがなければ、ブラウザのデフォルトのフォーカス「ハイライト」も調整される可能性があります。

:root {accent-color: mediumvioletred;}

accent-colorを追加して、カラースキームを基盤のアプリケーションスタイルに組み込むことで、カスタムテーマ管理を迅速に実現することを検討してください。

より包括的なフォームコントロールのカスタムスタイルが必要な場合は、カスタムスタイルのラジオボタンから始まる現代 CSS シリーズをチェックしてください。

幅：コンテンツにフィット#

私のお気に入りの CSS の隠れた宝石の 1 つは、fit-contentを使用して「収縮するラッパー」要素を作成し、その内容を含むことです。

インライン表示値（例えば）display: inline-blockを使用して要素の幅をコンテンツサイズに縮小することがあるかもしれませんが、width: fit-contentにアップグレードすることで同じ効果を得ることができます。width: fit-contentの利点は、displayの値を保持するため、値を調整しない限り、要素のレイアウト内の位置を変更しないことです。計算されたボックスサイズは、fit-contentによって作成されたサイズに調整されます。

.fit-content {
  width: fit-content;
}

この値は、内在サイズを有効にするfit-contentのいくつかのキーワードの 1 つです。

この技術を論理プロパティの等価物であるinline-size: fit-contentに二次的にアップグレードすることを検討してください。

漸進的な強化#

最後の一群のプロパティは、サポートされている場合にアップグレードされた体験を提供し、サポートされていないブラウザで使用しても損害を心配する必要がありません。これは、これらがバックアップ方法を必要としないことを意味し、たとえそれらが現代 CSS の新しい追加であってもです。

スクロール動作#

スクロール領域（オーバーフローがスクロールを許可する限られたサイズの領域）を含むデフォルトの動作は、要素の範囲を超えてスクロールすると、スクロールインタラクションがバックグラウンドページに渡されることです。ユーザーにとって、これは最良の場合でも不快で、最悪の場合には苛立たしいかもしれません。

overscroll-behavior: containを使用すると、スクロールが含まれる領域に隔離され、スクロール境界に達すると、親ページにスクロールを移動させることで続行を防ぎます。これは、ナビゲーションリンクのサイドバーなど、ホームページのコンテンツ（長い記事や文書ページの可能性がある）と独立してスクロールする可能性のあるサイドバーにとって便利です。

.sidebar, .article {
  overscroll-behavior: contain;
}

テキストの折り返し#

最新のプロパティの 1 つ（2023 年現在）はtext-wrapで、行の不均衡なタイポグラフィの問題を解決するための 2 つの値があります。これには、「孤立行」の発生を防ぐことが含まれます。つまり、テキストの最後の行に孤独な単語が現れることです。

最初の利用可能な値はbalanceで、各行のテキストの文字数を均等にすることを目指しています。

テキストの折り返しが 6 行に制限されているため、この技術は見出しや他の短いテキスト段落に最適です。適用範囲の制限も、ページのレンダリング速度への影響を制限するのに役立ちます。

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
  /* デモ用 */
  max-inline-size: 25ch;
}

もう 1 つの値<font style="background-color:rgb(255,245,235);">pretty</font>は孤立の発生を防ぐために特に設計されており、より広く適用できます。背後にあるアルゴリズム<font style="background-color:rgb(255,245,235);">pretty</font>は、テキストブロックの最後の 4 行を評価し、必要に応じて調整して、最後の行に 2 つ以上の単語があることを保証します。

p {
  text-wrap: pretty;
  /* デモ用 */
  max-inline-size: 35ch;
}

text-wrapを使用することは、素晴らしい漸進的な強化です。しかし、調整は要素の計算幅を変更しないため、特定のレイアウトでは副作用としてテキストの隣に不必要なスペースが増加する可能性があります。

スクロールバーの隙間#

特定の状況では、スクロールバーの出現または消失が不必要なレイアウトのオフセットを引き起こすことがあります。例えば、ダイアログオーバーレイを表示し、背景ページにoverflow: hiddenを追加してスクロールを防ぐときに、不要になったスクロールバーを取り除くとレイアウトがオフセットされることがあります。

現代 CSS プロパティscrollbar-gutterは、レイアウト内でスクロールバーのためのスペースを予約することを許可し、このような不必要なオフセットを防ぎます。スクロールバーが不要な場合でも、ブラウザはスクロールコンテナの任意のパディングの外側に追加のスペースとして間隔を描画します。

重要な注意：このプロパティは、ユーザーのシステム設定が_「オーバーレイ」_スクロールバーではない場合にのみ機能します。例えば、Mac OS のデフォルト設定では、スクロールバーはスクロール中のコンテンツの上にオーバーレイとして表示されます。パディングを放棄しないでください、scrollbar-gutterオーバーレイスクロールバーを使用すると、期待されるスペースをすべて失います。

これは視覚的に明らかな追加のスペースであるため、2 つのキーワードを使用してこのプロパティを割り当てることを選択できます。単独でscrollbar-gutter: stable both-edgesを使用すると、スクロールバーが本来ある位置に隙間が追加されますが、オプションを追加すると、スクロールコンテナの反対側にもスペースが追加されます。レイアウトがスクロールバーを表示する必要がない場合でも、視覚的なバランスを確保できます。Ahmad Shadeed のscrollbar-gutter の視覚効果を確認してください。stableboth-edges

原文アドレス：https://moderncss.dev/12-modern-css-one-line-upgrades/

投稿日: 2024 年 1 月 19 日著者：Stephanie Eckles