Skip to content

Commit a1c1086

Browse files
jamesnwjamesnw
authored
Add logical properties (#1736)
1 parent 98f927d commit a1c1086

File tree

2 files changed

+296
-0
lines changed

2 files changed

+296
-0
lines changed

‎features/logical-properties.yml

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
name: Logical properties
2+
description: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, `block-end` refers to the bottom. Also known as flow relative.
3+
spec: https://drafts.csswg.org/css-logical-1/
4+
caniuse: css-logical-props
5+
group: css
6+
# Picked to match Caniuse. Clear and float came 2 years later, but don't warrant separate features.
7+
status:
8+
compute_from: css.properties.border-end-end-radius
9+
compat_features:
10+
- css.properties.block-size
11+
- css.properties.block-size.fit-content
12+
- css.properties.block-size.max-content
13+
- css.properties.block-size.min-content
14+
- css.properties.border-block
15+
- css.properties.border-block-color
16+
- css.properties.border-block-end
17+
- css.properties.border-block-end-color
18+
- css.properties.border-block-end-style
19+
- css.properties.border-block-end-width
20+
- css.properties.border-block-start
21+
- css.properties.border-block-start-color
22+
- css.properties.border-block-start-style
23+
- css.properties.border-block-start-width
24+
- css.properties.border-block-style
25+
- css.properties.border-block-width
26+
- css.properties.border-end-end-radius
27+
- css.properties.border-end-start-radius
28+
- css.properties.border-inline
29+
- css.properties.border-inline-color
30+
- css.properties.border-inline-end
31+
- css.properties.border-inline-end-color
32+
- css.properties.border-inline-end-style
33+
- css.properties.border-inline-end-width
34+
- css.properties.border-inline-start
35+
- css.properties.border-inline-start-color
36+
- css.properties.border-inline-start-style
37+
- css.properties.border-inline-start-width
38+
- css.properties.border-inline-style
39+
- css.properties.border-inline-width
40+
- css.properties.border-start-end-radius
41+
- css.properties.border-start-start-radius
42+
- css.properties.clear.inline-end
43+
- css.properties.clear.inline-start
44+
- css.properties.float.inline-end
45+
- css.properties.float.inline-start
46+
- css.properties.inline-size
47+
- css.properties.inline-size.fit-content
48+
- css.properties.inline-size.max-content
49+
- css.properties.inline-size.min-content
50+
- css.properties.inset
51+
- css.properties.inset.auto
52+
- css.properties.inset-block
53+
- css.properties.inset-block.auto
54+
- css.properties.inset-block-end
55+
- css.properties.inset-block-end.auto
56+
- css.properties.inset-block-start
57+
- css.properties.inset-block-start.auto
58+
- css.properties.inset-inline
59+
- css.properties.inset-inline.auto
60+
- css.properties.inset-inline-end
61+
- css.properties.inset-inline-end.auto
62+
- css.properties.inset-inline-start
63+
- css.properties.inset-inline-start.auto
64+
- css.properties.margin-block
65+
- css.properties.margin-block-end
66+
- css.properties.margin-block-start
67+
- css.properties.margin-inline
68+
- css.properties.margin-inline-end
69+
- css.properties.margin-inline-start
70+
- css.properties.max-block-size
71+
- css.properties.max-block-size.fit-content
72+
- css.properties.max-block-size.max-content
73+
- css.properties.max-block-size.min-content
74+
- css.properties.max-inline-size
75+
- css.properties.max-inline-size.fit-content
76+
- css.properties.max-inline-size.max-content
77+
- css.properties.max-inline-size.min-content
78+
- css.properties.min-block-size
79+
- css.properties.min-block-size.fit-content
80+
- css.properties.min-block-size.max-content
81+
- css.properties.min-block-size.min-content
82+
- css.properties.min-inline-size
83+
- css.properties.min-inline-size.fit-content
84+
- css.properties.min-inline-size.max-content
85+
- css.properties.min-inline-size.min-content
86+
- css.properties.padding-block
87+
- css.properties.padding-block-end
88+
- css.properties.padding-block-start
89+
- css.properties.padding-inline
90+
- css.properties.padding-inline-end
91+
- css.properties.padding-inline-start

‎features/logical-properties.yml.dist

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
# Generated from: logical-properties.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2021-09-20
7+
baseline_high_date: 2024-03-20
8+
support:
9+
chrome: "89"
10+
chrome_android: "89"
11+
edge: "89"
12+
firefox: "66"
13+
firefox_android: "66"
14+
safari: "15"
15+
safari_ios: "15"
16+
compat_features:
17+
# baseline: high
18+
# baseline_low_date: 2020-01-15
19+
# baseline_high_date: 2022-07-15
20+
# support:
21+
# chrome: "57"
22+
# chrome_android: "57"
23+
# edge: "79"
24+
# firefox: "41"
25+
# firefox_android: "41"
26+
# safari: "12.1"
27+
# safari_ios: "12.2"
28+
- css.properties.block-size
29+
- css.properties.inline-size
30+
- css.properties.max-block-size
31+
- css.properties.max-inline-size
32+
- css.properties.min-block-size
33+
- css.properties.min-inline-size
34+
35+
# baseline: high
36+
# baseline_low_date: 2020-01-15
37+
# baseline_high_date: 2022-07-15
38+
# support:
39+
# chrome: "57"
40+
# chrome_android: "57"
41+
# edge: "79"
42+
# firefox: "66"
43+
# firefox_android: "66"
44+
# safari: "12.1"
45+
# safari_ios: "12.2"
46+
- css.properties.block-size.max-content
47+
- css.properties.block-size.min-content
48+
- css.properties.inline-size.max-content
49+
- css.properties.inline-size.min-content
50+
- css.properties.max-block-size.max-content
51+
- css.properties.max-block-size.min-content
52+
- css.properties.max-inline-size.max-content
53+
- css.properties.max-inline-size.min-content
54+
- css.properties.min-block-size.max-content
55+
- css.properties.min-block-size.min-content
56+
- css.properties.min-inline-size.max-content
57+
- css.properties.min-inline-size.min-content
58+
59+
# baseline: high
60+
# baseline_low_date: 2020-01-15
61+
# baseline_high_date: 2022-07-15
62+
# support:
63+
# chrome: "69"
64+
# chrome_android: "69"
65+
# edge: "79"
66+
# firefox: "41"
67+
# firefox_android: "41"
68+
# safari: "12.1"
69+
# safari_ios: "12.2"
70+
- css.properties.border-block-end
71+
- css.properties.border-block-end-color
72+
- css.properties.border-block-end-style
73+
- css.properties.border-block-end-width
74+
- css.properties.border-block-start
75+
- css.properties.border-block-start-color
76+
- css.properties.border-block-start-style
77+
- css.properties.border-block-start-width
78+
- css.properties.border-inline-end
79+
- css.properties.border-inline-end-color
80+
- css.properties.border-inline-end-style
81+
- css.properties.border-inline-end-width
82+
- css.properties.border-inline-start
83+
- css.properties.border-inline-start-color
84+
- css.properties.border-inline-start-style
85+
- css.properties.border-inline-start-width
86+
- css.properties.margin-block-end
87+
- css.properties.margin-block-start
88+
- css.properties.margin-inline-end
89+
- css.properties.margin-inline-start
90+
- css.properties.padding-block-end
91+
- css.properties.padding-block-start
92+
- css.properties.padding-inline-end
93+
- css.properties.padding-inline-start
94+
95+
# baseline: high
96+
# baseline_low_date: 2021-04-26
97+
# baseline_high_date: 2023-10-26
98+
# support:
99+
# chrome: "87"
100+
# chrome_android: "87"
101+
# edge: "87"
102+
# firefox: "63"
103+
# firefox_android: "63"
104+
# safari: "14.1"
105+
# safari_ios: "14.5"
106+
- css.properties.inset-block
107+
- css.properties.inset-block-end
108+
- css.properties.inset-block-start
109+
- css.properties.inset-inline
110+
- css.properties.inset-inline-end
111+
- css.properties.inset-inline-start
112+
113+
# baseline: high
114+
# baseline_low_date: 2021-04-26
115+
# baseline_high_date: 2023-10-26
116+
# support:
117+
# chrome: "87"
118+
# chrome_android: "87"
119+
# edge: "87"
120+
# firefox: "66"
121+
# firefox_android: "66"
122+
# safari: "14.1"
123+
# safari_ios: "14.5"
124+
- css.properties.border-block
125+
- css.properties.border-block-color
126+
- css.properties.border-block-style
127+
- css.properties.border-block-width
128+
- css.properties.border-inline
129+
- css.properties.border-inline-color
130+
- css.properties.border-inline-style
131+
- css.properties.border-inline-width
132+
- css.properties.inset
133+
- css.properties.margin-block
134+
- css.properties.margin-inline
135+
- css.properties.padding-block
136+
- css.properties.padding-inline
137+
138+
# baseline: high
139+
# baseline_low_date: 2021-04-26
140+
# baseline_high_date: 2023-10-26
141+
# support:
142+
# chrome: "87"
143+
# chrome_android: "87"
144+
# edge: "87"
145+
# firefox: ≤72
146+
# firefox_android: "79"
147+
# safari: "14.1"
148+
# safari_ios: "14.5"
149+
- css.properties.inset-block-end.auto
150+
- css.properties.inset-block-start.auto
151+
- css.properties.inset-block.auto
152+
- css.properties.inset-inline-end.auto
153+
- css.properties.inset-inline-start.auto
154+
- css.properties.inset-inline.auto
155+
- css.properties.inset.auto
156+
157+
# ⬇️ Same status as overall feature ⬇️
158+
# baseline: high
159+
# baseline_low_date: 2021-09-20
160+
# baseline_high_date: 2024-03-20
161+
# support:
162+
# chrome: "89"
163+
# chrome_android: "89"
164+
# edge: "89"
165+
# firefox: "66"
166+
# firefox_android: "66"
167+
# safari: "15"
168+
# safari_ios: "15"
169+
- css.properties.border-end-end-radius
170+
- css.properties.border-end-start-radius
171+
- css.properties.border-start-end-radius
172+
- css.properties.border-start-start-radius
173+
174+
# baseline: high
175+
# baseline_low_date: 2021-11-02
176+
# baseline_high_date: 2024-05-02
177+
# support:
178+
# chrome: "57"
179+
# chrome_android: "57"
180+
# edge: "79"
181+
# firefox: "94"
182+
# firefox_android: "94"
183+
# safari: "12.1"
184+
# safari_ios: "12.2"
185+
- css.properties.block-size.fit-content
186+
- css.properties.inline-size.fit-content
187+
- css.properties.max-block-size.fit-content
188+
- css.properties.max-inline-size.fit-content
189+
- css.properties.min-block-size.fit-content
190+
- css.properties.min-inline-size.fit-content
191+
192+
# baseline: low
193+
# baseline_low_date: 2023-10-13
194+
# support:
195+
# chrome: "118"
196+
# chrome_android: "118"
197+
# edge: "118"
198+
# firefox: "55"
199+
# firefox_android: "55"
200+
# safari: "15"
201+
# safari_ios: "15"
202+
- css.properties.clear.inline-end
203+
- css.properties.clear.inline-start
204+
- css.properties.float.inline-end
205+
- css.properties.float.inline-start

0 commit comments

Comments
 (0)