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 |
---|---|---|---|---|---|
103 | |||||
100 | 102 | ||||
99 | 101 | TP | |||
11 | 99 | 98 | 100 | 15.4 | 83 |
10 | 98 | 97 | 99 | 15.2-15.3 | 82 |
9 | 97 | 96 | 98 | 15.1 | 81 |
8 | 96 | 95 | 97 | 15 | 80 |
Show all | |||||
7 | 95 | 94 | 96 | 14.1 (4) | 79 |
6 | 94 | 93 | 95 | 14 (3,4) | 78 |
5.5 | 93 | 92 | 94 | 13.1 (3,4) | 77 |
92 | 91 | 93 | 13 (3,4) | 76 | |
91 | 90 | 92 | 12.1 (3,4) | 75 (4) | |
90 | 89 | 91 | 12 (2,*) | 74 (4) | |
89 | 88 | 90 | 11.1 (2,*) | 73 (3,4) | |
88 (4) | 87 | 89 | 11 (2,*) | 72 (3,4) | |
87 (4) | 86 | 88 (4) | 10.1 (2,*) | 71 (3,4) | |
86 (3,4) | 85 | 87 (4) | 10 (2,*) | 70 (3,4) | |
85 (3,4) | 84 | 86 (3,4) | 9.1 (2,*) | 69 (3,4) | |
84 (3,4) | 83 | 85 (3,4) | 9 (2,*) | 68 (3,4) | |
83 (3,4) | 82 | 84 (3,4) | 8 (2,*) | 67 (3,4) | |
81 (3,4) | 81 | 83 (3,4) | 7.1 (2,*) | 66 (3,4) | |
80 (3,4) | 80 | 81 (3,4) | 7 (2,*) | 65 (3,4) | |
79 (3,4) | 79 | 80 (3,4) | 6.1 (2,*) | 64 (3,4) | |
18 | 78 | 79 (3,4) | 6 (2,*) | 63 (3,4) | |
17 | 77 | 78 (3,4) | 5.1 (2,*) | 62 (3,4) | |
16 | 76 | 77 (3,4) | 5 (2,*) | 60 (3,4) | |
15 | 75 | 76 (3,4) | 4 (2,*) | 58 (3,4) | |
14 | 74 | 75 (3,4) | 3.2 (2,*) | 57 (3,4) | |
13 | 73 | 74 (3,4) | 3.1 (2,*) | 56 (3,4) | |
12 | 72 | 73 (3,4) | 55 (2,*) | ||
71 | 72 (3,4) | 54 (2,*) | |||
70 | 71 (3,4) | 53 (2,*) | |||
69 | 70 (3,4) | 52 (2,*) | |||
68 | 69 (3,4) | 51 (2,*) | |||
67 | 68 (2,*) | 50 (2,*) | |||
66 | 67 (2,*) | 49 (2,*) | |||
65 (3,4) | 66 (2,*) | 48 (2,*) | |||
64 (3,4) | 65 (2,*) | 47 (2,*) | |||
63 (3,4) | 64 (2,*) | 46 (2,*) | |||
62 (3,4) | 63 (2,*) | 45 (2,*) | |||
61 (3,4) | 62 (2,*) | 44 (2,*) | |||
60 (3,4) | 61 (2,*) | 43 (2,*) | |||
59 (3,4) | 60 (2,*) | 42 (2,*) | |||
58 (3,4) | 59 (2,*) | 41 (2,*) | |||
57 (3,4) | 58 (2,*) | 40 (2,*) | |||
56 (3,4) | 57 (2,*) | 39 (2,*) | |||
55 (3,4) | 56 (2,*) | 38 (2,*) | |||
54 (3,4) | 55 (2,*) | 37 (2,*) | |||
53 (3,4) | 54 (2,*) | 36 (2,*) | |||
52 (3,4) | 53 (2,*) | 35 (2,*) | |||
51 (3,4) | 52 (2,*) | 34 (2,*) | |||
50 (3,4) | 51 (2,*) | 33 (2,*) | |||
49 (3,4) | 50 (2,*) | 32 (2,*) | |||
48 (3,4) | 49 (2,*) | 31 (2,*) | |||
47 (3,4) | 48 (2,*) | 30 (2,*) | |||
46 (3,4) | 47 (2,*) | 29 (2,*) | |||
45 (3,4) | 46 (2,*) | 28 (2,*) | |||
44 (3,4) | 45 (2,*) | 27 (2,*) | |||
43 (3,4) | 44 (2,*) | 26 (2,*) | |||
42 (3,4) | 43 (2,*) | 25 (2,*) | |||
41 (3,4) | 42 (2,*) | 24 (2,*) | |||
40 (1,*) | 41 (2,*) | 23 (2,*) | |||
39 (1,*) | 40 (2,*) | 22 (2,*) | |||
38 (1,*) | 39 (2,*) | 21 (2,*) | |||
37 (1,*) | 38 (2,*) | 20 (2,*) | |||
36 (1,*) | 37 (2,*) | 19 (2,*) | |||
35 (1,*) | 36 (2,*) | 18 (2,*) | |||
34 (1,*) | 35 (2,*) | 17 (2,*) | |||
33 (1,*) | 34 (2,*) | 16 (2,*) | |||
32 (1,*) | 33 (2,*) | 15 (2,*) | |||
31 (1,*) | 32 (2,*) | 12.1 | |||
30 (1,*) | 31 (2,*) | 12 | |||
29 (1,*) | 30 (2,*) | 11.6 | |||
28 (1,*) | 29 (2,*) | 11.5 | |||
27 (1,*) | 28 (2,*) | 11.1 | |||
26 (1,*) | 27 (2,*) | 11 | |||
25 (1,*) | 26 (2,*) | 10.6 | |||
24 (1,*) | 25 (2,*) | 10.5 | |||
23 (1,*) | 24 (2,*) | 10.0-10.1 | |||
22 (1,*) | 23 (2,*) | 9.5-9.6 | |||
21 (1,*) | 22 (2,*) | 9 | |||
20 (1,*) | 21 (2,*) | ||||
19 (1,*) | 20 (2,*) | ||||
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.4 | all | 99 | 10 (2,*) | 64 | 100 | 98 | 11 | 12.12 (2,*) | 16.0 | 10.4 (3,4) | 7.12 (3,4) | 2.5 (3,4) |
15.2-15.3 | 4.4.3-4.4.4 (2,*) | 7 (2,*) | 12.1 | 10 | 15.0 | |||||||
15.0-15.1 | 4.4 (2,*) | 12 | 14.0 (3,4) | |||||||||
14.5-14.8 (4) | 4.2-4.3 (2,*) | 11.5 | 13.0 (3,4) | |||||||||
Show all | ||||||||||||
14.0-14.4 (3,4) | 4.1 (2,*) | 11.1 | 12.0 (3,4) | |||||||||
13.4-13.7 (3,4) | 4 (2,*) | 11 | 11.1-11.2 (3,4) | |||||||||
13.3 (3,4) | 3 (2,*) | 10 | 10.1 (3,4) | |||||||||
13.2 (3,4) | 2.3 (2,*) | 9.2 (2,*) | ||||||||||
13.0-13.1 (3,4) | 2.2 (2,*) | 8.2 (2,*) | ||||||||||
12.2-12.5 (3,4) | 2.1 (2,*) | 7.2-7.4 (2,*) | ||||||||||
12.0-12.1 (2,*) | 6.2-6.4 (2,*) | |||||||||||
11.3-11.4 (2,*) | 5.0-5.4 (2,*) | |||||||||||
11.0-11.2 (2,*) | 4 (2,*) | |||||||||||
10.3 (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-block
,padding-inline
, or any of theinset
shorthand properties. 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.Does 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