2012年12月10日月曜日

-ms-filterは無意味

Microsoft Internet Explorerにはバージョン4.0で導入されたfilterプロパティがあります。IEバージョン8からCSS標準に準拠するために-ms-filterプロパティが導入されました。しかし導入経緯を理解せず、ただ単に記述しているサイトおよび解説サイトを散見するため、この記事を書きました。

2012年6月4日月曜日

CSS Media Queries Hacks

​スタイルシートは認識するセレクター・プロパティにだけ適用されればそれで済むはずと考えていたこともありました。しかし、CSS animationのできるブラウザーではCSS Sprite画像を読み込んだ上でアニメーション、そうでないブラウザーではアニメーションGIF画像を読み込む、なんてことをする場合、どちらのブラウザーでもbackground-imageプロパティは認識されてしまうため、ブラウザーに応じて動作を変えることができません。

そこで目を付けたのがCSS Media Queriesという機能です。この機能を使うとブラウザーのサイズなどに応じてスタイルシートを変更することができます。
各種ブラウザーには独自の拡張機能がありこれを利用するとブラウザーごとに異なるスタイルを適用することができます。昔あったスターハックの合法版といったところでしょうか。

これを組み合わせるとこんな風に書けます。
@media (-moz-touch-enabled:0), (-moz-touch-enabled:1){ /* Gecko 1.9.2 (Firefox 3.6)以降に適用 */ } @media (-moz-device-pixel-ratio){ /* Gecko 2.0 (Firefox 4)以降に適用 */ } @media (-ms-high-contrast: none){ /* Internet Explorer 10に適用 */ } @media (-webkit-animation){ /* Webkit (Safari4以降 or Chrome)に適用 */ }
簡単ですが動作サンプルを。

2012年3月3日土曜日

IMG要素のonloadイベントについて

ふと見かけたので正しいのかわかりませんが、書き留めておきます。 IMG要素のonloadイベントがIE系でうまくいかないときの対処とかやっぱりIE9でもキャッシュ有効時のimg要素はonloadを無視する件とか見つけました。 しかし、onload eventを読むと

To ensure that an event handler receives the onload event for these objects, place the script object that defines the event handler before the object and use the onload attribute in the object to set the handler.
You need to set the image.onload before you set the image.src.
書かれています。 つまり、
  • IMGタグよりも前にイベント内容を含むSCRIPTタグを配置する
  • src属性を設定する前にonloadイベントを設定する
ですかねぇ。