非標準
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
と等価です。