Firebug過信は危険

CSS

Firebug過信は危険

 状態:不明  閲覧数:2,861  投稿日:2011-12-08  更新日:2011-12-08
過去の経験に捉われ、Firebugを過信してたら、罠にはまったような気分に陥ったので、メモ今日び、ブラウザは、IE、FF、CH、それと何だろう?
とにかく、
CSSの書き方は、以前ほど単純じゃなくなったってこと。


あるサイトでいい感じのCSSがあったので、
Firebugからコピペして、使ってた。

ところが、つい先ほど、IEでは全く表示されてないことに気が付いた。

元のサイト見ても、ちゃんとIEでは表示されてる。

なんでよ、
とかなり悩んだ後、
ようやく気が付いた。


FFのFirebugは、あくまでも評価した結果を表示しているに過ぎない。

例えば、こんなCSSがあったら、

background: #5fadfc;
background: linear-gradient(#97c8fb, #5fadfc);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#97c8fb), to(#5fadfc));
background: -moz-linear-gradient(#97c8fb, #5fadfc);
-pie-background: linear-gradient(#97c8fb, #5fadfc);

実際、FF Firebugで、該当部分に表示される内容は、
background: -moz-linear-gradient(#97c8fb, #5fadfc);だけ。

background: #5fadfc; を入れていないと、
IEでは何も表示されなくなる。

中身を見たければ、
Firebugで、CSSのURLを確認し、CSS自体を直指定して、中身を確認すればよい。

ちなみに、今日も勘違いしたけど、
「ソースを表示」は、HTMLソースだけしか表示しない。
外部CSSを利用している際は、見てもしょうがない。


後、これも勘違いしていたかけど、
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
これしてるから大丈夫ってのは、また別の話。
HTML5と、CSS3って別物だと思う、多分だけど……


trタグにborder

trタグに背景色



週間人気ページランキング / 12-21 → 12-27
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 70
2 Design 0 5
2 色モデルイメージ図 | 色変換(色) 5
2 デザイン変更 | Webデザイン(デザイン) 5
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
3 RGB ⇔ Lab | 色変換(色) 3
3 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 3
3 Material Design 2014 年 | Material Design(色) 3
3 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
3 「bgcolor」「background-color」「background」の違い | CSS 3
3 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 3
3 Chromeをインストール出来ない | Google Chrome(ブラウザ) 3
3 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 3
3 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
3 Bookmarks clean up | Chrome 拡張機能 3
4 JavaScript in Bootstrap | 2系(Bootstrap) 2
4 「レイヤー」+「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
4 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
2025/12/28 1:01 更新