Microsoft Internet Explorerにはバージョン4.0で導入されたfilterプロパティがあります。IEバージョン8からCSS標準に準拠するために-ms-filterプロパティが導入されました。しかし導入経緯を理解せず、ただ単に記述しているサイトおよび解説サイトを散見するため、この記事を書きました。
2012年12月10日月曜日
2012年6月4日月曜日
CSS Media Queries Hacks
スタイルシートは認識するセレクター・プロパティにだけ適用されればそれで済むはずと考えていたこともありました。しかし、CSS animationのできるブラウザーではCSS Sprite画像を読み込んだ上でアニメーション、そうでないブラウザーではアニメーションGIF画像を読み込む、なんてことをする場合、どちらのブラウザーでもbackground-imageプロパティは認識されてしまうため、ブラウザーに応じて動作を変えることができません。
そこで目を付けたのがCSS Media Queriesという機能です。この機能を使うとブラウザーのサイズなどに応じてスタイルシートを変更することができます。
各種ブラウザーには独自の拡張機能がありこれを利用するとブラウザーごとに異なるスタイルを適用することができます。昔あったスターハックの合法版といったところでしょうか。
- Mozilla FireFox
- Microsoft Internet Explorer
- Webkit (Apple SafariとGoogle Chrome)
- Opera（Version 12の時点では拡張機能なし）
@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)に適用 */ }簡単ですが動作サンプルを。
2010年2月14日日曜日
Dojo基礎文法最速マスター ～CSS編～
Dojoにはテーマがあります。
<style type="text/css"> @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/soria/soria.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/nihilo/nihilo.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css"; </style>最初の１つはいわゆるリセットCSS。残りの３つがテーマ。読み込んだだけでは適用されません。 テーマを適用したい範囲にclass="テーマ名"の属性を付けます。全体に適用したいなら、
<body class="soria">こんな感じで<body>タグに設定します。
Dojoは読み込まれると<html>タグに次のクラスを設定します。
- dj_ie / dj_ie6 / dj_ie7 / dj_ie8 / dj_iequirks
- dj_gecko / dj_ff2 / dj_ff3
- dj_khtml / dj_safari / dj_chrome
- dj_opera
- dj_contentBox / dj_borderBox
<style type="text/css"> /* ブラウザ共通 */ .someClass { ...; } /* IEのみ異なる部分を上書き */ .dj_ie .someClass { ...; } </style>こうすると、CSSの優先順位により!importantしなくてもIEでのみ上書きされます。 CSSだけで解決できるので、JavaScriptで書き換えとかしなくて済みます。
登録:
投稿 (Atom)
