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