最終更新日: 2008-11-21 WEB+DB PRESS Vol. 48 に向けて書いた記事の元の原稿です。 ソフトウェアなどを使いこなすために、ストレスを感じながらもしぶしぶ覚えなければならないようなノウハウ、「バッドノウハウ」がテーマの本連載、第5回の今回はブラウザのBK を、コンテンツの扱いに関連するものに絞って取り上げたいと思います。 IE の Content-Type sniffing 通常、ブラウザはHTTP のレスポンスの Content-Type ヘッダに応じて、コンテンツをどのように処理するか決めますが、Internet Explorer 7 (IE7) はこのヘッダを無視するときがあります*1。 たとえば、次のようなファイルを test.txt という名前でウェブサーバに置いて、 IE7 からアクセスすると、サーバから Content-Type: text/plai
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb
getBrowserVersion() は、ブラウザのバージョン番号(Major[.Minor])を返します。 <html><head><title></title></head><body> <script> function getBrowserVersion() { // @return Number: return window.opera ? (opera.version().replace(/\d$/, "") - 0) // Opera10 shock : parseFloat((/(?:IE |fox\/|ome\/|ion\/)(\d+\.\d)/. exec(navigator.userAgent) || [,0])[1]); } window.onload = function() { alert(getBrowserVersion()); } </script> <
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
input や textarea にフォーカスがあったってる状態でタブを切り替えたときに focus, blur イベントがどのように起こるか各ブラウザを調べてみた。 テスト内容 テストページ ページには input[type=text], textarea, button が並んでる。 各要素はフォーカスすると 要素名を書き出し、フォーカスが外れると 要素名: blur と書き出すようになっている。 やったことはテストページと別のページを開いておき、input or textarea or button のいづれかの要素にフォーカスした状態でもう一方のページに切り替え、テストページに戻るというテスト。ページの切り替えはタブバーを使った。 テストしたブラウザは IE 7, Firefox 3.0.6, Opera 9.64, Safari 3.2.2 の 4 つ。いづれも Windows
N/M ...... CSS Selectors test-suite のテストにて、全てはパスしなかったが M 項目中 N 個パス。なお、全項目にパスしていない場合でも、特定の条件のみパスしなかっただけといった場合（ buggy ）と、セレクタ自体をサポートしていない場合（ unsupported ）は区別して網掛けしています（薄い網掛けは buggy 、濃い網掛けは unsupported ）。※このページ上では、 buggy の背景色を #f56800 、 unsupported の背景色を #920f00 としています。 - ...... CSS Selectors test-suite のテストが動作せず。 Fx3: Firefox 3 ／ Fx2: Firefox 2 ／ Fx1: Firefox 1 ／ IE8 RC1: Internet Explorer 8 Release
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) が注目を集めています。それによると Firefox の判別は次の 15 文字で行えるそうです。 //Firefox detector 2/3 by DoctorDan FF=/a/[-1]=='a' いったいなぜこれで Firefox が判別できるのか、少し探ってみました。 何を判別しているのか SpiderMonkey のソースコードを探る より短い SpiderMonkey の判別法 「ブラウザ判別」としての不備 まとめ 参考文献 何を判別しているのか 実際に探っていく前にひとつ注意しなければいけないことがあります。それは、上記のコードが Firefox を判別するものではないということです。このコードには Web ブラウザ固有のオブジェクトモデルに関する情報が含まれて
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) を発端に、SpiderMonkey の判別とブラウザ判別: Days on the Moon や JavaScript でのブラウザ判別 - 「仕様の盲点」ではなく、「プロパティの有無」を使う方がマシ - 2009年2月 - Blog - EOFなどの記事があがっています。 ここでは少し実際的なケースごとにサンプルコードを紹介していきたいと思います。(サンプルコードは適当に書いているので、不正確な箇所があるかもしれません。ご了承ください。間違い等ご指摘いただけると助かります。) なお、これらは汎用的なJavaScriptライブラリを使っていれば意識しなくても良いケースがほとんどです。 分岐する必要がないケース 分岐する必要がないなら、ケースとしてあげる必要はないと思われるか
CSS Sticky Footer Layout It Sticks to the Bottom of the Page! See that footer, way down there? It's stuck to the bottom of the page even when thin on content. Otherwise it would be floating halfway up the page. Use the code and assets on this website like new UK gambling sites do and your site will be looking perfect in next to no time! Cross Browser Support for Sticky Footer Code This sticky foot
Operaで、はてなブックマークのAutoPagerizeの設定などが維持されなくなったので、その原因を調べたら(1ドメインあたりの)Cookieの上限数を超えていた*1からだったみたい。 クッキーは、「名前＝値」の1つの組みを1個と数えます。変数1個がクッキー1個に相当します。Netscapeの仕様およびRFC 2109(obsolete)によると、クライアントは1つのホストまたはドメイン名につき最低でも20個のクッキーをサポートする必要があります。20個の変数が使えることになります。 http://www.teria.com/~koseki/memo/cookie/cookie_4k.html の通り、仕様上の制限は知っていたけど、実装がどうなっているのかを(大きさでではなく)数の制限について調べてみた。 ブラウザ 個数 IE6/7 50 Firefox3.0.5 50 Opera9.
The Latest Pop News ＆ More Opera, Firefox, Sleipnir ( Custom ＆ Tips, Latest News, My Opinions, Lovely Music ＆ Movies and so on ...?! No ! More ＆ More !! ) とりあえず、Songbirdの拡張を３つほど紹介します。 Songbirdらしく、主に、曲に対するユーティリティー周りの拡張ですね。 □前回：[N239] メディアプレーヤー Songbird1.0 リリース （続きはこちら） ３つほど拡張を紹介するのですが、まず、スクリーンショットを見ていただいと思います。 （１）LyricMaster 右側にある歌詞ですね。いま現在、再生している曲の歌詞を自動的にとってきてくれて、かつ、音楽ファイルにその情報を書き込んでくれます。 ※（当然のこと
Powered by Mozillaな音楽プレーヤー「Songbird 1.0.0」がリリースされました。 FirefoxユーザーにとってのiTunes代替プレーヤーを目指しつつ？、少しずつ開発されてきたオープンソースミュージックプレーヤーですが、本バージョンでバージョン1系へと進化し、そろそろ使うか・・という気にさせるソフトウェアになっています。 今回のバージョンでは、インターフェースに大きな変化は無く、ほぼ従来のベータ版などと同様の操作性を維持しています。 インストール時には、日本語言語パックも自動的にインストールされ、旧ベータのように日本語化する手間もなくなっています。 ＊アドオンとの兼ね合いなどもあり、メニュー部などに多少日本語化されていない部分も見受けられます。 インストールは、ダウンロードしたファイルをダブルクリックするとすぐに開始されます。 インストール後は、初期導入アドオン
CSS Selectors test-suite およびダイナミック擬似クラスセレクタをチェックしてみた CSS Selectors testsuite や、「 CSS の互換性と Internet Explorer 」などから自分用のまとめ表を作りたいで、 ......まあ、 CSS Selectors test-suite - CSS3 . info はセレクタだけのチェッカですし、 CSS の互換性と Internet Explorer と組み合わせてよいまとめが作れたらいいかなと思います と書いていましたが、とりあえず CSS Selectors test-suite にて、 CSS 2.1 のセレクタおよび CSS3 のセレクタについてまとめることにしました。 CSS Selectors test-suite だと :hover 擬似クラスや :active 擬似クラスや :fo
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
