ちょっと知られてないCSS3の落とし穴

（Webkit transform3Dを使用しているので）Safariの最新版でご覧ください。

合同会社 かぷっと　秋葉秀樹・とみたちひろ

自己紹介

秋葉秀樹

かぷっとLLC テクニカルディレクター×デザイナー

とみたちひろ

かぷっとLLC ディレクター×デザイナー

アジェンダ

  1. border-imageのOperaだけ数字のショートハンドが使えない
  2. Operaだけbackground-positionのtransitionが効かない
  3. box-shadowやborder-radiusのベンダープリフィックスっているの？
  4. webkit系にはCSSで「アンチエイリアスの種類」が選べる
  5. imgにborder-radiusとborderを両方かけるときの落とし穴（ブラウザでばらつきがある）
  6. background系はグラデーションとそのほか（色や画像）が混在できない
  7. matrixではFirefoxだけ単位が必要？

box-shadowの
ベンダープリフィックスっているの？

CSS3のほとんどはこんな感じで書きます

-webkit-box-shadow: 1px 1px 3px black;
-webkit- -moz- -o- -ms-
safarichrome firefox opera IE

box-shadowの
ベンダープリフィックスっているの？

実は似たような機能のtext-shadowは…

-webkit-text-shadow: 1px 1px 3px black;
↓
text-shadow: 1px 1px 3px black;

text-shadowはプリフィックスは要りません。
だったらbox-shadowはどうなの!?

box-shadow: 1px 1px 3px black;

box-shadowをベンダープリフィックス無しで記述した結果

IE9は？！

box-shadow: 1px 1px 3px black;
-webkit-box-shadow: 1px 1px 3px black;

box-shadowをIE9でベンダープリフィックス無しで記述した結果

結論：box-shadowの
ベンダープリフィックス

今日現在。

box-shadow: 1px 1px 3px black;
-webkit-box-shadow: 1px 1px 3px black;

…が、必要。
IE9でも要らなくなったって事で、そろそろ統合されそうですね。

webkit系にはCSSで
「アンチエイリアスの種類」が選べる

特に明朝セリフ体のような細めのフォントには要注意！

non Image CSS3 Button!

まずはCSS3なボタンを作ります。

同じコードでも…

text-shadow: 0 -1px 1px rgba(0,0,0,0.2),
　　　　　　　0 1px 1px rgba(255,255,255,0.8);

SafariとChromeのtext-shadowのかかり方

拡大

-webkit-font-smoothing: antialiased;
none アンチエイリアス無し none
antialiased 通常のアンチエイリアス antialiased
subpixel-antialiased 多めのアンチエイリアス subpixel-antialiased

matrixではFirefoxだけ単位が必要？

transform : matrix(1,0,0,1,0,0) ;

できなかった分はまたの機会で！

ブラウザごとのバグ、不具合と対処法

  1. border-imageのOperaだけ数字のショートハンドが使えない
  2. Operaだけbackground-positionのtransitionが効かない
  3. imgにborder-radiusとborderを両方かけるときの落とし穴（ブラウザでばらつきがある）
  4. background系はグラデーションとそのほか（色や画像）が混在できない

Thank You!! :3 :)

Pray for our JAPAN !