CSS3：永遠に！

それに直面しましょう。 Mozillaは開発者向けに非常に多くのアルファ版、 ナイトリービルド版、リリース版を作成しているため、最近リリースされたバージョン（ Firefox 3.6アルファ版）にまだ注意を払っていなければ、十分に理解できます。

しかし、今回は、 オタクの注目を集めることに非常に説得力がありました。 他の積極的な革新の中でも、修正には以下が含まれます。

• プロパティ-moz-background-size
• 複数の背景画像
• 長さremの新しい単位
• CSSグラデーション
• 表示の改善：テーブルビュー

それでは、状況を明確にするために重要なポイントを作りましょう-これはまだアルファ版であり、これまでのところ、Firefoxユーザーベースの最小の割合のみを使用します。 それにもかかわらず、年末にFirefoxの安定版でこれらの変更を確認する機会があります。

複数の背景画像

誇大宣伝にもかかわらず、Mozillaが最初に-moz-border-radiusを導入したとき-単純なCSSプロパティで丸い角を作ることができます-私は個人的に興奮しませんでした。

それどころか、背景画像の多様性の概念が約束する機会に常にショックを受けました-洗練されたレイアウトに固執することなく 、レイアウト上のいくつかの単純な壮大なトリックによって実行されました。

基本的な構文は非常に簡単です。 background-imageプロパティで1つの画像のみを指定する代わりに、最大4つの画像をコンマで区切ってリストします。

background-repeatおよびbackground-positionに対応する最大4つの値を指定することもできます。

  #multi { 

  background-image：url（paper.png）、url（paper2.jpg）; 

 バックグラウンドリピート：繰り返しなし、繰り返しなし; 

 バックグラウンド位置：左上、右下。 

  } 

やや不自然なソート順を発見したと言わざるを得ません。 2番目のイメージは最初のイメージの下にリストされ、以降も同様です。 しかし、あなたが感じて覚えるとすぐに、問題はありません。

さて、どのブラウザがこのプロパティをサポートしていますか？

現時点では、複数の背景画像は、Safari 4.0、Chrome 3.0、およびFirefox 3.6 alpha（Minefield）でのみ完全にサポートされています。 次のURLでこれらのブラウザのいずれかにアクセスすると、実際の私の例を見ることができます。

http://www.sitepoint.com/examples/css3/multi.html

さて、今このプロパティを使用する価値はありますか？

異なるブラウザでコードの表示をチェックするときに最初に遭遇した問題の1つは、リストの最初の画像のみを拒否し、残りを無視することでした。 これらのブラウザで宣言全体を削除するには、コンマで十分です。背景は空のままです。

ただし、背景画像をすべての標準に最初に宣言すると、Opera、FirefoxおよびSafariの古いバージョンは、コード内でさらに進む可能性のある新しいCSS広告を簡単に無視することがわかりました。

Internet Explorerがこのルールに従うことを拒否するという事実は、IEで実行される単純な単一画像コードを強制する条件でコメントを自由に使用できるため、問題ではありません。

  <！-[IEの場合]> 

  <style type = "text / css"> 

  #multi { 

  background-image：url（old-paper2.jpg）; 

  background-repeat：繰り返しなし; 

 背景の位置：左上; 

  } 

  </ style> 

  <！[endif]-> 

一般に、このプロパティは実用的であり、今日でも結果が得られると思いますが、優雅に使用するには非常に注意する必要があります。

デザインが古いブラウザで正常に機能することを確認してください（最終的には、あなたを悪化させることはありません）が、新しいブラウザのユーザーが増え続ける中で、デザインにさらに豪華なタッチを追加します。 それでは、実験の時間です。

背景画像のサイズを設定する

タイトルから推測できるように、background-sizeを使用すると、CSSを使用して追加された画像を背景に拡大縮小できます。



実際、今ではbackground-sizeプロパティはネイティブCSS3形式を除くすべての場所でサポートされていませんが、Opera、Chrome / Safari、Firefox 3.6 alphaはサポートしていますが、それぞれ独自のマークアップがあります。

マークアップは次のとおりです。

  body { 

  background-image：url（background_image.jpg）; 

 背景サイズ：50％50％;  / * w3c仕様* / 

  -moz-background-size：50％50％;  / * firefox css * / 

  -webkit-background-size：50％50％;  / *サファリ/クロム* / 

  -o-background-size：50％50％;  / *オペラcss * / 

  } 

これらのブラウザーのいずれかを使用している場合、このコードの動作をここで確認できます 。

それで、今すぐ使用できますか？

繰り返しますが、短い答えはイエスです。 とにかく、このようにターゲットを絞った宣言は、他のブラウザーでは単に無視されるため、このプロパティを使用するための技術的な障害はありません。

個人的には、このプロパティを正確に適用したい場所は明確ではないようです。これは、フリースケーリングに適した画像がほとんどないためです。

したがって、このプロパティを使用したすばらしい例を作成するリスクがまだある場合は、あなたの作品をご覧ください。

CSSグラデーション

CSSバックグラウンドグラデーションは、現時点ではFirefoxアルファ、Safari 4、Chrome 3でのみサポートされていますが、最も革新的なイノベーションのように思える機能です。

background-sizeプロパティコードと同様に、背景グラデーションコードもブラウザに依存しますが、各コマンドは完全に新しいCSSプロパティを作成するのではなく、background-image標準の新しい値を表します。

最も単純に、このプロパティは次のようになります。

  div＃cssgradient2 { 

 背景画像：-moz-linear-gradient（上、下、（＃A1D004）から（＃6B9A00））; 

 背景画像：-webkit-gradient（線形、左上、左下、色止め（0.00、＃A1D004）、色止め（1.00、＃6B9A00））; 

  } 

上記のように、Mozilla（Firefox）とWebKit（Safari / Chrome）のコードは似ていますが、同一ではありません。 どちらも、グラデーションの色開始と色停止、および方向座標（上、左、右、下など）を必要とします。

WebKitとMozillaはどちらも放射状グラデーションと線形グラデーションの両方を表示できますが、それらの方法は異なります。 Mozillaが2つの異なるプロパティ値（-moz-linear-gradient（）や-moz-radial-gradient（）など）を使用することを好む場合、WebKitは単一の値を使用しますが、特別なパラメーター（たとえば、-webkit-gradient（radial 、...））

さらに簡単にするために、すべてを自分で検討できるテストページを作成しました。

CSSグラデーションの表示には最低2色が必要なので、どちらの方法でも多くの色を使用してページに複雑なグラデーションを作成できます。

したがって、虹色のグラデーションを作成するための構文は次のようになります。

  / *フォールバック* / 

 背景：＃F66 url（rainbow-gradient.jpg）; 

  / * mozilla gradient * / 

 背景画像：-moz-linear-gradient（左、右、 

  （赤）から、 

 カラーストップ（16％、オレンジ）、 

 カラーストップ（32％、黄色）、 

 カラーストップ（48％、緑）、 

 カラーストップ（60％、青）、 

 カラーストップ（76％、インディゴ）、 

  to（violet））; 

  / * webkitの勾配* / 

 背景画像：-webkit-gradient（線形、 

 左上、左下、 

 カラーストップ（0.00、赤）、 

 カラーストップ（16％、オレンジ）、 

 カラーストップ（32％、黄色）、 

 カラーストップ（48％、緑）、 

 カラーストップ（60％、青）、 

 カラーストップ（76％、インディゴ）、 

 カラーストップ（1.00、バイオレット））; 

興味深いのは、IEは、IE5以降に存在していたフィルタープロパティを使用して、同様の単純なグラデーション（虹を含む）も表示できることです。

したがって、IEに優しいコードは次のようになります。

 フィルター：progid：DXImageTransform.Microsoft.gradient（ 

  enabled = 'true'、 

  startColorstr =＃A1D004、 

  endColorstr =＃6B9A00、 

  GradientType = 0 

  ）; 

このコードについて知っておくべきことが2つあります。

まず、いですが、開始色と終了色が設定されている場所を確認できます。

第二に、信じられないかもしれませんが、あまり知られていないGradientTypeパラメーターが実際にグラデーションの方向を設定します。 垂直グラデーションの場合は0に、水平グラデーションの場合は1に設定します。 私の知る限り、IEでは、斜めのグラデーションや中間色を設定することはできません。

CSSグラデーションを使用することには3つの利点があるように思えます。

1. 画像とは異なり、CSSグラデーションはそれらを含む要素に比例して拡大縮小するため、ページ上のコンテンツの動作に応じて拡大および縮小できます。
2. CSSグラデーションは非常に効果的で、わずか数行のコードで必要なトーンの大きく柔軟な構造化領域を生成できます。 これは、ユーザーのページの読み込み速度に大きく影響します。
3. セキュリティ上の理由やインターネットチャネルの帯域幅の問題のために、ユーザーが画像をブロックできる状況は数多くあります。 CSSグラデーションは、画像では表現できない複雑な色を与える可能性が高くなります-たとえば、iPhoneのSafari。

では、このプロパティを今すぐ使用できますか？

繰り返しになりますが、合理的に使用できる限り、はいと答えます。

Safari、Chrome、およびFirefoxの最新バージョンがこの機能を十分にサポートすることは明らかです。 IEは、合理的に許容できる勾配サポートを実装しています。 そして、それはブラウザのほぼ半分であり、Firefoxの安定版がいつリリースされるかについても言及していません。

残りのブラウザには、従来の方法で設定したのと同じ方法でグラデーションを設定する機会が常にあります。

まとめ

これらのプロパティとイノベーションを使用することに対して多くの議論をするだけで十分です-それらはまだ早すぎて、技術はまだ生のままです。 それにもかかわらず、グラデーションと複数の背景画像は、将来の主要な開発者にとって確かに「ブレッドアンドバター」になるので、これらのツールをうまく使用するには、これらのツールで良いゲームをプレイする必要があります。

ゲームの時間は今だと思います。

注：

A /私の不完全な翻訳をおaびします。 誰かがエラーに気づいたら、コメントを書いてください。すぐに修正します。

B /初心者は記事を読むことができるので、セレクターと宣言について簡単に説明したいと思います。 用語を定義しましょう：

p {
フォントファミリ：Arial、Helvetica、sans-serif。
}

ここで、セレクタはpです
中括弧{}の間にあるすべてが宣言ブロックです
この宣言はフォントファミリです。Arial、Helvetica、sans-serif。
宣言自体は、プロパティ-フォントファミリと値-Arial、Helvetica、sans-serifで構成されます