[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

こんにちは、@cappeeです。

サイトを3カラムで作る場合は通常floatを使いますよね?

今回は意外と知らないCSS?かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。

display:box とは

displaybox1 300x151 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。

もうfloatのclearになんか悩まされることもありません。

display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。

プレフィックスを入れてもたった2行でできてしまうのです。

Flexible Box(フレキシブルボックス)とも言います。

display:box の記述方法

#contents の中に横並びにしたい要素を入れたとします。
下記の2行を追加すればもう横並びになっているはずです。ほんと一瞬ですね。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}

box-ordinal-group で順序変更

displaybox2 300x68 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-ordinal-group を指定すればHTMLの記述順に関係なく表示を入れ替えることができます。
下記のように記述すればHTML上#innerA→B→Cの順でも、表示はC→A→Bの順番になります。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 2; /* Firefox用 */
}
#innerB{
-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 3; /* Firefox用 */
}
#innerC{
-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 1; /* Firefox用 */
}

box-flex で可変に

displaybox3 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-flex を指定すれば display:box で指定した横幅に合わせて伸縮してくれます。
display:boxを指定した要素にwidthを記述しないとFirefoxで横幅一杯に広がってくれませんのでご注意ください。

#contents{
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
width: 350px;
}
#innerB{
-webkit-box-flex: 1; /* Safari,Google Chrome用 */
-moz-box-flex: 1; /* Firefox用 */
}
#innerC{
width: 350px;
}

display:box の活用

display:box は残念ながらIEでは対応していませんIE10からの対応となります。

ただし、仕様変更を繰り返しているようなのでまだPCサイトで使用するには注意が必要です。

[参考サイト]IE8から始めるテーブルレイアウト と IE10からのFlexible Box

活用方法としては、スマートフォンサイトの制作には display:box が大活躍してくれますよ。

横並びのメニューやタブの表示が一瞬でできてしまいます。

[2014.01.24]box-flexを使って可変に対応したい場合の指定に、Firefoxに関する補足を追記しました。

Pocket
article clipper [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

こんにちは、@cappeeです。

CSSについてwebデザイナーとやり取りしたり調べものをしているとこんがらがってくる言葉、「セレクタ」「プロパティ」「疑似要素」「疑似クラス」について改めてまとめてみました。

意外と間違えて使っていることがあるかもしれませんよ。後輩からぷぷっと思われないように基本もしっかりおさらいしておきたいと思います。

CSSセレクタとは

CSSセレクタとはスタイルを適用する場所を指定するもので、クラス名やID名などもセレクタの一つになります。
下記のような例はすべてCSSセレクタです。

  • * { }
  • div { }
  • .class { }
  • #id { }
  • a:hover { }
  • li:first-child { }
  • a[href^="http"] { }

こちらも参考にしてください。
意外と知らない!?CSSセレクタ20個のおさらい

属性セレクタ

属性セレクタとはHTMLの属性を指定するセレクタです。例えば、属性には href や target などがあります。

下記のように指定すれば target 属性に _blank を含む a タグにスタイルを適用できます。別ページで開くアイコンなどをつける場合に使えますね。

a[target*="_blank"] {
background:url(/img/blank.png) no-repeat right center;
padding-right:10px;
}

属性セレクタには今回ご紹介したものを含み下記のようなものがあります。

  • foo属性の値にbarを含むE要素 … E[foo*="bar"]
  • foo属性の値がbarで始まっているE要素 … E[foo*="bar"]
  • foo属性の値がbarで終わっているE要素 … E[foo$="bar"]

CSSプロパティとは

CSSプロパティとは float やcolor などのスタイルの設定ことを言います。言い方でCSSを書くとこんな感じです。

セレクタ {
プロパティ:値;
}

去年の終わり頃少し話題になったこちらで面白くプロパティを勉強するにもいいと思います:)
一番強いCSSプロパティ決めようぜ 結果発表!

疑似クラスとは

よく使う :hover や :link も疑似クラスです。:first-child やCSS3から追加となった :last-child、nth-child も含みます。

:first-child は要素の最初を、:last-child では要素の最後にスタイルを適用することができ、リスト表示のデザインにとても便利です。

nth-child を使えば特定の順番を指定したり、繰り返しスタイルを適用することもできます。

詳しい使い方はこちらでご紹介してますのでぜひご覧ください。
CSSで要素の最初と最後、または繰り返しスタイルを適用する擬似クラス

疑似要素とは

:first-letter や :first-line、:after や :before などが疑似要素にあたります。

:first-letter は要素の1文字目だけにスタイルが適用され、:first-line は要素の1行目だけにスタイルが適用されます。
:first-letter を使用すると雑誌とかでよくみる1文字目だけ文字を大きくする、なんてことも疑似要素だけで実現可能です。

:after や :before は、要素の前後に文字や画像を追加することができる疑似要素です。
属性セレクタも使って、リンクされたaタグにアイコンを表示するCSSを書いた場合はこちらのようになります。

a[href]:before {
content : url(/img/arrow.png) ;
}

過去の記事でも疑似要素を使ったCSSについて書いていますのでぜひご覧ください。

CSSだけでリストや横並びの区切り線を実現するパターン4つ
1つの要素にCSSだけで二重ボーダーをつける3つの方法
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

疑似クラスと疑似要素の違い

疑似クラスや疑似要素の記述は、どちらもセレクタ(要素名)のあとにコロン(:)をつけます。

疑似クラスと疑似要素の違いですが、疑似クラス(:first-child や :last-child)は要素全体を選択し、疑似要素(:after や :before)は要素の一部を選択しているのが大きな違いになります。

私もよくこんがらがってしまいます。。そんな時は、下記も参考にしてみてください。
CSSの疑似要素と疑似クラスをもう一度最初から

CSSの間違いやすい言葉まとめ

上記で説明したものはCSSの記述で言葉を表してみるとわかりやすいですね。とても完結になりました。

セレクタ:疑似クラスや疑似要素 {
プロパティ:値;
}
Pocket
article clipper CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

こんにちは、@cappeeです。

最近はIEのアップデートによりCSS3で追加された疑似クラスも多用するようになってきたので、特にリスト系でよく使うものをいくつかメモしておきたいと思います。

間違いやすい疑似クラスや疑似要素に関してはこちらをご覧ください。
CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

要素の最初に適用する疑似クラス :first-child

:first-child は、ある要素内で最初に書かれている子要素にスタイルが適用されます。
ここでご紹介する疑似クラスの中では唯一CSS2から定義されていて、下記でご紹介する :nth-child(1) と同じ指定になります。

よくある使い方としては、お知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

border02 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
padding: 10px 5px;
border-top:1px solid #CCC;
}
li:first-child{
border-top:none;
}

border04 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
border-left:1px solid #CCC;
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li:first-child{
border-left:none;
}

:first-child の間違いやすい記述に注意

例えばdivの中に見出しタグとpタグがあった場合、p:first-child と記述して最初のpタグにスタイルを適用したくても、最初の要素はhタグという認識になってしまいます。親要素の中の最初のセレクタはhタグだからです。

<div>
<h2>見出し</h2>
<p>スタイルを適用したいテキスト</p>
<p>スタイルを適用したくないテキスト</p>
</div>

この場合は下記でもご紹介する :nth-child(2) を使うか、兄弟関係にあるp要素の最初に適用する first-of-type か、疑似クラスではなく h2 + p のように隣接セレクタなどで対応する必要があります。

要素の最後に適用する疑似クラス :last-child

:last-child は、ある要素内で最後に書かれている子要素にスタイルが適用されます。
CSS3から定義されていて、下記でご紹介する :nth-last-child(1) と同じ指定になります。

よくある使い方としては、上記の :first-child と同じようにお知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

要素を繰り返し適用する疑似クラス :nth-child

奇数の要素に適用する場合

奇数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(odd){
background-color: #EEE;
}
li:nth-child(2n+1) {
background-color: #EEE;
}

偶数の要素に適用する場合

偶数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(even){
background-color: #EEE;
}
li:nth-child(2n+2) {
background-color: #EEE;
}

数を指定して繰り返し適用する場合

例えば3つおきに要素を指定する場合は、ユーザー一覧などでよく見るレイアウトにとても便利です。

nth child CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

.leftBox {
width: 200px;
padding: 10px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.leftBox:nth-child(3n+3) {
border-right:none;
}

nth-child(3n+3)とは、3つおきの3番目(最後)にスタイルを適用します。
nth-child(3n+2)は3つおきの2番目(真ん中)、nth-child(3n+1)は3つおきの1番目(最初)です。

最初の要素数個に適用する場合

最初の要素をいくつか指定して適用することもできます。下記では最初の3つを指定した場合です。

li:nth-child(-n+3){
background-color: #EEE;
}

親要素の最後から数える場合

nth-last-child(n) と記述すれば親要素の最後から数えた場合のスタイルが適用できます。nには数字を入れてください。

IEでの対応状況

上記で記述した疑似クラスは基本的にIE8以降からの対応となります。

対応策としては以前ご紹介したように IE9.js を追加すればIE7では問題なく表示されますのでぜひお試しください。

HTML5でコーディングする時に入れる魔法のJS【完全版】

Pocket
article clipper CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSS3 の box-sizing プロパティがかなり便利です。

あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。

CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。

「あれ、なんで崩れるんだろ?」

「padding と border 分マイナスするの忘れてた~」

ってのがよくありました。(今もたまに。。)

それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。

これはものすごい効率化になりますね!

box-sizing の書き方

box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。

指定できるのはこちらの2種類です。

  • content-box … 【デフォルト値】padding と border を要素の幅と高さに含めない。
  • border-box … padding と border を要素の幅と高さに含める。

ベンダープレフィックスもつけて box-sizing を指定します。

.boxSizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing の使い方

1)box-sizing 用のクラスをつくる

例えば「.boxSizing」というクラスをつくって、使いたい要素に都度指定するという使い方です。
このやり方が一番表示速度など考慮した方法になるかなと思います。

2)div などの主要なブロック要素のみ指定する

box-sizing の使用頻度が多くなりそうなら主要なブロック要素にこんな感じで直接指定してしまえば楽ですね。
リセットCSSを指定しているところに追加しちゃうのも手だと思います。

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

3)ユニバーサルセレクタで全指定する

もう全要素やったれ~い!っていう場合は、ユニバーサルセレクタ(全称セレクタ)でしょう。読み方はアスタリスクではないので注意!

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

ユニバーサルセレクタがいいのか、主要なタグを指定するタイプセレクタがいいのかは個人の考え方によりますが、box-sizing のみならどちらでも大きな影響はないかと思います。
ユニバーサルセレクタでリセットCSSを指定だとフォームまわりに影響がでるようですが、どこで調整するかデフォルトの指定のまま使うのかなど状況と考え方次第ですかね。

改めてユニバーサルセレクタについて調べていたら、色々まとまった記事があって面白かったです。
ユニバーサルセレクタ(全称セレクタ)が結局使いやすい。

box-sizing のブラウザ対応

IE7 では非対応ですが、それ以外のブラウザなら現状ほぼ問題なさそうです。(IE6のことは忘れましょう)

大枠のブロック要素に使う時に注意さえしていれば、多少崩れるくらいでコンテンツ自体が見えなくなるような致命的な問題はないと思うので、
個人的には積極的に使って行きたいなと思っています。

[参考サイト]
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか?

Pocket
article clipper box sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

@cappeeです。

デザインで吹き出しを使う機会って多いですよね。

そんなデザイナーの強い味方、CSSで簡単に吹き出しをつくってくれるジェネレーターくんをご紹介します。

シンプルな吹き出しを直感的に作れる「CSS ARROW PLEASE!」

cssarrowplease CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

CSS ARROW PLEASE!

設定も簡単でシンプルな吹き出しをさくっとつくってくれるジェネレーターです。

複雑な指定が必要な吹き出しは「Grad3」

Grad3 CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

Grad3

ベンダープレフィックスの指定やシャドウまで一気に指定することができるのでとても便利です。

そもそもCSSでどうやって吹き出しをつくってるの?という方はこちらをご覧ください。

CSSだけで吹き出しを作ってみる 三角の作り方

Pocket
article clipper CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

CSS3のbox-shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

@cappeeです。

よく見かける紙が浮いたようなシャドウをデザインして、それをコーディングする場合、今までは画像置換でシャドウ用のdivをひとつ増やしていましたが、CSS3の box-shadow を使えば画像なしで実現できます。

box shadow effect CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

デモ:Creating Different CSS3 Box Shadows Effects

詳しいコードサンプルはこちらをご覧ください。

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

box-shadowを使う場合の注意点

上記を参考にCSS3のbox-shadowを使用してシャドウをつけようと思ったのですが、コードを見てみるとサンプルに  z-index と position: absolute が指定されているものがあります。

z-index: -1;
position: absolute;

z-index: -1

z-index: -1 が指定されていると、例えばコンテンツ全体の背景に白い画像をセンタリングで表示していた場合、シャドウがその後ろに隠れて見えなくなってしまいます。
ただし、こちらは画像を指定しているコンテンツのIDに z-index: 1 など指定すればなおります。

position: absolute

position: absolute をボックスに指定すると高さがとれないため、高さが可変のボックスに対してはつけることができません

box-shadowを使ってデザイン性の高いシャドウを実現するには縦横のサイズを固定する必要があります。

画像置換でシャドウをつけるサンプルコード

画像置換でボックスの下に丸みのあるシャドウをつける場合(上記デモのEffect6)のサンプルコードも記載しておきます。

シャドウ用の画像を書きだしてください。こちらを右クリックでダウンロードしていただいてもOKです。

シャドウ用の画像

shadow CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

HTML

<div class="shadow">
 <p>シャドウ用のボックス</p>
 </div>

CSS

.shadow{
 background: url("/images/shadow.jpg") no-repeat 50% 100%;
 padding-bottom:10px;
 }

padding-bottom には作成したシャドウの画像の高さを入力してください。

Pocket
article clipper CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

1つの要素にCSSだけで二重ボーダーをつける3つの方法

@cappeeです。

ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。

double border 1つの要素にCSSだけで二重ボーダーをつける3つの方法

box-shadow

CSS3の box-shadow を使えば1行で二重のボーダーをつけることができます。最初に内側のボーダー、次に外側のボーダーを指定します。外側のボーダーは内側を合わせた数値を記述してください。
対応ブラウザですが、~IE8は表示されません。ただ、もうIE6と7の需要は少ないですが、IE8をどこまで対応させるかの判断になると思います。あと、JavaScriptやPIEなどを使うか。

.doubleBorder {
 box-shadow: 0 0 0 3px #CCC, 0 0 0 4px #999;
}

CSS3の対応状況はこちらの「CSS3プロパティ&ブラウザ対応一覧」を参考にしてください。

borderとoutline

border と outline で二重ボーダーをつけます。
IE8にも対応しており、~IE7も border の方は正常に表示されるので背景色と同じ色でなければ一応枠線は見える状態ですし、こちらの方が安全といえば安全です。
また、二重のボーダーをつけてさらにボックスにシャドウもつけたい、なんてワガママもこちらの指定+ box-shadowで実現できます。

.doubleBorder{
 border: solid 3px #CCC;
 outline: solid 1px #999;
}

ひとつ注意ですが、もしoutlineを使った二重ボーダーの枠に、ポジションを使ってリボンなどのアイコンを配置する場合、Operaではz-indexを使ってもoutlineの方が優先されてアイコンと線がかぶってしまいます。そういった使い方をする場合は、box-shadowを使用し、IE6~8はCSSハックで1つのボーダーのみ表示させるなどの対応が必要になります。

疑似要素

:before や :after の擬似要素を使えば二重線だけでなく三重線も実現出来ます。
ただし、幅と高さを固定してpositionでボーダー分ずらすというやり方なので高さが可変の場合には不向きです。
(下でさらに擬似要素をつかった可変対応バージョンも紹介しています。)

.tripleBorder{
position: relative;
background: #FFF;
border: 1px solid #999;
width: 300px;
height: 300px;
}
.tripleBorder:before {
position: absolute;
content: '';
border: 1px solid #FFF;
width: 298px;
height: 298px;
}
.tripleBorder:after {
position: absolute;
top: 1px;
content: '';
border: 1px solid #CCC;
width: 296px;
height: 296px;
}

もうひとつ、高さが可変の場合でも使える擬似要素でのやり方があります。
こちらもpositionを使ってますがz-indexとmin-height:100%;の指定により高さを可変にしています。

.doubleBorder{
    border: 1px solid #CCC;
    position: relative;
    z-index: 1;
}
.doubleBorder:before{
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 1px solid #999;
    width: 500px;
    padding-bottom: 2px;
    min-height: 100%;
    z-index: 10;
}

(2013.3.1追加)

[参考サイト]
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 
Quick Tip: Multiple Borders with Simple CSS

Pocket
article clipper 1つの要素にCSSだけで二重ボーダーをつける3つの方法

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

こんにちは、@cappeeです。

コーディングしていた時に最新のFirefoxとOperaでシャドウがかかってませんでした。

あれって思って調べたら、-moz-や-o-のプレフィックスって最新だと逆に効かないんですね。

どうやら角丸もそのよう。

幅広く古いバージョンにも対応させるならこのように書くってことですね。

シャドウ

box-shadow: 1px 1px 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
-o-box-shadow: 1px 1px 5px #999;
-ms-box-shadow: 1px 1px 5px #999;

角丸

border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;

 

こちらに色々と検証した記事がありますのでぜひ。

box-shadow,border-radiusを書くときにCSS3のベンダープレフィックスは要らない

 

Pocket
article clipper 最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ

こんにちは、@cappeeです。

話題のWindows 8がでてウルトラモバイルPCを買おうか迷ってます。

とりあえず電気屋さんに行って触ってこよう。

そんなWindows 8に搭載されているIE10ですが、やっとこIEもCSS3に対応してきて嬉しいなぁなんて思ってたらやっぱり一癖あるのですね。

CSS3グラデーションの記述方法で変更があったのは2点。

プレフィックスなしでの記述

今までは -ms- というプレフィックスを記述してIEでもCSS3のグラデーションが表示されるようにしてきたわけですが、IE10からプレフィックスのない形式でサポートされるそう。

でも、2011 年2 月の W3C 草案にあるプレフィックスありの記述もサポートしているみたいなので一応従来通り記述していれば問題無さそう。

top/bottom/left/right といったキーワードの変更

これが厄介になりそうですね。

2011年7月まではキーワードだと(top, #FFF, #CCC) 、角度だと(-90deg,#FFF, #CCC) と書いてました。

ただし、それ以降では to キーワード が追加されて、top→to bottom、left →to rightに変更になります。

そこで問題なのが話題のWindows 8で搭載されてるIE10はtoキーワードありのみに対応していること。

かつ、 -ms- のプレフィックスも無視します。

なにっ

また、Operaの新バージョン12.50でもIE10同様プレフィックスなしのtoキーワードのみ対応するそうな。

新しいCSS3グラデーションの書き方

こういうことで合ってますかね?

background: #CCC; /* CSS3グラデーション未対応ブラウザ用 */
background: -webkit-linear-gradient(top, #FFF, #CCC); /* webkit用 */
background: -moz-linear-gradient(top, #FFF, #CCC); /* mozila(Firefox)用 */
background: -o-linear-gradient(top, #FFF, #CCC);  /* 旧opera用 */
background: -ms-linear-gradient(top, #FFF, #CCC);  /* IE9用 */
background: linear-gradient(to bottom, #FFF, #CCC);  /* IE10とOpera12.50用 */

ご指摘お待ちしております。

さらにIE10からコンディショナルコメントを廃止

コンディショナルコメントとは、

<!-[if lt IE 6.0]> IE6用のCSS <![endif]->

のように記述するとIEの特定のバージョンに限定してCSSを読みこませるというもの。

上記の -ms- プレフィックスを削除してIE9用のコンディショナルコメントを用意してもいいということですね。

でもIE10からは使えないということで、標準規約に準拠してまっせという意気込みを感じます。

逆にIEは遅れを取り戻さないとコンディショナルコメントを廃止したことでまたIT界隈の辛口コメントが増えそうですねぇ。

 

今回参考にさせていただいた記事にもっと詳しく掲載されているのでぜひご覧ください。

Pocket
article clipper 話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ