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,borderandpadding, not the inline/block type values as defined in the spec.Like #1 but also supports
*-beforeand*-endfor*-block-startand*-block-endproperties as well asstartandendvalues fortext-alignDoes not support the
margin-block,margin-inline,padding-inline, or any of theinsetshorthand properties. Supported in newer Chromium browsers behind the#enable-experimental-web-platform-featuresflagDoes not support the
padding-block,padding-inline, or anyinsetproperty. Supported in newer Chromium browsers behind the#enable-experimental-web-platform-featuresflagDoes not support the
border-start-start-radius,border-start-end-radius,border-end-start-radiusandborder-end-end-radiusproperty.
- * 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