-moz-orient

by 2 contributors:

概要

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

構文

orient:  auto | horizontal | vertical

auto
<progress> 要素と <meter> 要素で使用可能。 horizontal に相当。
horizontal
要素が水平方向(デフォルトの向き)に描画される
vertical
要素が垂直方向に描画される

垂直方向と水平方向のプログレスバーを表示する例を以下に示します。

<!DOCTYPE html>
<html>
<head>
<title>orient example</title>

<style>
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
</style>

</head>

<body>
  <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>
</body>

</html>

表示結果

理想的な表示結果(※画像)

仕様

標準仕様には含まれていません。 Mozilla の独自拡張プロパティです。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート 6.0 (6.0) 未サポート 未サポート 未サポート
auto value 未サポート 21.0 (21.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 6.0 (6.0) 未サポート 未サポート 未サポート
auto value 未サポート 21.0 (21.0) 未サポート 未サポート 未サポート

Gecko に関する注記

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

関連情報

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

Contributors to this page: Fajrovulpo, ethertank
最終更新者: Fajrovulpo,
サイドバーを隠す