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

  1. Only supports the *-start, and *-end values for margin, border and padding, not the inline/block type values as defined in the spec.

  2. Like #1 but also supports *-before and *-end for *-block-start and *-block-end properties as well as start and end values for text-align

  3. Does not support the margin-block, margin-inline, padding-inline, or any of the inset shorthand properties. Supported in newer Chromium browsers behind the #enable-experimental-web-platform-features flag

  4. Does not support the padding-block, padding-inline, or any inset property. Supported in newer Chromium browsers behind the #enable-experimental-web-platform-features flag

  5. Does not support the border-start-start-radius, border-start-end-radius, border-end-start-radius and border-end-end-radius property.

* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-logical-props