Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Logical Properties and Values
Search
Kaneko Takeshi
December 01, 2020
Technology
0
24
CSS Logical Properties and Values
Kaneko Takeshi
December 01, 2020
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
10
Eye Tracking on the Browser
tkckaneko
0
72
IEEE754を完全に理解した
tkckaneko
1
50
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
70
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
CSR / SSR / SSG / JAMstack
tkckaneko
0
50
BOLT
tkckaneko
0
10
Visual Effect Graphをさわってみた
tkckaneko
0
21
Other Decks in Technology
See All in Technology
On Your Data を超えていく!
hirotomotaguchi
2
750
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
110
いいたいことちゃんという
tkengo
0
230
Cypress or Playwright?
rainerhahnekamp
0
170
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
380
require(ESM)とECMAScript仕様
uhyo
4
960
【基本】データベース設計
oracle4engineer
PRO
2
180
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.1k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
380
データベース02: データベースの概念
trycycle
0
180
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
What's new in Ruby 2.0
geeforr
337
31k
A Tale of Four Properties
chriscoyier
152
22k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Automating Front-end Workflow
addyosmani
1357
200k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
GraphQLとの向き合い方2022年版
quramy
33
12k
Transcript
CSS Logical Properties and Values
marginとかpaddingを設定するときどうしてます? margin-topとかpadding-leftって指定している? それは間違いではないです でも、今はそう書きません margin-block-start、padding-inline-startって書きます! これを論理プロパティ(Logical Propaties)って言います
論理プロパティ レイアウトの方向を物理的ではなく論理的に制御します CSS Writing Modesでコンテンツの方向は定義されます アラビア語は右書き、日本語だと縦書きなどあるので CSS Grid、Flexboxは既に論理プロパティでの指定になっています
論理プロパティ レイアウトの方向を物理的ではなく論理的に制御します CSS Writing Modesでコンテンツの方向は定義されます アラビア語は右書き、日本語だと縦書きなどあるので CSS Grid、Flexboxは既に論理プロパティでの指定になっています
論理プロパティ 例えば、普段の日本語サイトだと左から右へ文字を書きます アラビア語では右から左に書きます そのため、text-align: leftって物理プロパティで書いてると、direction: rtlって指定してもアラビア語なのに左寄せになってしまいます 論理プロパティの場合はtext-align: startとします
論理プロパティ direction: rtl;
論理プロパティ text-align: start;
論理プロパティはインライン方向(Inline axis)とブロック方向 (Block axis)で記述します 普段書き慣れている英語の場合にはこんな感じになります margin margin-block-start = margin-top margin-block-end
= margin-bottom margin-inline-start = margin-left margin-inline-end = margin-right 論理プロパティ
インライン方向はコンテンツの流れる方向を意味します なので、横書きの場合にはには水平方向、縦書きの場合には垂直方向 になります 書き方はinline-start、inline-endです インライン方向
ブロック方向はコンテンツの流れと垂直の方向を意味します なので、横書きの場合にはには水平方向、縦書きの場合には垂直方向 になります 書き方はblock-start、block-endです ブロック方向
要素のサイズも物理プロパティではなく、コンテンツのフローに併せて論 理プロパティで書くことができます そうすれば、縦書き、横書きで要素のサイズを切り替えられます 横書き(英語・アラビア語)の場合 widthは、inline-sizeに heightは、block-sizeに 縦書き(日本語)の場合 widthは、block-sizeに heightは、inline-sizeに 高さと幅
positionの座標も論理プロパティで書けます ただ、英語の場合にtop = block-startとはなりません top = inset-block-startです inset-*を付けるのでめんどくさそうですが、物理プロパティではできな かった省略記法が使えるのでかなり便利です positionの座標
inset: 0 0 0 0; top: 0px; bottom: 0px; left: 0px; right: 0px;
- Chrome、Firefoxでは既に対応済みです(IE11?なんのこと?) - それから、物理プロパティがなくなるわけではありません - 影を付ける場合などでは物理的な意味合いも強いので、そのまま物理プ ロパティが使われると思われます - それにアラビア語や縦書きに対応することなんて、そうそうないかと思うの で、物理プロパティで書いても問題はないかもしれません
- ただ個人的な意見ですが、これからのレイアウトなどはFlexboxやCSS Gridが使われるのですから、併せて論理プロパティで指定するほうがキレ イではないかと個人的には思います まとめ
参考 CSS Logical Properties and Values Level 1 https://www.w3.org/TR/css-logical-1/ Can
I use Logical Properties ? https://caniuse.com/#search=Logical%20Properties もしも桃太郎が一行がITのスタートアップだったら https://anond.hatelabo.jp/20190526220716 New CSS Logical Properties! https://medium.com/@elad/new-css-logical-properties-bc6945311ce7