Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 こんにちは、WEBマーケティング部の杉尾です。 今回と次回で、『2015年4月現在、Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』を紹介します。 今回はFlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応実践編の第一回です。 各プロパティの書き方 はじめに ※Flexboxは過去に二度大きな仕様変更がありました。 それぞれを古い順に、『box仕様』、『flexbox仕様』、『flex仕様』(現行)と呼称します。 ※IE10はベンダープレフィックス(-ms-)付きで『flexbox仕様』に対応している唯一のブラウザです。 ※iOS 6.1以前
【参考ソース】 .foo { display:-webkit-box;/*--- Androidブラウザ用 ---*/ display:-ms-flexbox;/*--- IE10 ---*/ display: -webkit-flex;/*--- safari(PC)用 ---*/ display:flex; -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/ -ms-flex-pack:justify;/*--- IE10 ---*/ -webkit-justify-content:space-between;/*--- safari(PC)用 ---*/ justify-content:space-between; } 【解説】 2~5行目 Flexboxを作るための指定です。 6~9行目 左からflexアイテムを並べて余白があれば、そ
メモリーリークに近い話とは思いますが、ちょっと毛色の違う内容です。 「JavaScript がメモリーを馬鹿食いしてどうしようもない…」 「なぜかメモリーが確保されっぱなしなんだけど…?」 といった状況の解消法。 JavaScript にはガーベッジコレクタがあるから大丈夫… と、思われがちですが、ガーベッジコレクタは『本当にメモリ解放が必要になるまで何もしない』というものです。 (状況が悪いとガーベッジコレクタは何もしてくれなくて、ブラウザが固まってしまいます。。) 「コストはかかるが、信用できないならプログラマが勝手にやってしまえ!!」という感じです。 削除候補のメモリを強制解放 ── CollectGarbage() 関数 ── 解放したいタイミングで window.CollectGarbage() を走らせることで、強制的にメモリを解放できます。 // IE 以外のブラウザ対策のた
Justin Rogers Microsoft Corporation June 2005 日本語版最終更新日 2006 年 2 月 3 日 Web 開発者の進化 以前は、メモリ リークは Web 開発者にとって大きな問題ではありませんでした。ページは比較的単純に保たれ、サイト内の異なるロケーション間のナビゲーションは解放されたメモリをクリーンアップするうえで優れた方法でした。リークがあった場合も、たいていは気付かないほど小さなものでした。 新しい Web アプリケーションは、より高い標準に従います。ページはナビゲートされずに何時間も実行され、Web サービスを通じて更新情報を動的に取得する場合があります。複合イベント スキーム、オブジェクト指向の JScript、およびアプリケーション全体を生成するためのクロージャを組み合わせることで、言語機能が限界点に達します。これらの変更およびその他
Internet Explorer のメモリーリークは昔から本当に困りものです。。 システムテスト工程で言われた日にはどうしていいものか…。 そんな困りものの IE のメモリーリーク関連の情報をまとめをしてみます。 (ちなみに…Windows 7 を前提で話を進めさせてもらいます。つまるとこ IE8 以上。いまさら XP なんて見たくないし www) 書いてはいけない JavaScript コード (※サンプルコードは こちら をご参照ください。) IE8 以上において、 KB情報 からみる書いてはいけない JavaScript コードは以下の通りです。 (パッチが当てられる場合は関係ありません。) innerHTML プロパティを頻繁に書き換える frameset 要素を使う window.open した先のウィンドウ内で循環参照を含む iframe 要素を使う window.creat
IEの強制アップロードが3月中旬に行われているので そろそろ完全にHTML5に対応してもいいのでは?ないのだろうかっとふと思う時があります。 社内の意見が分かれるので、クライアント様の要望にもよりますが、今年いっぱいはまだ控えておこう。(吾輩は小心者です) HTML5への移行、それとは別にHTML上の動画をFlashから各ブラウザーがHTML5で対応している 形式を自分なりに試してみました。(遅い…) Flash愛好家の自分としては、HTML5に移行してもFlashで行こうと考えておりましたが やはり時代には勝てません。 スマートフォンの対応を考えると動画フォーマットをmp4にして対応していかなければ!そんな思いです。 そこで、今回いろいろと自分テストしてみたのですが Firefox、IE9で動画が再生できない?いろいろな事を体験しました。最終的にはGoogle chrome、safari
■ IE対策 - HTML5編 - IE8とそれ以前はHTML5に対応していません。 html5でサイトを作ってみる。とどちらに載せようか迷いましたが、CSS3に関する記事もあるので IEに関する情報はこちらにまとめて掲載することにします。 HTML5やCSS3に適用させる方法は、日々新しいやり方が出ている気がしています。ここに掲載されている内容も、すぐに古くなるかもしれません。 ここではいくつかの方法をご紹介していますが、いくつかを併用したり、サイトの用途によって使い分けてもいいでしょう。 html5shiv 上記URLからファイルをダウンロードし、jsファイルを任意のディレクトリに置き、headに組み込むだけ。 旧バージョンのブラウザでもHTML5を認識しブロック要素として認識される。 この場合、IE9はhtml5対応なので、IE9未満に向けて設定する。 <!--[if lt IE 9
対象ソフトウェア:Windows 2000/Windows XP/Windows Vista/Windows 7/Windows 8/Windows 8.1/Windows 10/Windows Server 2003/Windows Server 2008/Windows Server 2008 R2/Windows Server 2012/Windows Server 2012 R2/Windows Server 2016、IE5/IE5.5/IE6/IE7/IE8/IE9/IE10/IE11/Microsoft Edge Windows OSに標準装備のWebブラウザ「Internet Explorer(IE)」は、Windows OSと同様、機能や性能の向上のためにバージョンアップが繰り返されてきた。Windows 2000からWindows 10の間にリリースされたIEは、主要な
screen.width 画面幅 : screen.height 画面高 : screen.availWidth 有効画面幅 : screen.availHeight 有効画面高 : window.innerWidth 表示領域幅 : (IE非対応) window.innerHeight 表示領域高 : (IE非対応) window.outerWidth ウィンドウ幅 : (IE非対応) window.outerHeight ウィンドウ高 : (IE非対応) $(window).width() 表示領域幅 : $(window).height() 表示領域高 : document.documentElement.clientWidth 表示領域幅 : document.documentElement.clientHeight
IE11では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。 本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する ApacheでHTTPレスポンスヘッダにX-UA-Compatibleを追加する IISでHTTPレスポンスヘッダにX-UA-Compatibleを追加する 1. 動作仕様 IE=EmulateIE11 : 常にIE11モードとして動作する。 IE=EmulateIE10 : 常にIE10モードとして動作する。(※製品不具合) IE=EmulateIE9 : DOCTYPE宣言に応じて、IE9モードかQuirksモード(IE5)を選択する。 IE=EmulateIE8 : DOCTYPE宣言に応
マイクロソフト・シンガポールがAnime Festival Asia (AFA) 2013のために作成したアニメーションがYouTubeのIE公式アカウントで公開されており、登場する擬人化されたIEの名前は「藍澤 祈(あいざわ いのり)」となっています。そもそもの発端としてはWindows 8.1リリース時にIE11になったのに合わせて、IEが変身してさらにモダンになったよ!というようなイメージも兼ねて制作されたものとなっており、マイクロソフト・シンガポール内の日本アニメ大好き野郎どもが全力で愛を注いで作ったそうです。 Anime Festival Asia Special Video - feat. Inori Aizawa - YouTube 月の浮かぶどこかの廃墟 息を切らせて走って逃げる少女 廃墟のディテールはどこかで見たことがあるようなものがいっぱい 走って逃げ続けるものの……
hiront758: pokoda: Windows8.1をインストールしたらIE11からローカルファイルやhostsに書いてあるループバックが見れなくなったでござる 同じような問題にぶつかる方もいるかと思いますので備忘録的に。 うっかり Windows8.1 はちょっとした修正パッチでしょくらいの気持ちでインストールしてみたところ、メーカーのドライバーやらをいくつもインストールしなきゃいけないは、何回も再起動しなきゃいけないは、フォントはやけに大きくなるはで以外に大変な目に合いました。 なかでも、IE で 127.0.0.1… インターネットオプション→セキュリティ→信頼済みサイト→[サイト]から、http://127.0.0.1を追加で解決できます。参照 こんな解決方法も…試してみよう。
Windows8.1をインストールしたらIE11からローカルファイルやhostsに書いてあるループバックが見れなくなったでござる 同じような問題にぶつかる方もいるかと思いますので備忘録的に。 うっかり Windows8.1 はちょっとした修正パッチでしょくらいの気持ちでインストールしてみたところ、メーカーのドライバーやらをいくつもインストールしなきゃいけないは、何回も再起動しなきゃいけないは、フォントはやけに大きくなるはで以外に大変な目に合いました。 なかでも、IE で 127.0.0.1 のループバックができなくなってたり、ローカルファイルを見れなくなってたのは目ん玉飛び出るくらいびっくりしました。 Web 開発者という職業柄、ローカルに Apache 立てて、hosts にいっぱいローカルで使うドメインと紐づけてループバックアドレスを大活用してましたし、ローカルファイルをIEで見るよう
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック25 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く