ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Curved cornerはレガシーなIEでもCSS3のborder-radiusを有効にするスクリプトです。

Curved cornerはCSS3で実装されているborder-radiusをIE7などのレガシーなWebブラウザでも対応させるためのソフトウェアです。多数のWebブラウザにも対応すればborder-radiusが積極的に使えるようになりそうです。


こちらはIE7で表示した例です。実際に角丸のCSSになっています。画像は使っていません。


こちらはWindows版Google Chromeでの表示です。CSS3に対応していますので問題ありません。


もちろんMac OSXでも大丈夫です。こちらはGoogle Chrome。


Firefoxでも大丈夫です。

種明かしをすると、IE7などのレガシーなWebブラウザの場合だけHTC(HTML Components)を読み込んで、そちらで挙動を変更しています。ただHTCはIEでしか使えない(確か)ので、レガシーなFirefoxなどでは角丸表示はできないかも知れません。

Curved cornerはGPL v3でライセンスされたオープンソース・ソフトウェアになります。


MOONGIFTはこう見る

CSS3やHTML5など新しい技術を積極的に使っていこうと思った時に邪魔をするのが過去の遺産になります。そうした時に過去のWebブラウザでも新技術を使えるようにする互換性維持のためのライブラリはとても役に立ちます。

Curved cornerを使うことでレガシーなWebブラウザでもCSS3が(角丸だけですが)積極的に使えるようになります。IEに限定されると思いますが、他のWebブラウザについてはシェアは殆ど無視できるくらいに小さいはずです。新しい技術を使うためにも利用していきたいライブラリです。

curved-corner - CSS curved corner - Google Project Hosting

 

MOONGIFTの関連記事

  • DevRel
  • Com2