非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

概要

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
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

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) です。

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 と等価です。

関連情報

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

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