Firefox web browser - Faster, more secure & customizable

公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートされてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうち、グラデーションに関する説明がcss gradients in Firefox 3.6 at hacks.mozilla.orgで紹介されている。

グラデーション機能がどのように動作するかは、Firefox 3.6 beta4などでCSS Gradient & Firefox 3.6ページを閲覧するとよくわかる。Firefox 3.5で閲覧した場合と3.6で閲覧した場合では表示される内容が異なっている。3.6で閲覧すると背景画像と説明部分の背景がグラデーション表示されるとともに、ラインベースのグラデーションと放射ベースのグラデーションをオンザフライで切り替えて表示させることができる。

Firefox 3.6 beta4でCSS Gradients & Firefox 3.6をレンダリングした例。グラデーションで表示されている

Firefox 3.5.5でCSS Gradients & Firefox 3.6をレンダリングした例。グラデーションは機能していない

CSSによるグラデーションはUI表現力を高めるとともに、画像を使う必要性が減ることからコンテンツのダウンロード時間の短縮に効果がある。Firefox 3.6で導入されるCSSグラデーションプロパティは次の2つ。

プロパティ 効果
-moz-linear-gradient ラインベースのグラデーションを提供
-moz-radial-gradient 放射ベースのグラデーションを提供

ラインベースのグラデーションは、基本的に2色間のグラデーションを提供する。グラデーションの開始ポジションと角度を指定することができるほか、グラデーションの中間色を複数指定することができる。中間色は登場するポジションを指定することもでき、指定がない場合には等分割間隔でグラデーションが実施される。また透過を指定してのグラデーションも可能で、画像に対してグラデーション効果をかぶせることが可能。繰り返しの指定も可能で、この場合は縞模様を描くことができる。

放射ベースのグラデーションでもラインベースのグラデーションと同じようなレンダリングが可能。円形のグラデーション、開始場所の指定、枠に合わせるか円に合わせるかの指定、フィットさせるサイドの指定、繰り返しの指定などができる。次にcss gradients in Firefox 3.6 at hacks.mozilla.orgで紹介されている機能を簡単に試せるようにまとめたHTMLとその描画結果を掲載する。

Firefox 3.6で使えるCSSグラデーション機能のサンプルコード実行例その1

Firefox 3.6で使えるCSSグラデーション機能のサンプルコード実行例その2

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Firefox 3.6 CSSグラデーションデモその1</title>
 <style type="text/css">
.linear_gradient_square_horizontal {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(top, blue, white);
}
.linear_gradient_square_vertical {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(left, blue, white);
}
.linear_gradient_square_horizontal_vertical {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(left top, blue, white);
}
.linear_gradient_square_angle_one {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(0deg, red, white);
}
.linear_gradient_square_angle_two {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(90deg, red, white);
}
.linear_gradient_square_angle_three {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(180deg, red, white);
}
.linear_gradient_square_angle_four {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(-90deg, red, white);
}
.linear_gradient_square_angle_five {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(left, black, white);
}
.linear_gradient_square_angle_six {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(left 20deg, black, white);
}
.area {
  width: 400px;
  margin: 0;
  padding: 0;
}
.area li {
  list-style-type: none;
  float: left;
  position: relative;
  width: 120px;
  height: 120px;
}
 </style>
</head> 
<body>
<ul class="area">
 <li><div class="linear_gradient_square_horizontal"></div></li>
 <li><div class="linear_gradient_square_vertical"></div></li>
 <li><div class="linear_gradient_square_horizontal_vertical"></div></li>
 <li><div class="linear_gradient_square_angle_one"></div></li>
 <li><div class="linear_gradient_square_angle_two"></div></li>
 <li><div class="linear_gradient_square_angle_three"></div></li>
 <li><div class="linear_gradient_square_angle_four"></div></li>
 <li><div class="linear_gradient_square_angle_five"></div></li>
 <li><div class="linear_gradient_square_angle_six"></div></li>
</ul>
</body> 
</html> 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Firefox 3.6 CSSグラデーションデモその2</title>
 <style type="text/css">
.linear_gradient_square_colorstops_one {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(top, blue, white 80%, orange);
}
.linear_gradient_square_colorstops_two {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
}
.linear_gradient_square_transparent {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}
.radial_gradient_one {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(red, yellow, #1E90FF);
}
.radial_gradient_two {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
}
.radial_gradient_three {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
.radial_gradient_four {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}
.radial_gradient_five {
  width: 220px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
}
.radial_gradient_six {
  width: 220px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
}
.radial_gradient_seven {
  width: 220px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
}
.radial_gradient_eight {
  width: 220px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);
}
.radial_gradient_nine {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(red, yellow, #1E90FF);
}
.radial_gradient_ten {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-radial-gradient(contain, red, yellow, #1E90FF);
}
.radial_gradient_eleven {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
.radial_gradient_twelve {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}
.area {
  width: 500px;
  margin: 0;
  padding: 0;
}
.area li {
  list-style-type: none;
  float: left;
  position: relative;
  width: 120px;
  height: 120px;
}
.area li.doublewidth {
  list-style-type: none;
  float: left;
  position: relative;
  width: 240px;
  height: 120px;
}
 </style>
</head> 
<body>
<ul class="area">
 <li><div class="linear_gradient_square_colorstops_one"></div></li>
 <li><div class="linear_gradient_square_colorstops_two"></div></li>
 <li><div class="linear_gradient_square_transparent"></div></li>
 <li><div class="radial_gradient_one"></div></li>
 <li><div class="radial_gradient_two"></div></li>
 <li><div class="radial_gradient_three"></div></li>
 <li><div class="radial_gradient_four"></div></li>
 <li class="doublewidth"><div class="radial_gradient_five"></div></li>
 <li class="doublewidth"><div class="radial_gradient_six"></div></li>
 <li class="doublewidth"><div class="radial_gradient_seven"></div></li>
 <li class="doublewidth"><div class="radial_gradient_eight"></div></li>
 <li><div class="radial_gradient_nine"></div></li>
 <li><div class="radial_gradient_ten"></div></li>
 <li><div class="radial_gradient_eleven"></div></li>
 <li><div class="radial_gradient_twelve"></div></li>
</ul>
</body> 
</html>