大阪のホームページ制作会社

CSS3

完全に対応

@font-face Web fonts
WEBフォントが完全に対応になるようです。

background-position edge offsets
background-position: right 5px bottom 5px;
このように右から5px、下から5pxと指定ができるようです。
真ん中からとかも行けるのかな？

::selection CSS pseudo-element
:afterや:before、:link、:alink、:hoverなど
いろいろと擬似クラスはCCS2から使えていたのですが、
擬似要素がつかえるようになりました。

CSS3 2D Transforms
scale（拡大縮小）、skew（傾斜）、
translate（移動）、rotate（回転）が使えるようになります。

• background-clip
  border-box、padding-box、content-boxが使えるようになります。
  背景をボーダーの外側からとボーダーの内側とパディングの内側の指定ができる。
• background-size
  auto(初期)、contain、cover、長さを指定できます。
  contain 縦横比は固定で、背景画像でいっぱいに広げます。
  cover 縦横比は固定で背景画像を枠内に収まるようにします。
  長さはpxや％やautoなどなど

CSS3 Border-radius
角丸の指定です。

CSS3 Box-shadow
要素に対して影つける。
テキストではないです。

CSS3 Color
CSS3のカラーって。。。アルファの指定ができるようになります。
rgba(0,0,0,0.3)のように指定します。最後のaがアルファです。

CSS3 Media Queries
これレスポンシブで必要なやつです。
media (max-width:768px){} 的な感じです。

CSS3 Multiple backgrounds
背景をレイヤーとして複数指定できます。
これ、かなり便利になります。
いっぱいDIVかかなくて良くなるーーー

CSS3 Opacity
いままではフィルターつかってなんとなく実装してきましたが、普通に対応するのはありがたい。 書く量が減ってありがたい。

CSS3 selectors
[foo^=”bar”], [foo$=”bar”], [foo*=”bar”], :root, :nth-child(), :nth-last-child(), nth-of-type, nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not(), ~
これらが使えるようになります。
JS読まさなくて良くなるのでよくなりますね。

一部対応

calc()
背景に指定した場合だめだそうです。
それ以外でつかえるっていうのは楽になりますね。
リキットデザイン等で微妙なところで使えるのがありがたいです。

rem
こちらも、特定の条件下では使えないようになるらしい。
ちょっと調べてみたけどこれはもうちょい調べてみます。

HTML5

Audio element
audioタグが使えるようになるのです。
でもmp3やoggとかでしたか？ブラウザによって使えるファイル形式があるようで、
もう、こういうのは統一して下さい＞＜

Canvas (basic support)
JSを使ったCancasは対応になるようです。
Canvasの機能を使いきった感じではむりなのかな？

getElementsByClassName
今までだとIDでやってたのが直接クラスの指定ができるってことですかね。
jQuery使ってるから利点がよくわからん。

Text API for Canvas
Canvas要素でテキストが使えるってことだったかな。
タイポグラフィてきなことはこれつかったらカッコイイですよね。

Video element
audio elementと同じくvideoタグが使えるようになりました。
基本的にはmp4、m4vのファイルが大体のブラウザでつかえるので対応しやすくなった。
でも、基本的にはYoutubeなどWEBサービスを利用するほうが、サーバーの負荷分散となるのでどっちがいいのやら。

※can i use 調べ
※一部引用

まとめ