Firefox 3.6 で新たにサポートする CSS の demo

2009年8月28日 金曜日

少し前のことですが、Firefox 3.6 のアルファ版が公開されました。Firefox 3.6 で新たにサポートされる機能のうち、CSS については新たに

• background-size (-moz-background-size)
• CSS Gradients (-moz-linear-gradient, -moz-linear-gradient)
• multiple background images
• rem (長さの単位)
• image-rendering

が実装されるようです。

参考 : Firefox 3.6 Alpha 1 窶錀 web developer changes

background-size

background-size プロパティーは背景画像の大きさを指定することができます。OPERA では 9.5 から、 Safari では 3.0 からサポートしています。

% で背景画像の大きさを指定した場合、要素に対する大きさとなります。px で背景画像の指定した場合はそのまま反映されます。

例えば、要素内いっぱいに背景画像を伸縮させたい場合には

#block2{
-moz-background-size    : 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size      : 100% 100%; /* Opera 9.5 */
-webkit-background-size : 100% 100%; /* Safari 3.0 */
-khtml-background-size  : 100% 100%; /* Konqueror 3.5.4 */
}

を指定します。

• demo

CSS Gradients

CSS Gradients は background-image プロパティーに指定できる値で、画像を使用することなく、グラデーションを適用することができます。-moz-linear-gradient で線上のグラデーション、 -moz-radial-gradient で円状のグラデーションを指定できます。

Safari では 4.0 からサポートしていいて、IE でも filter プロパティーで似たようなことができます。

Safari でもほぼ同じ実装されていますが、値の書き方が Firefox 3.6 と微妙に異なります。　Firefox, Safari 両方に対応させるためには同時にそれぞれの指定をしておきます。

e.g.

#block1{
background-image: -moz-linear-gradient(left, right,
                                       from(#ffffff),
                                       color-stop(50%, #0099cc),
                                       to(#006699));

background-image: -webkit-gradient(linear, left top, right top,
                                   color-stop(0,   #ffffff), 
                                   color-stop(50%, #0099cc),
                                   color-stop(100%,#006699));
}

• demo

multiple background images

multiple background images は、1つの要素に対して複数の背景画像を重ねて適用できる仕組みです。background-image プロパティーで複数の画像を指定して使います。

e.g.

background-image: url(bg_top.png),  url(bg_bottom.png), url(bg_middle.png);

複数適用した背景画像のそれぞれに repeat, size, position も指定できます。

e.g.

background-image: url(bg_top.png),  url(bg_bottom.png), url(bg_middle.png);
background-repeat: repeat-x;
background-position: 0 0, 0 100%, 0 0;

• demo

rem (長さの単位)

Firefox 3.6 からは長さの単位に rem をサポート予定です。HTML, XHTML の場合 1rem は html 要素の文字サイズと同じになります。なので html 要素に文字サイズを指定していない場合は (多くの場合) 16 px 相当になります。html 要素に font-size:12px; を指定している場合には 1rem は 12px として計算されます。

文字サイズに一度 0px を指定してしまうと、その子孫要素では % や em などが使えなくなってしまうのでそういった場合に rem が有効です。

例えば、

html{font-size:12px}
div{font-size:0;}
div p{font-size:1rem;}

としておけば、div 要素内の p 要素は12pxで表示されます。

• demo

image-rendering プロパティ

mozilla は画像などを拡大縮小するとき、通常はバイキュービックで処理するため、ドット絵などは奇麗に表示できません。 Fx 3.6 からは拡大縮小時、どう表示するかを CSS で指定することができるようにる予定です。

image-rendering プロパティーは img 要素、video 要素、canvas 要素と、背景画像で有効です。

• image-rendering:auto; または image-rendering:optimizeQuality; を指定するとバイキュービックで処理されます。
• image-rendering:-moz-crisp-edges; を指定するとニアレストレイバーで処理されます。

CSS や width / height 属性でサイズを変更した場合と、フルページズーム機能でサイズを可変した場合に効果が表れます。

IE 7 では image-rendering プロパティーとほぼ同じ振る舞いをする -ms-interpolation-mode プロパティーが実装されています。

• demo