Discover gistsYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
IE11から学びなおすAjaxの巻 - maachangの日記
現在、通常のXMLHttpRequest(XMLHttpRequest2)でAjaxでドメインを越えるには、アクセス先のサーバー側が Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: * このHTTPヘッダを返却すれば、ドメイン越えのアクセスが可能となる。 ただし、ブラウザによっては(IEとIE以外と)使うオブジェクトが大きく変わる。 IE(internet explorer以降IE)以外のブラウザでは[XMLHttpRequest]を利用すれば、最近のブラウザでは勝手にドメイン越えをしてくれるわけだが、しかしながらIEの8以前では、あの悪名高き「ActiveX」を使う必要があるわけで、これを使って try { new A
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
IE6,IE7でもOK！手軽に画像の縦中央揃えレイアウト。 « console.log :) | Don't forget trace :)
こんにちはーウエハラです。 朝起きて外が晴れてると、気温フル無視で薄着で外出しちゃうとこ直したいです(( ‘ｗ`))ｻﾑｲ 今回は、いつまで経ってもそれなりに悩む。 「縦方向の中央揃え」レイアウトについてです。天地中央ってやつですね。 コーディングってやっぱり癖とか趣味とかあって、普段支障がない状態だとなんだかんだ偏ったりしますよね。 私も例外ではないのですが、「今までやってなかったけどなるほどー！」な方法を知ったので書きます。 この方法は、cssのみで実現できます。 コーディングにおける縦中央配置の悩みどころの説明は省きます。 皆さんご存知と思うので( ´・ω・)ｗ ちなみに私は、 「tableは流石に美しくないし、でもハックも嫌だし、かといってabsoluteでむやみに浮かすのも…しかもネガティブmarginかけなきゃだし、えーでもIE6,7の為だけにjs書くのも（ry」
@cc_onを使ってブラウザ判別 - JavaScriptテックラボ - [SMART]
jQuery1.9からIE判定のjQuery.browser.msieが廃止されました。 そのためIE判定は自前で行う必要があります。 簡単で速いのはMSのJScriptに用意された条件付きコンパイルの機能をアクティブにする@cc_on。 コメントアウトの中に@cc_onを記述すると、対応していないブラウザでもエラーとならないため、安全に使えます。 IEのみ処理したい場合は下記のような1行になります。 if (/*@cc_on!@*/false){ } IEの場合だけコメントアウトの否定演算子!が処理され、falseを否定して条件文が真となります。 document.allで判別するより65倍程速いそうなので、このスタイルが嫌いでなければ積極的に使っても良いのではないでしょうか。 @cc_on ステートメント (JavaScript)
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
jQuery Pseudo Plugin (:before and :after in Internet Explorer)
A jQuery plugin for :before and :after in Internet Explorer. Pseudo-who? CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta lov
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
HTML5の要素を条件付きコメントなしでIEで使う - 徒書
今更ながら、ここもHTML5にしてみようかなという気持ちが湧いてきています。以前は、一旦公開した文書の形式を無闇に変えるのはよくないという思いが強かったのですが、個人のページなのだし色々と実験的なことをもっと試してもいいのでは、と思うようになったので。 さて、HTML5導入にあたり一番気にしていたのが、IEでHTML5の新しい要素を使う方法のことでした。今だと html5shiv を使って以下のようなコメントを入れるのが一般的になっているようです。 <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> しかしながら、HTML文書というのは様々な環境で利用されるための文書形式だと自分は考えているので、その中に(コメントとは言え)特定のブラウザのた
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 正直話題としてはとっくに旬は過ぎていますがｗ 一度まとめておきたいと思い。 殆どのweb制作者達がこれまで頭を悩ませてきたであろうIE対応。web制作者の方々は「もうIE6対応なんかしなくていいじゃん」「対応するからいけないんだよ」という意見をお持ちの方も多いかと思います。 特にIE6に対するコーダーの方達の恨みつらみは相当なもの。一言言いたい場合はとりあえず「爆発しろ！」とでもこちらでぶつけてみてください☆ (´・ω・｀) ie6bot – 腐った牛乳と呼ばれたブラウザ が、しかし会社で制作をやっている方々はそうもいかないのが現実。私のブログでも今は対応が中途半端でしっかり出来ていないのですが…ｗこのブログにはなるべく早めに対策を施すつもりです。あと、これに関してはそのうち独自の対応をし
![[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5e28c757d14aa768526c879eb8c989dd43aa815/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F07%2Fjavascript-ie-correspondence-01-150x150.gif)
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
[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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook
