CSS その他
レガシーブラウザの対応
・プログレッシブ・エンハンスメント
レガシーブラウザを基準に新しい機能をサポートしているブラウザによリリッチな体験を提供する
・グレースフルデグラデーション
モダンブラウザを基準に古いブラウザには必要最低限の機能を提供する
・ポリフィル
標準ではサポートしていない機能をJavaScriptのライブラリなどを使用してサポートさせる手法
例) html5shiv.js Respond.js
perspective
・Web フォント
http://fonts.com/ja
https://typekit.com
https://typesquare.com モリサワ
http://webfont.fontplus.jp
・アイコンフォント
http://zurb.com/playground/foundation-icon-fonts-3
https://www.entypo.com
http://fontello.com
・アニメーション
transition: 2s;
transition-duration: 2s;
transition-delay: 1s;
transition-property: background-color;
transition-timing-function: ease-in;
http://matthewlein.com/ceaser/
ショートハンド
transition: background-color 2s ease-in 1s;
・キーフレームアニメーション
@keyframes anime {
0% { transform: scaleY(1); background-color: orange; }
50% { transform: scale(1.4); background-color: yellow green; }
100% { transform: scale(1); background-color: aqua; }
}
.box {
animation-name: anime;
animation-duration: 2s;
}
animation-timing-function: ease-in
animation-iteration-count: infinite;
animation-direction: alternate; (再生方向)
animation-fill-mode: forwards;
animation-play-state: (再生状態)(running or paused);
アニメーションのショートハンド
animation: アニメーション名 再生時間 イージング 再生までの時間 再生回数 再生方向 再生前後の表示 再生状態;
.box {
animation: anime 5s ease-in 2s infinite alternate both;
}
・GPUアニメーション
transform, opacity, filter