CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方

現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。 CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する使い方について紹介します。 New CSS Logical Properties! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 訳者注: 記事内の日本語サイトとは横書きではなく、縦書きが想定されています。 はじめに CSSの論理プロパティにおける考え方 新しいボックスモデルのプロパティ 論理ディメンション 言語に応じた配置の適用 ブラウザのサポート 論理プ

[coliss]

CSSの論理プロパティにおける考え方、注意点、英語や日本語など言語で変化する使い方

[benridane111]

Edgeを除くすべての主要ブラウザで機能します。

[bocuno]

"日本語およびその他の東部言語で書かれたWebサイトは、上から下ではなく、右から左に始まります"/俺はいつも文章を逆から読んでたのか

[kns_1234]

"left/rightやtop/bottomについて考えるのをやめて、それらをinline-start, inline-end, block-start, block-endに置き換える"

[tsuki-rs]

ワイは普段日本語は左から右に読みます。

[masa8aurum]

“記事内の日本語サイトとは横書きではなく、縦書きが想定されています。”

[reboot_in]

“新しい論理プロパティを使い始めるには、left/rightやtop/bottomについて考えるのをやめて、それらをinline-start, inline-end, block-start, block-endに置き換える必要があります。 ”

[klim0824]

2019年1月の記事/”訳者注: 記事内の日本語サイトとは横書きではなく、縦書きが想定されています。”

[hirorock]

logical properties

[witch-doktor]

いいね。縦書き・横書きのスイッチがやりやすくなりそう

[cartman0]

Edgeじゃできないんか

[cohal]

]