2010.04.16

うるぁぁぁ〜っIE8っ!vol.4 解明編

ついに…解明いたしました。

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

非常に間抜けな結論でした。
ある意味IE8は濡れ衣を着せられていたのですが、
うるぁぁぁぁああああ!IE8ぉぉおっ!
という線は外しておりません orz
さすがIE…
結論から申し上げます。
font-familyにおいて、IE8のcss解釈に問題はございません。
犯人はずばり!

互換表示

なんのこたぁーない、IE7レンダリングモードで見ていただけなんです…
IE8ではなく、IE7以前のIEのバグだったんです…
すみません。お騒がせしました。
なぜ、それに気付いたか!ここ!大事です。
先日、「うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ」の検証用HTMLを置いてあったnifty.comからココログway-nifty.comのフォルダに移したのです。同期するのにじゃまだったので。
そしたらIE8でもずれが無く表示されるようになりました!
オマケにIE8のアドレスバーの横に互換表示のアイコンが現れたのです。
今まで表示されてなかったアイコンが何故急にでてきたんだ?
ということがヒントになり、検索の旅が始まったのでした。
なんの断りもなく、勝手に互換表示にしてくれてたのです。IE8のやつ。
互換表示のアイコンを切り替えるでもなく、なぜデフォルトでIE7レンダリングモードとなっているのか!
ここが一番の腹立ちどころです。
IE8で見ているつもりが、実質IE7で見ていたという。
それに気づかずに、2重苦で苦しめられていたのですw
バグだ〜 治らない〜 何故なんだ〜とブログに3回も書くくらいw。
理由は!niftyドメインが!

「マイクロソフトからの更新されたWebサイト一覧を含める」

に含まれておったからなのです!
そんで互換表示のアイコンも表示されず、強制的にIE7レンダリングされていたのです…はぁ…なにそれ。
詳しくはこちら参照して下さい。ありがたや〜 Tatsuの開発室さん
(ただ今、「うるぁぁぁ〜っIE8っ!vol.3」の検証用ページを 互換表示の検証用にnifty.comに戻しとります。

なので、「うるぁぁぁ〜っIE8っ!」シリーズ vol.3まではIE7以前のIE対策となっております。
誤情報を乗せたままではなんなんで、該当ブログは後ほど訂正するとして、ちょっと「IE8の互換表示」について嵌ったことをまとめてみたいと思います。

二重苦の一つ目は、上で書いた
マイクロソフトに認定されていたドメインを使用していたための苦。
マイクロソフトに認定されているという不運を背負っていないかどうかをしらべるには、
IE8のアドレスバーにres://iecompat.dll/iecompatdata.xml と入れると、リストが出てきます。
IE8のツール→互換表示設定で「マイクロソフトからの更新されたWebサイト一覧を含める」のチェックを外せばすむ(デフォルトでチェックされている)のですが、自分でサイト管理しているとかでなければ、なかなか気付かないと思われます。
まあ、マイクロソフトに認定されてなければ幸運です。

と、METAタグを追加してやれば、魔チェックの入ったIE8でもIE8スタンダードレンダリングになるようです。

…うぇぇ、全部に書くのか。htaccessに逃げたいところですが…私の使っているniftyはhtaccessは、使えんのでした。
ここが超参考になります。「IE8のレンダリングモードと互換表示
ここ読んでいて、気付いたのですが、
ただ今、余所様の「既存のサイトをお直し」しとりまして、「ん?!」と思って、DOCTYPE宣言を見ると、DTDのURL無しの 4.01 Transitional 表記でした。
どうりで、モダンブラウザ!と謡われてるはずのIE8で効かない要素があったわけです。
なんでぃ、IE8使えねぇな!と理不尽に評価されている気がしないでもありません。私のような人は他にも沢山いるような気がします。

そして二重苦、二つ目はまんまこれ〜)`ε′(

IE8が互換表示になりバグと誤解するのを回避する方法

はい、はい、まんまとひっかかりましたよ。怒髪天を衝くとはまさにこのこと。
Tatsuの開発室さんでも触れられてましたが、
これは何のことかというと、自分のハードディスクの中とかのHTMLをプレビューすると、マイクロソフトに魔認定されていなかろうが、StrictだろうがDTDのURL有りのTransitionalだろうが、自動的にIE7 Standardsモードで表示されるという。
これも互換表示設定のデフォルトでチェックされています。
「互換表示でイントラネット サイトを表示する」のチェックを外しましょう…。
例のMETAさえ書いてあれば問題ないらしいですが、この問題に気付かなければIE8用のMETAなんて追加しませんしねぇ…。
親切な(主に個人が開発してくれてる)HTMLエディタには対策してくれているものも有り。DWには望むべくも無くw

【総論】
今回のうるぁぁぁ騒動とは何だったのかというと。
まず、出向先のHTMLのプレビューがおかしかった(イントラネット苦)ので、
検証ページをつくり、
魔認定されたniftyドメインにアップして(魔認定苦)無意味だった。
どっちで見ても二度美味しい勝手にIE7 Standardsモード表示という、しょっぱいマイクロソフトの戦略に振り回されただけのことでしたとさ。
さて、IE9の噂が聞こえてきたようですが… 
今度はなんだっ?!((((゚д゚;))))) 

2010.04.14

流儀 font-familyは指定すべきか

先日、WindowsXPにメイリオをインストールしてみたところ、今更ながら目から鱗が落ちたりしました。
Macのフォントに慣れた者としては、メイリオはかなり読みやすいようにも感じ、場合によってアンチエイリアスのボケ具合が焦点が合いにくく目に優しくないような気がしないでも…
って、ことはやっぱり、各人が好きなフォントでブラウズできるよう、font-familyの指定は最小限にすべきなのですな。
いつも、ほぼ機械的に全称セレクタへ、メイリオ、ヒラギノ角ゴ、MSPゴシック、Osaka、と指定していて、今回、全称セレクタの指定を外して見たのです。
そうすると、あたりまえなことに、ブラウザで設定した文字で見えるわけです。
Vista以降の人は見慣れたメイリオで。
XP以前の人は見慣れたMSPゴシックで。
メイリオが気に入った人は、メイリオで。
Macの人はヒラギノ角ゴで。
明朝が好きな人は、明朝で。
へた字とか好きでたまらない特殊なフォントで。
写植見本帳片手に印刷物のデザインをしていたからか、書体の指定をしないのは手抜きのような気がしてならなかったのれす。
なので、今更ながら、各人が好きなフォントで活字を見られるというのは素晴らしいなぁと気付いたというか、老害だったというか。
小さいサイズの明朝の白抜きは読みにくいとか、日本語フォントだと細かい数字の表が崩れるとか、ちょっとこじゃれてワンポイントにcursiveとかに、font-familyの指定をするにとどめておこうっと。

2010.04.12

たった今、起こったこと

執拗な追求だけじゃあれなんでw
執拗な追求も失敗に終わった模様です…。
FTPソフトのcyberduckのアップデータが来てましたが
なんと、Tiger (MacOS 10.4.11)が切り捨てられた!!
ちょーショック!
しかも安易にアップデートして「このosのバージョンでは使えません」アラートを見てしまいましたorz
アップデートされたcyberduckをアプリケーションからフォルダごと捨てて、旧バージョンと入れ替えれば、設定などはそのまま引き継ぐようです。助かった。
まぁ、Growlも切り捨てられてる訳で…、雪豹があるうちに、雪豹飼っとけってことですかね…。

2010.04.12

執拗な追求

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

(22年 4月16日 加筆修正)
「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

只今実験中
display:block;したaの高さと同じ値のline-heightを与えたぞ
IE8で確認してきます…λ

2010.04.11

PopBox Mac的メモ

PoweredByPopBox2
サムネイル画像をポップアップで拡大表示してくれるjavascript、 PopBox を使ってみたので、作者さまの宣伝↑。
javascriptはチンプンカンプンなんですが、素晴らしい使い方サイトさまの御陰で、無事設置できました。
一素人がばかばかしくも悩んだところをいくつか上げてみたいと思います。(忘れるのでメモ。)
<script type=”text/javascript”></script>ってどこに書くん?
自分でもあほすぎると思いますが、素人はこんな所でつっかっかるのですw。
基本HTML内のどこに書いてもよいらしいです。
コメントアウトしなくてもいいのかな〜という疑問を放置して、とりあえずheadの中に記述。
グローバル変数って、どこに書くんだ?!
imgタグの中に属性とやら(キャプションの有無など)を設定するらしいのですが、それが結構長く、画像が増えたらいちいち表記するのがめんどくさいと、いらぬ将来設計が頭をよぎりました。
上記のありがたいサイトさまにこんな一文が。

>下記のグローバル変数をページのonloadのタイミングなどで上書きすれば、いちいち<img>タグに上記属性をうめなくても済みます。

素直にheadに置いた<script type=”text/javascript”></script>の中に書けばいいのですが、素直に<img>タグに表記したものをコピペして悩みました。
効かん。
凡ミスです。グローバル変数とやらと<img>タグの中に書く属性とやらは表記が違うのです。
その二つをクリア(ってほどの大げさなことではない)したところ、いとも簡単に設置できてしまいました。
ところが画像にマウスカーソルを乗せたときに、虫眼鏡に変わらない。
べつにカーソルは変わらなくてもいいのですが、せっかくの機能でもあるし、画像だけを見せたいがために閉じるマークとかデフォルト装備を全部取っ払っちゃったので、これだけは残したい気分に。
ccsしか理解できないので、とりあえずStyles.cssを眺めてみると、

magplus.curという拡張子の画像が指定されております。
Windows独自のもので、Macには読めましぇん。
用意されたimageフォルダをあさるとどうやらgifの画像ファイルもある。
と、思いきや、ポインタ用の画像ではなく、右上隅に表示するためのモノのようですが、大きさもちょうどよいので代用。
後ほど枠線を消す加工をさせてもらうことにします。

cursorの値が読み込めないと、font-familyと同じく、どんどん後ろの候補を読み込むらしいので後ろにgifファイルの指定をしました。
.PopBoxImageLargeも同じく修正すると、拡大した画像にポイントしたときにマイナスの虫眼鏡にかわり、「閉じる」ってことが判りやすくなります。
Safariではばっちりです。
Firefox Mac版は…×。cursor: url をサポートしてないようです。
逆にFirefox Win版は○、ie8は×でした。
【PopBox感想】
よけいなギミックもないので、さっぱりしている。設置も簡単。
デフォルトのデザインはちょっと微妙。
【個人的総括】
javascript入門でも買って勉強した方が良さそうです。

PageTop