CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-03-10 17:15:01
  • このエントリーをはてなブックマークに追加

 background-sizeでは値を省略して1つだけ指定することもできる。この場合、Safari 3では横幅と高さの両方が指定した値で表示される。一方、Operaでは横幅の値として認識され、高さはautoとして処理される。

 CSS 3の草案CSS3 Backgrounds and Borders Moduleでは、「指定値が1つだけの場合は2つ目の値をautoとする」とされているので、Operaの表示が草案に従っていることになる。古いバージョンの草案では「指定値が1つだけの場合は横幅と高さの両方に適用する」とされていたので、Safari 3の表示は古い定義に従ったものと考えられる。いずれにしても草案段階の定義であり、プロパティも実験的にサポートされているものなので、今後も変わっていく可能性があることは意識しておきたい。

Safari 3の表示 Safari 3の表示
Opera 9.5の表示 Opera 9.5の表示
div{
background-color: black;
background-image: url(flower-red.png);
padding: 30px;
-webkit-background-size: 40px;
-o-background-size: 40px;
}
ブラウザで表示を確認する

 背景画像の大きさは割合で指定することも可能だ。この場合、Safari 3ではパディング部分の大きさ、Opera 9.5では罫線部分の大きさに対する割合で処理される。次のソースでは、15ピクセルの太さの黄色い罫線(点線)を表示して、背景画像の大きさを「50% 50%」と指定している。

Safari 3の表示 Safari 3の表示
Opera 9.5の表示 Opera 9.5の表示
div{
background-color: black;
background-image: url(flower-red.png);
border: dotted 15px yellow;
padding: 30px;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
}
ブラウザで表示を確認する

 このとき、CSS 3の草案ではbackground-originプロパティを利用して、割合の算出対象を指定できることになっている。そこで、Safari 3の-webkit-background-originプロパティを利用して、上から順に「border」「padding」「content」と指定すると、それぞれの背景画像は罫線、パディング、コンテンツ部分に対して50%の大きさで表示される。

 なお、Operaはbackground-originには対応していない。background-originの詳細は、前回の記事「CSS 3で追加された背景に関するプロパティ:FirefoxとSafariのCSS対応」を参照してほしい。

Safari 3の表示 Safari 3の表示
div{
background-color: black;
background-image: url(flower-red.png);
border: dotted 15px yellow;
padding: 30px;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
}

div.back01{
-webkit-background-origin: border;
}

div.back02{
-webkit-background-origin: padding;
}

div.back03{
-webkit-background-origin: content;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]