画像プレビューを表示する（IE9以下の場合） - jsdo.it - Share JavaScript, HTML5 and CSS
IE9 以下で File API を利用する。 準備： https://github.com/Jahdrien/FileReader の Download ZIP から、filereader.swf と jquery.FileReader.min.js を入手する。 https://code.google.com/p/swfobject/downloads/list の swfobject_2_2.zip から expressInstall.swf を入手する。 https://code.google.com/p/jquery-ui/downloads/list の jquery-ui-1.8.24.zip から jquery.ui.core.min.js を入手する。 swfobject.js を読み込む <script src="//ajax.googleapis.com/ajax/l
なぜヤフーは古いIEのアップデートを促したのか | Web担当者Forum
あなたのサイトはIEにどれくらい対応しているだろうか。IEなどの古い「レガシーブラウザー」にいつまでも対応し続けることは、決してユーザーのメリットにはならず、逆に多大なセキュリティリスクを背負わせてしまうことになる。 Webブラウジング環境を最新のモダンブラウザーに移行することで、ユーザーに対してより安全かつ快適、高機能なコンテンツを提供することが可能となり、同時にWeb開発者が抱えている作業負担やストレスも大幅に軽減することができる。 本記事では、なぜヤフーは古いIEのアップデートを促したのか、そのポリシーと方法もインタビューで明らかにする。 20年の歴史を経て、Webブラウザーは新世紀を迎えたマイクロソフトはWindows標準のWebブラウザーInternet Explorer（IE）のサポートポリシーを大きく変更した。新ポリシーが発動するのは2016年1月12日（米国時間）である。こ
Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft
今日のデジタル社会において、数十億人の人々が仕事や生活の両方でインターネットに接続し、様々なアプリケーションやサービスを利用しています。オンラインのリスクを回避し、高速かつ最適な Web 体験を得るために、モダンなブラウザーを選択することは、ますます重要になってきています。 マイクロソフトは、より安全で高速なブラウザーをご提供し、ユーザーが常に最新バージョンの Internet Explorer を使えるよう継続的な投資を行なってきました。最新の Internet Explorer 11 では、セキュリティの向上やブラウジングの高速化、Web 標準サポートによる Web アプリの互換性向上など、開発者だけでなくユーザーにとっても多くのメリットがあります。 米国時間の 2014 年 8 月 7 日、マイクロソフトは Internet Explorer のサポートポリシーについて、重要なお知ら
IE11はSVGの宣言型アニメーションをサポートしないらしい。どうする？
SVGで簡単なアニメーションをさせる場合、いきなりJavaScriptに手を出す人は少ないだろう。普通はこんな感じでanimateタグなどのSVGの宣言型アニメーションから始めるだろう。 少なくとも最新版のChrome、Firefox、Safari、Operaではこれで問題無い。しかし、IE11では動かない。SVG自体の表示はできるが、アニメーションが動かない。まさか。。。 SVG アニメーション基礎編 (Windows) スクリプト ベースのアニメーションを活用すれば、シンプルなアニメーションだけでなく、複雑なアニメーションの作成も可能になります。この理由、および CSS アニメーションなどのその他の理由から、Internet Explorer では宣言型アニメーションはサポートされていません。 だそうだ。。。いやいやいや。SVGに対応しているというからには動いてもらわないと困るんだけど
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット｜Web Design KOJIKA17
IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi
window.scrollY - Web API | MDN
WindowインスタンスプロパティcachesclosedconsolecookieStorecredentiallesscrossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPictureeventexternalfence Experimental frameElementframesfullScreenhistoryindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenXmozInnerScreenYnamenavigation Experimental navigatoropen
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER
ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。 スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewportはW3Cにより策定段階にある。IE10ではメトロ？スタイル用のネイティブアプリを作成するためのアプローチとして独自のviewport指定をできるようになっている。Windows 8のデバイス向けにレスポンシブデザインを施すには、下記のように指定する。 @-ms-viewport{width: device-width;} コンテンツの幅をデバイスにフィットさせたくない場合は下記のように指定す
IEのCSSハックが嫌いな人は、このナイスなhtmlの書き方で対応してみてはいかが？
概要 ▶ HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。いや、本当にさすがとしか言いようがない。 HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。 前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。 いや、本当にさすがとしか言いようがない。 Internet Explorerの複数バージョンの対応は面倒 や
2013年予定のjQuery 2.0、IE8以下はサポート廃止の方針
2013年初頭にリリースを予定しているjQuery 2.0では、Internet Explorer 6/7/8のサポートをしないという方針が、jQueryのブログ「jQuery Blog » jQuery Core: Version 1.9 and Beyond」で明らかにされました。 jQueryは現在1.7が最新バージョンで、先週1.8β1が公開されたばかり。ブログによると、この先のロードマップは次のように説明されています。 jQuery 1.9 (early 2013) 1.8で使用されなくなったインターフェイスの多くを削除。そのうちのいくつかはプラグインか代替APIでサポートされる。 jQuery 1.9.x (ongoing in 2013 and beyond) 継続してバグフィクスを行う。 jQuery 2.0 (early 2013, not long after 1.9)
IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
IE6～IE8でCSS3が使える「CSS3 PIE 1.0.0」登場
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 15日(米国時間)、「CSS3 PIE」初のメジャーバージョンとなる「CSS3 PIE 1.0.0」が公開された。CSS3 PIEは、CSSレベル3に対応していないIE 6/IE 7/IE 8に対して、いくつかのCSS3プロパティをレンダリングする機能を提供するプログラム。Apache License v2およびGPL v2のデュアルライセンスのもとオープンソースで公開されている。 CSS3 PIEは、既存のCSSスタイルシートに「behavior: url(PIE.htc);」の1行を追加するだけでCSS3が利用できるようになるユーティリティツール。現在サポートされているCSS3
IE7 バグ 早見表 by nobu
CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutを変更するプロパティには、「float」「position」「writing-mode」のように実装するレイアウトでその値を指定できないなどの制限があるものもあります。 また、「height="1%"」のように特定の箇所には使用できないものもあります。 ほとんどのレイアウトでは、拡大縮小せず100%の状態でユーザーに利用してもらうことを前提に制作していると思うので、この「zoom」を利用して指定する方法がよいと思います。 CSSのバグに効果のあるhasLayoutの指定方法 *{zoom:1;} 「*」は全てのタグに適応する意味になります。 全てを対象にするのが具合の悪い場合は、個別の箇所に指定してください。 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、 floatに後続するmarginの値
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://fukuyama.co/imagealpha
https://jp.techcrunch.com/2012/04/02/20120401bootstrapped-startup-saves-over-100k-by-dropping-ie/
CSSハック（IE6、IE7に効くもの、効かないもの）
方法: Windows Phone Marketplace 用のスクリーンショットを作成する
