CSS Logical Properties
Logical properties and values provide control of layout through logical, rather than physical, direction and dimension mappings. These properties are writing-mode
relative equivalents of their corresponding physical properties.
Spec | https://www.w3.org/TR/css-logical-1/ |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
98 | |||||
95 | 97 | ||||
94 | 96 | TP | |||
11 | 95 | 93 | 95 | 15 | 80 |
10 | 94 | 92 | 94 | 14.1 (5) | 79 |
9 | 93 | 91 | 93 | 14 (3,4,5) | 78 |
8 | 92 | 90 | 92 | 13.1 (3,4,5) | 77 |
Show all | |||||
7 | 91 | 89 | 91 | 13 (3,4,5) | 76 |
6 | 90 | 88 | 90 | 12.1 (3,4,5) | 75 (5) |
5.5 | 89 | 87 | 89 | 12 (2,*) | 74 (5) |
88 (5) | 86 | 88 (5) | 11.1 (2,*) | 73 (3,4,5) | |
87 (5) | 85 | 87 (5) | 11 (2,*) | 72 (3,4,5) | |
86 (3,4,5) | 84 | 86 (3,4,5) | 10.1 (2,*) | 71 (3,4,5) | |
85 (3,4,5) | 83 | 85 (3,4,5) | 10 (2,*) | 70 (3,4,5) | |
84 (3,4,5) | 82 | 84 (3,4,5) | 9.1 (2,*) | 69 (3,4,5) | |
83 (3,4,5) | 81 | 83 (3,4,5) | 9 (2,*) | 68 (3,4,5) | |
81 (3,4,5) | 80 | 81 (3,4,5) | 8 (2,*) | 67 (3,4,5) | |
80 (3,4,5) | 79 | 80 (3,4,5) | 7.1 (2,*) | 66 (3,4,5) | |
79 (3,4,5) | 78 | 79 (3,4,5) | 7 (2,*) | 65 (3,4,5) | |
18 | 77 | 78 (3,4,5) | 6.1 (2,*) | 64 (3,4,5) | |
17 | 76 | 77 (3,4,5) | 6 (2,*) | 63 (3,4,5) | |
16 | 75 | 76 (3,4,5) | 5.1 (2,*) | 62 (3,4,5) | |
15 | 74 | 75 (3,4,5) | 5 (2,*) | 60 (3,4,5) | |
14 | 73 | 74 (3,4,5) | 4 (2,*) | 58 (3,4,5) | |
13 | 72 | 73 (3,4,5) | 3.2 (2,*) | 57 (3,4,5) | |
12 | 71 | 72 (3,4,5) | 3.1 (2,*) | 56 (3,4,5) | |
70 | 71 (3,4,5) | 55 (2,*) | |||
69 | 70 (3,4,5) | 54 (2,*) | |||
68 | 69 (3,4,5) | 53 (2,*) | |||
67 | 68 (2,*) | 52 (2,*) | |||
66 | 67 (2,*) | 51 (2,*) | |||
65 | 66 (2,*) | 50 (2,*) | |||
64 | 65 (2,*) | 49 (2,*) | |||
63 | 64 (2,*) | 48 (2,*) | |||
62 | 63 (2,*) | 47 (2,*) | |||
61 | 62 (2,*) | 46 (2,*) | |||
60 | 61 (2,*) | 45 (2,*) | |||
59 | 60 (2,*) | 44 (2,*) | |||
58 | 59 (2,*) | 43 (2,*) | |||
57 | 58 (2,*) | 42 (2,*) | |||
56 | 57 (2,*) | 41 (2,*) | |||
55 | 56 (2,*) | 40 (2,*) | |||
54 | 55 (2,*) | 39 (2,*) | |||
53 | 54 (2,*) | 38 (2,*) | |||
52 | 53 (2,*) | 37 (2,*) | |||
51 | 52 (2,*) | 36 (2,*) | |||
50 | 51 (2,*) | 35 (2,*) | |||
49 | 50 (2,*) | 34 (2,*) | |||
48 | 49 (2,*) | 33 (2,*) | |||
47 | 48 (2,*) | 32 (2,*) | |||
46 | 47 (2,*) | 31 (2,*) | |||
45 | 46 (2,*) | 30 (2,*) | |||
44 | 45 (2,*) | 29 (2,*) | |||
43 | 44 (2,*) | 28 (2,*) | |||
42 | 43 (2,*) | 27 (2,*) | |||
41 | 42 (2,*) | 26 (2,*) | |||
40 (1,*) | 41 (2,*) | 25 (2,*) | |||
39 (1,*) | 40 (2,*) | 24 (2,*) | |||
38 (1,*) | 39 (2,*) | 23 (2,*) | |||
37 (1,*) | 38 (2,*) | 22 (2,*) | |||
36 (1,*) | 37 (2,*) | 21 (2,*) | |||
35 (1,*) | 36 (2,*) | 20 (2,*) | |||
34 (1,*) | 35 (2,*) | 19 (2,*) | |||
33 (1,*) | 34 (2,*) | 18 (2,*) | |||
32 (1,*) | 33 (2,*) | 17 (2,*) | |||
31 (1,*) | 32 (2,*) | 16 (2,*) | |||
30 (1,*) | 31 (2,*) | 15 (2,*) | |||
29 (1,*) | 30 (2,*) | 12.1 | |||
28 (1,*) | 29 (2,*) | 12 | |||
27 (1,*) | 28 (2,*) | 11.6 | |||
26 (1,*) | 27 (2,*) | 11.5 | |||
25 (1,*) | 26 (2,*) | 11.1 | |||
24 (1,*) | 25 (2,*) | 11 | |||
23 (1,*) | 24 (2,*) | 10.6 | |||
22 (1,*) | 23 (2,*) | 10.5 | |||
21 (1,*) | 22 (2,*) | 10.0-10.1 | |||
20 (1,*) | 21 (2,*) | 9.5-9.6 | |||
19 (1,*) | 20 (2,*) | 9 | |||
18 (1,*) | 19 (2,*) | ||||
17 (1,*) | 18 (2,*) | ||||
16 (1,*) | 17 (2,*) | ||||
15 (1,*) | 16 (2,*) | ||||
14 (1,*) | 15 (2,*) | ||||
13 (1,*) | 14 (2,*) | ||||
12 (1,*) | 13 (2,*) | ||||
11 (1,*) | 12 (2,*) | ||||
10 (1,*) | 11 (2,*) | ||||
9 (1,*) | 10 (2,*) | ||||
8 (1,*) | 9 (2,*) | ||||
7 (1,*) | 8 (2,*) | ||||
6 (1,*) | 7 (2,*) | ||||
5 (1,*) | 6 (2,*) | ||||
4 (1,*) | 5 (2,*) | ||||
3.6 (1,*) | 4 (2,*) | ||||
3.5 (1,*) | |||||
3 (1,*) | |||||
2 |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
15 | all | 94 | 10 (2,*) | 64 | 94 | 92 | 11 | 12.12 (2,*) | 15.0 | 10.4 (3,4,5) | 7.12 (3,4,5) | 2.5 (3,4,5) |
14.5-14.8 (5) | 4.4.3-4.4.4 (2,*) | 7 (2,*) | 12.1 | 10 | 14.0 (3,4,5) | |||||||
14.0-14.4 (3,4,5) | 4.4 (2,*) | 12 | 13.0 (3,4,5) | |||||||||
13.4-13.7 (3,4,5) | 4.2-4.3 (2,*) | 11.5 | 12.0 (3,4,5) | |||||||||
Show all | ||||||||||||
13.3 (3,4,5) | 4.1 (2,*) | 11.1 | 11.1-11.2 (3,4,5) | |||||||||
13.2 (3,4,5) | 4 (2,*) | 11 | 10.1 (3,4,5) | |||||||||
13.0-13.1 (3,4,5) | 3 (2,*) | 10 | 9.2 (2,*) | |||||||||
12.2-12.5 (3,4,5) | 2.3 (2,*) | 8.2 (2,*) | ||||||||||
12.0-12.1 (2,*) | 2.2 (2,*) | 7.2-7.4 (2,*) | ||||||||||
11.3-11.4 (2,*) | 2.1 (2,*) | 6.2-6.4 (2,*) | ||||||||||
11.0-11.2 (2,*) | 5.0-5.4 (2,*) | |||||||||||
10.3 (2,*) | 4 (2,*) | |||||||||||
10.0-10.2 (2,*) | ||||||||||||
9.3 (2,*) | ||||||||||||
9.0-9.2 (2,*) | ||||||||||||
8.1-8.4 (2,*) | ||||||||||||
8 (2,*) | ||||||||||||
7.0-7.1 (2,*) | ||||||||||||
6.0-6.1 (2,*) | ||||||||||||
5.0-5.1 (2,*) | ||||||||||||
4.2-4.3 (2,*) | ||||||||||||
4.0-4.1 (2,*) | ||||||||||||
3.2 (2,*) |
Notes
Only supports the *-start, and *-end values for
margin
,border
andpadding
, not the inline/block type values as defined in the spec.Like #1 but also supports
*-before
and*-end
for*-block-start
and*-block-end
properties as well asstart
andend
values fortext-align
Does not support the
margin-block
,margin-inline
,padding-inline
, or any of theinset
shorthand properties. Supported in newer Chromium browsers behind the#enable-experimental-web-platform-features
flagDoes not support the
padding-block
,padding-inline
, or anyinset
property. Supported in newer Chromium browsers behind the#enable-experimental-web-platform-features
flagDoes not support the
border-start-start-radius
,border-start-end-radius
,border-end-start-radius
andborder-end-end-radius
property.
- * Partial support with prefix.
Resources
- MDN Web Docs - CSS -moz-margin-start
- MDN Web Docs - CSS -moz-padding-start
- Microsoft Edge feature request on UserVoice
- MDN - Basic concepts of Logical Properties and Values
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-logical-props