html5shiv.jsとselectivizr.js導入でIE8以下のレイアウトずれから解放…されるかもしれない - euphoLab
最近またバリバリとコーディングしているわけですが、どうしようもない凡ミスから意外な発見がありました。 HTML5でコーディングして、html5shiv.jsとselectivizr.jsやPIE.htcを使えば、IE7だろうが8だろうが、IEの面倒くさいレイアウトずれに悩まされなくてすむ！ということです。 はじめの凡ミス 最新のブラウザだけ対応すればいいよ、なーんて仕事はありません。だいたいIE7や6から対応です。でもHTML5でコーディングしちゃいます。HTML5は古いIEに対応してませんが、そのあたりはこちらの記事参照【[IEよ滅べ！の意味がわからない方] いざ、爆速と美麗のWWWへ！IEがダメな理由教えます】。 HTML5を古いIEに対応させるためには、html5shiv.jsというファイルを使います。これを入れると<header>や<footer>など、HTML5から出てきたタグを
IEのCSS対策総まとめ 小さなズレ・フロートの不具合・PNGの透過など - /dev/null - タバヤシデザイン
ウェブサイトをつくるうえで避けて通れないのがIEのバグとの戦いです。特にCSSのバグは凄まじく、何も知らずにIE6で表示確認なんかすると、その崩壊したサマにしこたま絶望感を味わうことになります。 IEと対峙するためにまず必要なのは、各バージョンごとの大まかな特徴を理解し、その付き合いかたに慣れることです。IE9以降は別としても「なんとなくやったけど何も問題なかった」なんてことは十中八九ありません。今回はその付き合いかたをまとめようと思います。 1. doctype宣言 IE6以降、doctype宣言の書き方によってCSSの解釈モードを変更するDOCTYPEスイッチという機能があります。解釈モードは次のふたつです。 標準準拠モード：CSSの解釈を、W3Cが定めた仕様にあわせるモード 後方互換モード：CSSの解釈を、バージョン6未満のIEにあわせるモード これらの最大の違いはボックスモデルの解
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
IEの異なるバージョンをテストする環境のまとめとそれぞれの特徴
IE6, IE7, IE8などIEの異なるバージョンをテストするアプリケーション・環境のまとめとそれぞれの特徴を紹介します。 Internet Explorer 7のキャプチャ [ad#ad-2] 「Sandboxed IE Browsers from Spoon」から各アプリケーション・環境のまとめと特徴をピックアップし、いくつか追加しました。 IETester Virtual PC IE Super Preview IE Collection マルチPC環境 IETester IETester 対応するIEのバージョン IE5.5 IE6 IE7 IE8 IE9preview 主な特徴 異なるIEのバージョンをタブで同時に表示することが可能なアプリケーションです。 プリントプレビューのテスト、ポップアップによるインタラクション以外のテストは万事良好に動作します。FlashとCSSのフィ
W3CによるHTML5テスト、次世代WebブラウザではIE9がもっとも好成績 | スラド IT
W3Cが「HTML5 Test Suite Conformance Results」を発表した。これは各ブラウザがHTML5をどれだけサポートしているかを調査したもので、232のテストから構成されている。Internet Explorer 9 Platform Preview 6とChromium 9.0.571.0、Firefox 4.0b8pre、Opera 11.00 alpha、WebKit Nightly Build r70732を対象としてテストが行われ、全体としてはIE9がもっとも好成績を残す結果となった。 テスト結果を見ると、IE9はattributeやaudio、video、xhtml5といったテストを100％パスしている。いっぽう、canvasやgetElemetnsByClassNameについてはほかのブラウザよりも劣る結果となっている。
IE用HTML5新要素のMinify生成
Updated 2010.08.02 / Published 2010.08.02 latest logさんでエントリーされていたコードを削る方法がすごく勉強になったので、練習がてらに早速IE8以下でHTML5の新要素をCSSセレクタで使う際にdocument.createElement()で事前に書き出しておく必要があるコードをMinify化してみました。 書き出す必要のあるHTML5の新要素 まず最初に、IE8以下では未知の要素となるために書き出す必要のあるHTML5の新要素名を列挙しておきます。 article要素 aside要素 nav要素 section要素 hgroup要素 header要素 footer要素 figure要素 figcaption要素 time要素 mark要素 この他にも、HTML5の新要素にはcanvas要素, audio要素, embed要素, vide
IE+jQueryでHTML5新要素のDOM操作
Updated 2010.07.26 / Published 2010.07.26 jQueryのprepend(), append(), appendTo(), before(), after(), html(), wrap(), wrapInner(), wrapAll()など、指定のセレクタに対してオブジェクトを操作できるメソッドを用いてHTML5の新要素を操作する際は、現行MicrosoftからリリースされているIE8までのバージョンでは、HTML5の新要素が認識できないので注意が必要です。 この罠に嵌ることが想定される事態 HTML5でリニューアルされているサイトが散見されるようになってきた今日この頃ですが、表題の問題で混乱が起こることが想定される事態としては、事前にHTML5の新要素群をdocument.createElement()で作成済みなので、「よし、これでjQuery
[CSS]IE5～9の各バージョンのCSSサポート状況の一覧
マイクロソフト社が公開している、Internet Explorerの各バージョン（IE5, IE5.5, IE6, IE7, IE8, IE9）のCSSサポート状況の一覧を紹介します。 ※IE9は2010年10月現在、ベータ版です。 CSS Compatibility and Internet Explorer [ad#ad-2] 上記の「CSS Compatibility and Internet Explorer」では、CSS2.1, CSS3の各プロパティのIE5～IE9betaのサポート状況がまとめられています。 Internet ExplorerのバージョンごとのCSSのサポート状況はおおまかに、IE6でCSS Level1をサポートし、IE8でCSS Level2 Revision1(CSS2.1）を完全にサポートしCSS Level3の機能を少しサポートし、IE9ではCSS3
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
ppBlog official
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
IEにCSS3を反映するCSS3 PIE | Nutspress
Web Designer’s Checklist で各ブラウザーのCSS3への対応状況をチェックする限りではIE総崩れって感じなのですが、よくよく考えてみるとIEって5.0以降、独自プロパティfilterを使うことでいろんなことが出来てたし、フォントフェイスにも早くから対応してたんですよね。ただ、悲しいかな独自タグであったがために後発のモダンブラウザたちがこのプロパティを使えずにCSS3という形で発展してしまったものだから、取り残される形になってしまいましたけどね。 IE9.0でCSS3に対応していくということですが、取り急ぎのIE6.0～IE8.0への対応を考えるとfilterではちょっと不十分。というか、レンダリングに時間がかかったりすることを考えれば、スクリプトを使ってCSS3を反映させることが好ましい（？） ie-css3.htcなんてのもありますが、それよりも高機能のスクリプトC
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net
IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。 IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。 IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
IE6-8でもCSS3に対応するライブラリまとめ:phpspot開発日誌
Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE IE6-8でもCSS3に対応するライブラリまとめ。 IEでCSS3に対応するには behavior で htcを指定する方法が簡単で便利ということでライブラリが色々あるようだったのでまとめました。 そんなに多機能はいらないという場合に、機能を削ったものを使うという方法もありかもしれません。 CSS3 PIE 角丸、ドロップシャドウ、グラデーション背景等、多くのプロパティに対応していて今後も対応を強化 IE-CSS3 border-radius、box-shadow、text-shadow等のプロパティが使えるようになる。いかがスタイリング例 css3shadow.htc テキストに影をつけるためのhtc curved-corner - Project Hosting on
IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
「Google Chrome Frame」ベータ版を使えば、IEがよりHTML 5対応に | ライフハッカー・ジャパン
Internet Explorer用：特定のウェブページを、Chromeスタイルで表示してくれる、Internet Explorerの拡張機能「Google Chrome Frame」が、ベータ版へとアップデートされました。これにより、HTML 5動画・音声への対応などの、Chrome 5.0の機能が追加され、Internet Explorerとの連係も、より固くなっています。 HTML 5に対応したことで、Youtubeのフラッシュ無しバージョンの視聴が可能となり、Google Waveなどの、ウェブアプリも使用できるようになりました。さらに、プライバシーを守りたいユーザーには嬉しい、キャッシュの消去や、クッキーのブロックが可能となっています。 Chrome Frameは、Internet Explorer用の無料拡張機能です。対応したページでのみ、動作します。Chrome Frameの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
覚えておくと良さそうなIEのバージョン別スタイルシート | Web活メモ帳
