論理的プロパティと値の基本概念

「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。

なぜ論理的プロパティが必要なのか

CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを width および height を用いて記述したり、アイテムを top および left で配置したり、 left で浮動させたり、境界、マージン、パディングを top, right, bottom, left で割り当てたりします。論理的プロパティと値仕様書はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば startendleftright/topbottom に対応します。

なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために align-self および justify-self を使用していたとします。これらのプロパティはフローに相対的です。 — justify-self: start はインライン方向の始点にアイテムを配置し、 align-self: start はブロック方向の始点にアイテムを配置します。

横書きモードでのグリッド

このコンポーネントの書字方向を、 vertical-rlwriting-mode プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。

縦書きモードでのグリッド

width プロパティの代わりに論理的プロパティである inline-size を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。

縦書きモードでのグリッドレイアウト

以下のライブデモを試してみることができます。 .boxwriting-modevertical-rl から horizontal-tb へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。

When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.

ブロック方向とインライン方向

A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of block and inline rather than right and left/top and bottom when aligning items.

The inline dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is horizontal. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now vertical, as lines in that writing mode run vertically.

The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.

The below diagram shows the inline and block directions in a horizontal writing mode:

diagram showing the inline axis running horizontally, block axis vertically.

This diagram shows block and inline in a vertical writing mode:

Diagram showing the block axis running horizontally the inline axis vertically.

ブラウザーの互換性

Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example inline-size for width or margin-inline-start rather than margin-left. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on MDN you will see that Edge is the only modern browser currently missing these.

There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be margin-block, which is a shorthand setting for margin-block-start and margin-block-end. These currently have no browser support.

Note: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the margin property. We would need some kind of modifier if we were to reuse margin for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is #1282.

ブラウザーの互換性のテスト

You can test for support of logical properties and values using feature queries. For example you could set a width, test for inline-size and, if it is supported, set the width to auto and the inline-size to the original width value.

関連情報