フロー相対短縮形による論理レイアウトの強化

Chromium の新しい論理プロパティの省略形と新しいインセット プロパティ。

Chromium 69(2018 年 9 月 3 日)以降、論理プロパティと値により、デベロッパーは物理的な方向やディメンション スタイルではなく論理的な方向やディメンション スタイルを使用して、国際的なレイアウトを管理できるようになりました。Chromium 87 では、これらの論理プロパティと値を簡単に記述できるように、ショートカットとオフセットが導入されました。これにより、Chromium は Firefox に追いつきます。Firefox では、66 以降このショートカットがサポートされています。Safari のテクノロジー プレビューでこの機能に対応しています。

ラテン文字、ヘブライ語、日本語で、デバイスのフレーム内にプレースホルダ テキストがレンダリングされます。テキストに沿った矢印と色で、ブロックとインラインの 2 つの方向が関連付けられています。

ドキュメントのフロー

論理プロパティ、インライン軸、ブロック軸についてすでによくご存じで、復習する必要がない場合は、先に進むことができます。以下に、その内容を簡単にまとめます。

英語では、文字や単語は左から右に流れ、段落は上から下に重ねられます。 繁体字では、文字と単語は上から下に、段落は右から左に積み重ねられます。この 2 つのケースでは、段落に「上余白」を配置する CSS を記述すると、1 つの言語スタイルに適切な間隔だけを置けます。ページが英語から繁体字中国語に翻訳されている場合、新しい縦書きモードでは余白があまり意味を持たない可能性があります。

そのため、海外では箱の物理的な側面はあまり役に立ちません。複数の言語をサポートするプロセスが始まり、ボックスモデルの物理面と論理面について学びます。

Chrome DevTools で p 要素を調べたことはありますか?その場合、デフォルトのユーザー エージェント スタイルは物理的ではなく論理的であることに気づいたかもしれません。

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Chromium のユーザー エージェント スタイルシートの CSS

英語の読者にはわかりにくいかもしれませんが、余白は上部や下部にはありません。block-startblock-end です!これらの論理プロパティは英語の読者の上下に類似していますが、左右の日本の読者にも類似しています。一度書けたら、どこでも使える。

通常のフローとは、ウェブページが意図的にこの多方向性に参加している場合です。ドキュメントの向きの変更に応じてページ コンテンツが更新される場合、レイアウトとその要素はフロー内で考慮されます。フロー内とフロー外の詳細については、MDN または CSS ディスプレイ モジュール仕様をご覧ください。論理プロパティはフロー内に配置する必要はありませんが、方向が変わると多くの作業を自動的に行います。フローとは、文字、単語、コンテンツが移動する方向を意味します。これが、論理的な指示をブロックとインラインに分ける理由です。

ブロックの方向とは、新しいコンテンツ ブロックが従う方向のことです。たとえば、「次の段落をどこに置くのか」を検討します。コンテンツ ブロックやテキスト ブロックと考えることができます。すべての言語で、ブロックが配置され、それぞれの block-axis に沿って並べ替えられます。block-start は段落が最初に配置される側で、block-end は新しい段落が流れ込む側です。

たとえば、従来の日本語の手書き入力では、ブロックの方向は右から左へ流れます。

インラインの向きは、文字や単語の向きです。書くときに腕や手が動く方向を想像してみてください。inline-axis に沿って動いています。inline-start は書き込みを開始する側で、inline-end は書き込みが終了または折り返される側です。上の動画では、inline-axis は上から下になりますが、次の動画では inline-axis は右から左に流れます。

flow-relative は、1 つの言語用に記述されたスタイルが、コンテキストに応じて他の言語に適切に適用されることを意味します。コンテンツは、配信される言語に応じて流れます。

新しい省略形

以下のショートカットの一部はブラウザの新機能ではなく、ブロックエッジとインライン エッジの両方に値を一度に設定できるという利点を活かして、スタイルを簡単に記述する方法です。inset-* 論理プロパティは、それ以前の論理プロパティを使用して絶対位置を指定する詳細な方法がないため、新たな機能をもたらします。インセットとショートハンドは非常に相性が良いため、Chromium 87 でリリースされる新しい論理プロパティの機能について、すべてまとめて説明します。

マージンの省略形

新しい機能はリリースされませんでしたが、非常に便利な省略形がいくつか追加されました。
margin-blockmargin-inline です。

手書き
margin-block-start: 2ch;
margin-block-end: 2ch;
新しい略記
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

これまで「上下」や「左と右」の省略形はありません。通常は、margin: 10px; の省略形を使用して 4 つの側面をすべて参照しますが、論理プロパティの省略形を使用すると、2 つの補完的な側面を簡単に参照できます。

手書き
margin-inline-start: 4ch;
margin-inline-end: 2ch;
新しい略記
margin-inline: 4ch 2ch;

パディングの省略形

新機能はリリースされていませんが、より便利な省略形(
padding-blockpadding-inline)が追加されました。


手書き
padding-block-start: 2ch;
padding-block-end: 2ch;
新しい略記
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

inline の補足的なショートカット セット:

ロング
padding-inline-start: 4ch;
padding-inline-end: 2ch;
新しい略記
padding-inline: 4ch 2ch;

インセットとショートカット

物理プロパティ toprightbottomleft はすべて、inset プロパティの値として書き込むことができます。インセットで辺を設定すると、position のどの値にもメリットがあります。

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


手書き
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
新しい物理的な省略形
position: absolute;
inset: 1px 2px 3px 4px;

すぐに見つかるはずです。インセットは物理的な側面の省略形で、余白やパディングと同じように機能します。

新機能

物理的な側面のショートカットも魅力的ですが、追加の inset ショートカットによって実現される論理的な機能も魅力的です。これらのショートカットは、デベロッパーの作成作業を簡素化(入力が短縮される)するだけでなく、フロー相対であるため、レイアウトの潜在的なリーチを拡大します。

物理的なロングハンド
position: absolute;
top: 10px;
bottom: 10px;
論理演算の省略形
position: absolute;
inset-block: 10px;


物理的なロングハンド
position: absolute;
left: 10px;
right: 20px;
論理演算の省略形
position: absolute;
inset-inline: 10px 20px;

詳細とインセットの省略形と完全形の一覧は MDN で確認できます。

枠線の省略形

Border と、そのネストされた colorstylewidth プロパティには、新しい論理的なショートカットも追加されています。


手書き
border-top-color: hotpink;
border-bottom-color: hotpink;
論理演算の省略形
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


物理的なロングハンド
border-left-style: dashed;
border-right-style: dashed;
論理演算の省略形
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


物理的なロングハンド
border-left-width: 1px;
border-right-width: 1px;
論理的な省略記号
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

詳細と境界のショートハンドと長い形式の一覧は MDN で確認できます。

論理プロパティ <figure> の例

すべてを小さな例で説明します。論理プロパティでは、キャプション付きの画像をレイアウトして、さまざまな文章とドキュメントの向きを処理できます。

ぜひお試しください。

<figure> といくつかの論理プロパティを使用して、カードを国際的にレスポンシブにする場合は、多くの操作は必要ありません。国際的な配慮を重視した CSS がどのように連携するかについて興味をお持ちであれば、この短い説明が参考になれば幸いです。

ポリフィルとクロスブラウザ サポート

カスケード ツールまたはビルドツールは、古いブラウザと新しいブラウザの両方で、更新された論理プロパティで適切なスペースを確保できる有効なオプションです。カスケード フォールバックの場合、物理プロパティの後に論理プロパティを指定すると、ブラウザはスタイル解決中に見つかった「最後の」プロパティを使用します。

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

ただし、これはすべてのユーザーにとって完全な解決策ではありません。:lang() 疑似セレクタを利用して特定の言語をターゲットにし、物理的なスペースを適切に調整して、最後に対応するブラウザの論理的なスペースを提供する、手書きのフォールバックを以下に示します。

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {}
:lang(mn) {}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

@supports を使用して、物理プロパティのフォールバックを提供するかどうかを判断することもできます。

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

SassPostCSSEmotion などには、さまざまなフォールバックやソリューションを備えた自動バンドルツールやビルド時間の機能が用意されています。各ツールを調べて、ツールチェーンとサイト全体の戦略に適したものを探します。

次のステップ

論理プロパティを提供する CSS は多くありますが、これはまだ完了していません。ただし、1 つの大きなショートカット セットが欠落しています。このGitHub の問題では、解決が保留中です。一時的な解決策は下書きにあります。ボックスのすべての論理側にショートハンドでスタイルを設定したい場合はどうすればよいですか?

物理的なショートカット
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
論理演算の省略形
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

現在の下書き案では、論理的に同等のものを適用するために、すべての省略形で logical を記述する必要がありますが、一部の人にとっては DRY とは思えません。

ブロックレベルまたはページレベルで変更するという提案もありますが、物理的な側面を想定したスタイルに論理的な使用が漏洩する可能性があります。

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

難しい問題だよ!投票し、ご意見をお聞かせください。

論理プロパティについて詳しく学習したい場合は、詳細なリファレンス、ガイド、例については、MDN をご覧ください。

フィードバック

  • フロー相対的なショートカットの CSS 構文の変更を提案するには、まず csswg-drafts リポジトリで既存の問題を確認します。既存の問題が提案内容と一致しない場合は、新しい問題を作成します。
  • Chromium のフロー相対省略記号の実装に関するバグを報告するには、まず Chromium Bug Tracker で既存の問題を確認してください。既存の問題がバグと一致しない場合は、新しい問題を作成します。