非標準
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.

概要

Mozilla の CSS 拡張プロパティの -moz-orient は要素の 水平垂直の向き (orientation) を指定します。

初期値inline
適用対象any element; it has an effect on progress and meter, but not on <input type="range"> or other elements
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

inline | block | horizontal | vertical

inline
要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。
block
要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。
horizontal
要素が水平方向に描画される
vertical
要素が垂直方向に描画される

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;
}

結果

仕様

肯定的な初期フィードバックをもって W3C に提出されましたが、標準仕様には含まれていません。Mozilla の独自拡張プロパティ (-moz-orient) です。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート 6.0 (6.0)-moz[1] 未サポート 未サポート 未サポート
auto 未サポート 21.0 (21.0)[2]
未サポート40 (40)
未サポート 未サポート 未サポート
inline および block 未サポート 40 (40) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 6.0 (6.0)-moz[1] 未サポート 未サポート 未サポート
auto 未サポート 21.0 (21.0)[2]
未サポート40 (40)
未サポート 未サポート 未サポート
inline および block 未サポート 40.0 (40) 未サポート 未サポート 未サポート

[1] (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) では、垂直方向の描画を指定した <progress> 要素が水平バーの寸法でレンダリングするバグがありました。これは Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) で修正されました。

[2] auto 値は horizontal と等価です。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, SphinxKnight, Sebastianz, Fajrovulpo, ethertank
 最終更新者: yyss,