-moz-orient
-moz-orient
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The -moz-orient CSS property specifies the orientation of the element to which it's applied.
| Initial value | inline |
|---|---|
| Applies to | any element; it has an effect on progress and meter, but not on <input type="range"> or other elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
inline | block | horizontal | vertical
Values
inline- The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.
block- The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.
horizontal- The element is rendered horizontally.
vertical- The element is rendered vertically.
Examples
HTML
<p> The following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> The following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress>
CSS
.vert {
-moz-orient: vertical;
width: 16px;
height: 150px;
} Result
Specifications
Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, -moz-orient).
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Not supported | 6.0 (6.0)-moz[1] | Not supported | Not supported | Not supported |
auto value | Not supported |
21.0 (21.0)[2] Not supported40 (40) | Not supported | Not supported | Not supported |
inline and block values | Not supported | 40 (40) | Not supported | Not supported | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Not supported | 6.0 (6.0)-moz[1] | Not supported | Not supported | Not supported |
auto value | Not supported | 21.0 (21.0)[2] Not supported40 (40) | Not supported | Not supported | Not supported |
inline and block values | Not supported | 40.0 (40) | Not supported | Not supported | Not supported |
[1] In Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there was a bug that causes vertical <progress> elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4).
[2] The auto value was equivalent to horizontal.
See also
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient
