論理の誤り

私は CSS の logical properties のファンです. web.dev のレスポンシブ デザイン コースで書いたように、they’re crucial for internationalisation .

Alaa Abd El-Rahim は building multi-directional layouts と controlling layout in a multi-directional website に関する CSS トリックに関する記事を書いています.書字モードごとに個別のスタイルシートや個別のルールを作成する必要がないのは素晴らしいことです.

それ以上に、グリッドやフレックスボックスなどの CSS レイアウト ツールを真に理解するには、論理プロパティを理解することが最善の方法だと思います.

新しい言語を学ぶときのようなものです.ある時点で、脳は母国語から他の言語に翻訳することから離れ、代わりにその他の言語で考え始めます.同様に、CSS についても、「左」と「右」を「インライン開始」と「インライン終了」に変換するのをやめて、代わりにインラインとブロックの次元の観点から考え始めたいと思うポイントがあります.

CSS ではよくあることですが、このような新しい機能は、この言語を初めて使用する場合に簡単に理解できると思います.レイアウトにフロートを使用することをやめ、代わりにフレックスボックスとグリッドを学ぶ必要がありました.ゼロからレイアウトを学んでいる人は、フロートの認知的な荷物を捨てることなく、フレックスボックスとグリッドに直行できます.同様に、私が方向性プロパティの荷物を脱ぎ捨て、論理プロパティを真に理解するには時間がかかりますが、CSS に慣れていない人は、方向性の段階を経ずに論理プロパティに直行できます.

ただし、まだ十分ではありません.

論理プロパティが方向プロパティを置き換えるためには、論理プロパティをあらゆる場所に実装する必要があります.現在、メディア クエリ内で論理プロパティを使用することはできません.たとえば、次のようになります.

@media (min-inline-size: 40em)

それはうまくいきません.昔ながらの構文を使用する必要があります.

@media (min-width: 40em)

この例では、ビューポートの物理的な寸法について話していると正しく主張できます.したがって、おそらく幅と高さは、インラインとブロックよりも理にかなっています.

しかし、container queries の構文がどのように機能するかを見てみましょう.まず、論理プロパティの構文を使用して、含める軸を宣言します.

main {
  container-type: inline-size;
}

ただし、実際のコンテナ クエリを宣言するときは、対応する方向プロパティを使用する必要があります.

@container (min-width: 40em)

これはうまくいきません:

@container (min-inline-size: 40em)

うまくいかない理由はなんとなくわかります.コンテナ クエリの構文は、メディア クエリの構文と一致する必要があります.しかし、現在、メディア クエリで論理プロパティを許可しないという理論は通用しません.コンテナ クエリに関して言えば、ビューポートの物理的なレイアウトは重要ではありません.

メディア クエリとコンテナ クエリの両方で、遅かれ早かれ論理プロパティが許可されることを願っています.それらが一致するまで、論理プロパティに完全にジャンプすることは不可能です.

論理プロパティがまだ完全に実装されていない箇所が他にもいくつかありますが、それは時間の問題だと思います.たとえば、Firefox では、狭い画面でコンテナーを横にスワイプできるようにすることで、make a wide data table responsive を実行できます.

.table-container {
  max-inline-size: 100%;
  overflow-inline: auto;
}

ただし、 overflow-inline と overflow-block は、他のブラウザーではサポートされていません.だから私はこれをしなければなりません:

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
}

率直に言って、論理プロパティと方向プロパティを組み合わせて使用​​することは、論理プロパティをまったく使用しないよりも気分が悪くなります.矛盾は厄介です.これは時代遅れに感じますが、一貫しています.

.table-container {
  max-width: 100%;
  overflow-x: auto;
}

ブラウザーが一貫して論理プロパティを実装していない理由は、特に技術的な理由ではないと思います.優先順位の問題だと思います.ブラウザーに論理プロパティを完全に実装することは、あると便利な構文糖衣のように思えるかもしれませんが、他にも重要な Web 標準の魚を揚げる必要があります.

しかし、論理プロパティを使おうとしている人の観点からは、まだら模様のロールアウトはイライラさせられます.