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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kaneko Takeshi
December 01, 2020
Technology
0
36
CSS Logical Properties and Values
Kaneko Takeshi
December 01, 2020
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
31
Eye Tracking on the Browser
tkckaneko
0
88
IEEE754を完全に理解した
tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
93
多分これが一番早いと思います
tkckaneko
0
27
暗黒面の話
tkckaneko
0
26
CSR / SSR / SSG / JAMstack
tkckaneko
0
73
BOLT
tkckaneko
0
31
Visual Effect Graphをさわってみた
tkckaneko
0
34
Other Decks in Technology
See All in Technology
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
220
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
5
3.2k
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
配列に見る bash と zsh の違い
kazzpapa3
1
140
Azure Durable Functions で作った NL2SQL Agent の精度向上に取り組んだ話/jat08
thara0402
0
180
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
230
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
440
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
68k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
今日から始めるAmazon Bedrock AgentCore
har1101
4
410
Featured
See All Featured
Scaling GitHub
holman
464
140k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
770
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
76
Optimizing for Happiness
mojombo
379
71k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Embracing the Ebb and Flow
colly
88
5k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
The World Runs on Bad Software
bkeepers
PRO
72
12k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
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