今週末の土・日は、制作の他に、CSS関連の勉強をしていました。
CSSとはページのフォントやレイアウトなどデザインを制御する機能で、WindowsやMacintoshなどのOSやInternet Explorer、Fireworks、Operaなどのブラウザ、またOS、ブラウザの各バージョンにより、仕様が異なるために微妙なずれが生じます。
これらのずれをなくすことをクロスブラウザと言いますが、Web制作会社にとっては、非常に重要な課題となっています。
そのずれを解消するべく、Yahoo! UI Library(YUI)が提供する、リセットCSSとフォントCSSについて調べていました。
今まで各仕様をリセットするのには、ユニバーサルセレクタ(*)を使用して、全ての要素に対してまとめてリセットしていたのですが、以下の問題点がありました。
1. レンダリングが遅くなる。(つまり重くなる)
2.良いデフォルトのスタイルを無駄にしてしまう。
そこで、最近は必要な要素だけに指定を行う方がいいという流れにもなっており、Yahoo! UI LibraryのリセットCSSである「YUI Reset CSS」をそのまま使うことに決めました。
また、フォントファミリーやフォントサイズなどのクロスブラウザ化には、「YUI font CSS」を使うことにしたのですが、これはもともと英字を想定していた作りなので、日本語で使うには調整が必要です。またWindows Vistaから搭載されたフォントである「メイリオ」も今後は考えていく必要があり、「YUI font CSS」をカスタマイズして使用する事にしました。
これで、今まで色々と試行錯誤していたクロスブラウザへの取り組みが一つ形になると思います。
実際の導入は、現在製作中の案件から考えています。
■参考サイト
YUI Reset CSS
YUI Fonts CSS
最近のコメント