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.
Syntax
The -moz-orient
property is specified as one of the keyword values chosen from the list below.
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.
Formal definition
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 |
Computed value | as specified |
Animation type | discrete |
Formal syntax
inline | block | horizontal | vertical
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
Not part of any standard. 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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 6 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 6 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
|
Chrome
No support No |
Edge
No support No |
Firefox No support 21 — 40 No support 21 — 40 Notes' The |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android No support 21 — 40 No support 21 — 40 Notes' The |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 40 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 40 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- See implementation notes.'
- See implementation notes.
See also
-moz-orient by Mozilla Contributors is licensed under CC-BY-SA 2.5.