Graceful DegradationとPolyfill

新しい言葉を覚えたのでメモ。

• Progressive Enhancement
  プログレッシブ エンハンスメント
  →旧ブラウザメインだけど、モダンブラウザで見るとちょっといい感じになってる。
• Graceful Degradation
  グレイスフル デグラデーション
  →モダンブラウザがメイン。旧ブラウザでも見られないことはない。
• Polyfill
  ポリフィル
  →モダンブラウザがメインだけど、JSライブラリなどを使って旧ブラウザでも同じように見せる。

こんな感じで合ってるかな？

お仕事で商用サイト（しかもEC）作ってると
HTML5やCSS3の使い方は悩みますもんね…

IE8以下もまだ当分捨てられないけど、
リニューアルとかのタイミングで
対応しとかないと後で困りそう。

Polyfillは活用する価値ありそうだけど、
重くなりそうなところが
大規模サイトだと厳しいかなぁ。


参照：
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

Firefoxのアドオン「User Agent Switcher」

最近スマートフォン対応のお仕事が増えてきたので、
こちらのアドオンを入れました。
便利！
User Agent Switcher

ユーザエージェントを偽装して、
Firefoxでスマホ用のページを見ることができます。

機種ごとのユーザエージェントは検索するといっぱい出てきますので、
それをコピーしてきて自分で追加することもできます。

FireMobileSimulatorでもいいんですが、
たまに表示が崩れることがあったり、
横幅が固定されちゃうのが不便な時があって、
User Agent Switcherの方が気に入ってます。

SassとCompass

最近ついに仕事でもスマートフォン対応がはじまったりして、
HTML5とCSS3を使うようになりました。
（一応勉強しておいてよかった！）

でも、もっと効率的にやりたいなぁと思って、
ずっと気になってたモノを
ついにインストールしてみました。

CSSを拡張するメタ言語の「Sass」
http://sass-lang.com/
と、Sassをさらに便利に使えるフレームワーク「Compass」
http://compass-style.org/
です。

Macのターミナルを開いて、Rubyアップデートしていろいろ打ち込んで、
なんとかインストールできたみたいです。

一応メモ。

$ sudo gem update --system
$ sudo gem install compass

$ compass create --sass-dir "sass" 

--css-dir "css" --javascripts-dir "js" --images-dir "img"

がんばって使ってみたいと思います！

あとは、やっぱり黒い画面はちょっと苦手なので
Compass.appがすごく気になるなぁ…
http://compass.handlino.com/