これらの新しい CSS プロパティを大胆に試し、CSS の力を解き放ってください (1)

この記事は書籍「Unleashing the Power of CSS」（CSSの力を解放せよ、とりあえずこう訳してみます）の学習メモです。この本の学習を通じて、先進的な新しいCSSの内容を体系的に整理できれば幸いです。 CSSに関する機能。この記事は前編です。本全体が英語版であるため、理解や読み方にズレがある可能性があります。修正を歓迎します。一緒に改善していきます。

オープニング

過去数年にわたって、CSS には多くの新しい改善が導入され、ブラウザ間の取り組みにより互換性が向上し、言語はこれまで以上に安定しました。レイアウト、レスポンシブ デザイン、要素のスタイル、属性、セレクターにおけるこれらの機能強化を確認し、今後の新機能についても見てみましょう。

ブラウザ間で新機能を調整して実装できるようになったことで、新機能が登場するとほぼすぐに使用を開始できるようになり、スタイルシートを可能な限りシンプルに保つのに非常に役立ちます。現在では、いくつかの単一行のプロパティを複数行のハッキーなソリューションに置き換えることができます。場合によっては、新しく提供された機能により、古い制限を回避するために以前は必要だった JavaScript ソリューションを削除できることさえあるかもしれません。

新規および強化されたプロパティ

カスタム プロパティ (カスタム プロパティまたは変数)

Internet Explorer 11 のサポート終了が近づいているため、今こそカスタム プロパティの使用を開始する時期です。「CSS 変数」とも呼ばれるカスタム プロパティを使用すると、スタイルシートで再利用できる値を定義できます。カスタム属性は、属性の値全体または値の一部として使用でき、JavaScript でカスタム属性を変更することもできます。

アスペクト比

「パディングハック」を排除する新しいプロパティはアスペクト比です。その名前が示すように、要素のアスペクト比を定義できます。前述したハックは通常、ビデオ埋め込みの 16:9 比率を維持するために使用されます。この属性を使用して、アスペクト比: 16/9 を宣言すると、この比率を達成できます。アスペクト比: 1 を使用して、完全な正方形を達成する簡単な方法でもあります。

これは、アスペクト比を古いプロパティ object-fit と組み合わせて使用​​して、元の画像の比率に関係なく、画像を歪めることなく一貫したアバター サイズを維持する方法を示すコード デモです。

HTML部分

<ul class="avatar-list">
  <li>
    <figure>
      <img src='https://images.unsplash.com/photo-1640952131659-49a06dd90ad2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjkwNTE0MTQ&ixlib=rb-4.0.3&q=80&w=400' alt=''>
      <figcaption>Aaron Fizzle</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src='https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjkwNTE0MTQ&ixlib=rb-4.0.3&q=80&w=400' alt=''>
      <figcaption>Lily Sebastian</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src='https://images.unsplash.com/photo-1628157588553-5eeea00af15c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjkwNTE1MTU&ixlib=rb-4.0.3&q=80&w=400' alt=''>
      <figcaption>Devon Albian</figcaption>
    </figure>
  </li>
</ul>

CSS部分

.avatar-list img {
  /* Make it a square */
  aspect-ratio: 1;
  /* Fit the image to it's container without distortion */
  object-fit: cover;
  /* Make the square round */
  border-radius: 50%;
  width: 100%; /* Make sure the image fills the container */
  height: 100%; /* Make sure the image fills the container */
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: system-ui, sans-serif;
  display: grid;
  place-content: center;
  background-color: mediumvioletred;
  padding-inline: 1rem;
}

/* Standard responsive image fix */
img {
  max-width: 100%;
}

.avatar-list {
  list-style: none;
  padding: 0;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0.25rem 0.25rem 0.5rem -0.15rem hsl(0 0% 0% / 30%);
  border: 1px solid hsl(0 0% 0% / 10%);
}

.avatar-list li {
  position: relative;
  padding: 3%;
  font-size: 1.35rem;
  font-size: clamp(0.8rem, 0.8rem + 2cqi, 1.5rem);
  color: hsl(0 0% 45%);
  letter-spacing: 0.03em;
}

.avatar-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(15% + 1rem);
  right: 3%;
  border-top: 1px solid hsl(0 0% 0% / 15%);
}

.avatar-list figure {
  display: grid;
  grid-template-columns: 15% 1fr;
  align-items: center;
  gap: 1rem;
}

https://codepen.io/SitePoint/pen/oNaNaao

個々の変換プロパティ

それぞれの変換プロパティもブラウザに追加されました。Chrome 104 による CSS 変換には別のプロパティがあります。これらのプロパティはスケール、回転、および移動であり、これらを使用して変換の一部を個別に定義できます。

すべての変換関数に対応する個別の属性 (skewX() や matrix() など) があるわけではありません。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

論理プロパティ

CSS 論理プロパティは、物理的な方向ではなくテキスト フローの論理的な方向を考慮したテキストとレイアウトを操作するためのプロパティです。CSS では、ドキュメントに縦書きモードだけでなく、左から右 (LTR) 横書きモードや右から左 (RTL) 横書きモードなどのさまざまな書き込みモードを設定できます。論理プロパティの目的は、スタイルをより柔軟にし、各書き込みモードに異なるスタイルを記述する必要なく、さまざまな書き込みモードに適応できるようにすることです。

世界中の視聴者向けにコンテンツを管理している場合は、論理属性の使用を検討するかもしれません。ほとんどの CSS 2.1 プロパティに適用できる論理バリアントでは、テキストの書き込みモードとフローが考慮されます。標準的な英語テキストの場合、「left/right」を「inline」に、「top/bottom」を「block」に置き換えます。

.element {
  margin-block: 2rem;
}

上の例に示すように、論理属性は両側を一度に設定するための短縮形も提供します。マージン ブロックの水平書き込みモードは、margin-top および margin-bottom を設定することと同じです。

新しいセレクター

CSS に対する最近の変更で最も影響力のある 3 つは、 :is 、 :where 、および :has 擬似クラス セレクターです。それらの概要は次のとおりです。

:is() 、かっこ内のいずれかのセレクターを満たす要素を選択します。この疑似クラスは、特に複数のセレクターを同時に照合する必要がある場合に、より簡潔で保守しやすい CSS コードを作成するのに役立ちます。たとえば、:is(#id, a, .class) は id の特異性を持ちます。

:where は CSS 擬似クラス セレクターです。これは :is 擬似クラス セレクターに似ており、括弧内の任意のセレクターを満たす要素を選択するために使用できます。その構文も :is に似ていますが、重要な違いが 1 つあります。:where は優先順位に影響しません。

:is とは異なり、:where はスタイル ルールの優先順位を増やしたり変更したりしません。つまり、スタイルシートのどこで :where を使用しても、セレクターの重みが変更されたり、具体性が高まったり、他のスタイル ルールの優先順位に影響を与えたりすることはありません。

これにより、:where は状況によっては非常に便利になります。特に要素のグループを選択する必要があるが、他のセレクターの優先順位には影響を与えたくない場合です。たとえば、異なる重みと特異性を持ついくつかのスタイル ルールを含む既存の CSS スタイルシートがあり、他のルールの優先順位を変更せずに新しいルールを追加したい場合は、:where を使用してこれを実現できます。

/* 不使用 :where */
.btn {
  background-color: #3498db;
}

/* 使用 :where，不影响其他规则的优先级 */
:where(.btn-primary, .btn-secondary, .btn-danger) {
  background-color: #3498db;
  color: white;
}

:has() は、待望の「親セレクター」です。これを使用すると、親要素に特定の子要素が含まれているかどうかを確認したり、親要素をスタイル設定したり、子要素をスタイル設定するための複合セレクターに拡張したりできます。(このチュートリアル シリーズには、:has() に関する完全なチュートリアルがあります。)

このデモでは、 :where() 、 :is() 、および :has() を使用して、アバターの有無に基づいてグリッド表示プロパティを変更する作成者プロファイル コンポーネントを作成します。

<aside class="bio">
  <img class="avatar" src='https://images.unsplash.com/photo-1554727242-741c14fa561c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzExNDcxMjM&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <h2>Jane Stylesheet</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam aspernatur, nobis ex rem iure!</p>
</aside>

<aside class="bio">
  <h2>Bob Markup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam neque a blanditiis praesentium impedit.</p>
</aside>

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui;
  padding: 3vw;
  background-color: mediumvioletred;
}

img {
  display: block;
  max-width: 100%;
}

:where(* + *) {
  margin-block-start: 1rem;
}

.bio :is(h2, p) {
  margin-block-start: 0;
}

.bio {
  background-color: white;
  display: grid;
  gap: 1rem;
  border-radius: 0.5rem;
  padding: 5%;
  box-shadow: 0 0 10px -2px hsl(0 0% 0% / 85%);
}

.bio:has(.avatar) {
  grid-template-areas: "avatar name" "avatar bio";
  grid-template-columns: min(25vw, 80px) 1fr;
}

.bio:has(.avatar) :not(.avatar) {
  grid-column: bio;
}

.bio .avatar {
  grid-area: avatar;
}

.avatar {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

https://codepen.io/SitePoint/pen/WNaeJOy

:has() は、執筆時点では一部のブラウザでのみサポートされているため、上記のデモは現在、Safari 15.4 以降、Chrome/Edge 105 以降、および
layout.css.has-selector.enabled フラグが有効になっている Firefox 103 でのみ動作します。 。

拡張: not()

最近、:not() セレクターが強化され、セレクターのリストを受け入れるようになり、:not(nav a, footer a) が有効な構文になりました。ただし、:is() や :where() とは異なり、このアップデートでは、下位互換性サポートを維持するために必要な、:not() の無効なセレクターの寛容性が向上するわけではありません。

フォーカスセレクター

以下の 2 つの新しい疑似クラスは両方ともフォーカスの動作に影響します。:focus-within セレクターを使用すると、フォーム フィールドの周囲のコンテナなど、子要素にフォーカスがあるときに親要素のスタイルを設定できます。要素のフォーカス スタイルに、 :focus-visible を使用できるようになりました。これは最近、ブラウザ間のデフォルトの要素フォーカス スタイルとして :focus を置き換えました。

ここでは、:focus-within に関する重要なポイントと、:focus との違いをいくつか示します。

:focus-within セレクター:

• フォーカスされた要素を含む祖先要素を選択します。

• ユーザーが祖先要素 (入力ボックスを含むフォームや div など) の子であるページ上の要素 (入力ボックスやボタンなど) にフォーカスすると、祖先要素は一致します。 : 内に焦点を当てます。

• 通常、入力ボックスを含むフォームの外観を作成し、ユーザーが入力する際に​​フォーム全体のスタイルや動作を変更するために使用されます。

:フォーカスセレクター:

• 現在フォーカスがある要素を選択します。

• 通常は、現在フォーカスされている要素のスタイルを設定したり、強調したりするために使用されます。たとえば、入力ボックスの境界線の色やテキスト領域の背景色の変更などです。

• フォーカスされた要素を含む親要素は選択されません。

次の HTML 構造を想定します。

<div class="container">
  <input type="text" id="username" />
  <input type="password" id="password" />
</div>

ここで、:focus と :focus-within を使用してスタイルを追加できます。

/* 当输入框具有焦点时，样式化输入框本身 */
input:focus {
  border: 2px solid blue;
}

/* 当包含有焦点输入框的容器具有焦点时，样式化整个容器 */
.container:focus-within {
  background-color: lightgray;
}

上の例では、ユーザーが入力フィールドをクリックすると、入力フィールド自体に青色の境界線が表示され (:focus セレクターを使用)、フォーカスされた入力フィールドを含むコンテナ .container の背景も灰色になります ( :focus- セレクター内)。これにより、ユーザーがフォームを操作するときに入力フィールド自体が強調表示されるだけでなく、フォーム コンテナ全体がフォーカスされるという視覚的なフィードバックが得られます。

要約すると、:focus-within セレクターはフォーカスされた要素を含む祖先要素を選択するために使用され、:focus セレクターはフォーカスされた要素自体のスタイルを設定するために使用されます。これら 2 つのセレクターを一緒に使用すると、より豊かなインタラクティブなエクスペリエンスを作成できます。

：：マーカー

最後に重要なことですが、疑似要素 ::marker を使用すると、<ul> 要素と <ol> 要素のリスト項目のシンボルと番号付け、および <summary> 要素の「キャレット」を直接選択してスタイルを設定できます。これは、::marker を使用してリストのシンボルの色のみを変更できることを意味します。

要素のスタイルの改善

アクセントの色

フレームワークとデザイン システムに対する最も一般的な変更の 1 つは、ネイティブ フォーム フィールドのスタイル設定です。フォーム要素の色を変更することさえ、accent-color プロパティが存在する前には不可能でした。アクセントカラーを介して、ラジオ ボタンとチェックボックスのチェックされた外観に影響を与えることができるようになりました。また、範囲入力の塗りつぶし状態や進行状況要素にも影響を与えることができます。

以下に、accent-color プロパティの使用方法を示す例を示します。

a {
  accent-color: blue;
}

この例では、acccent-color 属性がすべてのリンク要素 ( <a> ) に適用され、リンクのアクセント カラーを青に設定します。

カラースキーム

ユーザーのライトモードまたはダークモードの好みに応じてインターフェースを調整したい場合は、カスタムトグルや好みのカラースキームクエリを使用できます。カラースキームプロパティも追加する必要があります。これにより、スクロールバー、フォーム コントロール、CSS システム カラーなどのブラウザーの UI 要素に適応するオプションが提供されます。アクセントカラーを使用すると、一部の要素にカスタムの色を選択できますが、カラースキームでは、テキスト入力やテキスト領域を明るいテーマまたは暗いテーマで表示する必要があるなど、ブラウザによるさらなる適応が必要になります。

これを :root 要素に適用し、サイトのデフォルトの順序で値をリストすることをお勧めします。言い換えれば、デフォルトで明るいが暗い色をサポートする場合は、「light dark」をリストします。デフォルトでダークだがライトをサポートする場合は、ダーク ライトをリストします。ライトまたはダークのみをサポートする場合は、単一の値をリストするだけです。

:root {
  color-scheme: light dark;
}

たとえば、次のようにライト モードとダーク モードの配色を定義できます。

/* 明亮模式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* 暗模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

強制カラーモード (強制カラーモード)

色のトピックを締めくくるために、もう 1 つ説明する設定クエリとプロパティのペアについて説明します。Windows では、一部のユーザーは「ハイ コントラスト」テーマを必要とします。このテーマでは、OS が定義された色の代わりに削減されたカラー パレットを強制します。パレットはシステム カラーの値で埋められ、背景、テキスト、ボタン、リンクの色などを置き換えますが、box-shadow などのスタイルは削除されます。

製品の色見本など、色を使用する主要なスタイルがある場合は、force-color-adjust クエリをforce-colors プロパティと一緒に使用する必要がある場合があります。オリジナルの .swatch カラーは、次の組み合わせに従って保持されます。

@media (forced-colors: active) {
  .swatch {
    forced-color-adjust: none;
  }
}

カラーの強制は、ハイコントラスト テーマの色の交換によってユーザー エクスペリエンスが悪影響を受ける場合にのみ、慎重に使用する必要があります。ハイコントラスト テーマを初めて使用する場合は、スタイル設定に強制カラーを使用する方法を学習してください。

文字装飾

テキスト装飾に関しては、 text-underline-offset プロパティが利用できるようになりました。これにより、定義されたテキスト装飾の位置を調整して、元の位置からオフセットすることができます。text-decoration-thickness コンパニオン プロパティを使用すると、text-decoration のストロークの太さを制御できます。これらのプロパティを組み合わせることで、境界線や疑似要素を使用してリンクの下線のスタイルを設定するというハックを排除できます。

次のスタイル ルールは、テキストの下線を 2 ピクセル下にオフセットします。

a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

仕上げる

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。より多くの人が困っているように、いいねや転送をしてください。同時に、フロントエンドテクノロジーについてもっと知識を得たい場合は、私をフォローすることを歓迎します。あなたのサポートが私にとって共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。

ファンの特典

個人ブランドの構築に役立つ、非常にトレンディな個人ホームページのソース コードを共有します (html+css+jq)