第2回 完全版：ブラウザとデバッグ環境 | gihyo.jp
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb
Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する Appcelerator Titanium Desktop - 仙台 Ruby Vim JavaScript フリーランスプログラマ
古いエントリーなのですが、まだ時折検索エンジン経由？でいらっしゃる方がいるみたいなので追記 Titanium Desktopは今はTideSDKと変わってオープンソースプロジェクトになっています。 いいたい事を先に。 Ruby,Python,PHP,JavaScriptやってる人でデスクトップアプリ作成に興味ある人は Appcelerator Titanium Desktop さわってみるといいと思います。OS X, Windows,Linuxとマルチプラットフォームなデスクトップアプリをhtml,JavaScript,Ruby,Python等の慣れ親しんだ技術で簡単に作成、公開することができます。 予想以上にブクマされてるみたいなので、Titanium Desktopの特徴を箇条書きですが追加しておきます。 一言で言えばJavaScriptで記述するAdobe AIRのようなRIAフレー
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
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 です。画像の読み込みが完了した時点で適切な値に更新されます。
フォーカスイベントとタブ切り替え - higeorange's blog
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
New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
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
hxxk.jp - 各種ブラウザの CSS Selectors testsuite の検証結果のまとめ (:hover 擬似クラスや :active 擬似クラスや :focus 擬似クラスも含んだ 2008 年版 )
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
window.nameによるクロスドメイン通信 - snippets from shinichitomita’s journal
随分前になるが、SitePenの人 (dojo) が書いたブログに window.nameを使ったクロスドメイン通信についてまとめられていた。 window.name Transport - Blog | SitePen 気になっていたがちゃんと読む時間がなかったので、今ごろ見てみる。抜粋して訳。 window.name による通信 The window.name transport is a new technique for secure cross-domain browser based data transfer, and can be utilized for creating secure mashups with untrusted sources. window.name is implemented in Dojo in the new dojox.io.windowN
はてなブログ | 無料ブログを作成しよう
賃貸暮らしのわが家の地震対策【揺れから命を守る編】 以前のブログでも記載した、防災の優先順位に基づいて対策を進めています。まだ手をつけられていない部分もありますが、ある程度まとまってきたのでざっくりとご紹介していきます。 優先順位別に改善していっているため、今回は主に地震の揺れ対策がメインになります。…
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
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」は使用しないでください。 テキ
Window.postMessage() - Web API | MDN
HTML DOM APIWindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationbarmenubar
Tombloo、ブックマークをクロスポストするGreasemonkey - FAX
追記 2008/7/14Tombloo 0.3 - 実用 Tombloo 0.3には、Tomboo自体で各種サービスへポストするフォームが追加されています。 Cross Bookmark / Tombloo はてなブックマーク、del.icio.us、Yahooブックマーク、いずれかのポスト画面から、他のサービスへも同時にポストするGreasemonkeyスクリプトです。Firefox拡張のTombloo 0.2.1以上に依存しているため、この拡張がインストールされている必要があります。 ポスト先は、はてなブックマーク、del.icio.us、Yahooブックマーク、Googleブックマーク、Tumblr、Twitter、6つのサービスから選ぶことができます。ポスト先のサービスに、予めログインしていないとエラーが発生します。アイコンが薄くなっているサービスへはポストされません。また、最後に
サーバーサイド技術を使わないクロスドメイン通信補足 - os0x.blog
クロスドメイン通信方法のまとめ - nopnopの日記の補足です。 ブックマークコメントでちょろっと書いたけど、nopnopさんが書いている以外の方法としてwindowのname属性を使う方法とHTML5のpostMessageがあります。 window.name これは単純な方法(その分、クロスブラウザであり割と古いブラウザでも動作する(追記:)と、思ったけどIEの動作は微妙かもしれない)で、例えばwindow.open('http://example.com/','hogehoge');といったJavaScriptでウィンドウ(タブ)を開くと、hogehogeというウィンドウが開かれます。インラインフレームなどにも同様にwindowにnameをつけることができます。この名前はwindowを作る側が設定することが出来て、作られる側はドメインなどに関係なく設定されたnameを読み取ることが
IE、Firefox、Safari、OperaのCSSに関する互換性 - builder by ZDNet Japan
今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 VMware modern App Days特設企画 VMware Tanzuによって拓かれる未来 これからアプリケーション戦略の道しるべ オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 DX推進を阻害する3つの要因 プロフェッショナルが語る データ分析・データ活用の実現 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる 内閣官房やラックが登壇 ゼロトラストが官民一体で サイバーセキュリティを定義する クラウドネイティブの実現 モダンインフラの構築・運用の課題
JavaScript クロスブラウザに関するメモ - とみぞーノート
IEとFireFoxでのJavaScript(と言うか主にDOMまわり)の挙動の違いに関するメモ書き 1.ウィンドウ/ドキュメント関連 1.1 ドキュメントの幅,高さの取得 IE6 document.body.scrollWidth document.body.scrollHeight NN6,FireFox document.width document.height FireFox12ではdocument.width,heightはundefinedになる。 https://dev.mozilla.jp/2011/06/firefox6-backward-compatibility/ によると、このプロパティは標準化されなかったので、FireFox6以降で削除された模様。 かわりに、以下のようにしてサイズを取得できる。 parseInt(window.getComputedStyle(
ie以外でもクリップボードが使えるsetClipboard.js
ie以外でもクリップボードが使えるsetClipboard.js IE以外のブラウザでもクリップボードにコピーが簡単にできるjavascriptライブラリを作成しました。 IEにはclipboardData.setDataという関数があり、クリップボードへのコピーなどが簡単にできますが、IE以外のブラウザはクリップボードにアクセスする機能がありません。 そこでflashプレーヤ―のsetClipboard関数を利用してクリップボードにコピーするライブラリです。 まずは関連ファイルをダウンロードします。 ダウンロード(setClipboard.zip) 解凍してできる『setClipboard.js』と『setClipboard.swf』は同じディレクトリにアップしてください。 header要素などでsetClipboard.jsを読み込みます。 <script type="text/jav
Purchase Intent Data for Enterprise Tech Sales and Marketing | TechTarget
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ashikunep.org
SitePoint CSS Reference
http://blog.xtyle.ath.cx/language/javascript/dns.html
Cross Browser Keyboard Handler