とうとう「Internet Explorer 11」のサポートが（ほとんど）終了、27年の歴史に幕／互換性維持のため一部で存続はするものの、もはや考慮しなくていい存在に
🎉ついにGoogle検索が、IE11のサポートを終了しました
GoogleのソフトウェアエンジニアであるMalte Ubl（@cramforce）氏によると、「Google検索は、主要プロダクトにおいてIE11のサポートを終了しました 🎉」とのことです。 Google Search no longer supports Internet Explorer 11, because ‘it is time’ 元ツイートは、下記から。 As a web developer this is one of the happiest announcements in a while: Google Search ended support for IE11 in its main product 🎉 (you can still search but will get a fallback experience). I'm mostly posting th
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
【CSS】position: stickyでスクロールに追従する要素を作る | misoblog
当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置（top, right, bottom, left）を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン
2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita
日本では、2016年1月13日でIE8の正式サポートが終了しました。 それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。 正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、 クライアントには「IE8は対応外です」としっかり説得すべきです。 でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。 1. IE8は対応外と突っぱねるべし 一番良いIE8対策は、動作確認対応外にすることだと思います。 公式サポートが止まったことで予期せぬ攻撃を受け、そのリスクを誰が負うのかクライアントさんにも説明してください。 ブラウザシェアなどをお見せして、そろそろ推奨環境をアップデートしませんかと説得してみてください。 古いユーザーさんに支えられているサービスは…頑張って対応してください。 2. HTML5とCSS3が使えない ついく
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
【注意喚起】 Internet Explorer のサポートポリシーが変更、バージョンアップが急務に：IPA 独立行政法人 情報処理推進機構
2016 年 1 月 12 日（米国時間）を過ぎると Microsoft 社が提供するウェブブラウザ「Internet Explorer」（以後、IE）のサポート対象が“各 Windows OS で利用可能な最新版のみ”にポリシーが変更されます(*1)。サポート対象外となる IE は、セキュリティ更新プログラムが提供されなくなるため、新たな脆弱性が発見されても解消することができません。脆弱性が見つかり攻撃者がそれを悪用すると、ウイルス感染により「ブラウザを正常に利用できなくなる」ほか「情報が漏えいする」などの被害に遭うおそれがあり（図1）、早急なバージョンアップが求められます(*2)。 図1：IE のバージョンごとの影響（イメージ） 1. IE の脆弱性 IPA が運営する脆弱性対策情報データベース JVN iPedia(*3)に登録されている IE 7 から IE 10 までの脆弱性対策
Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用
2015年8月19日（Bootstrap誕生4周年）にリリースされた、Bootstrap 4 alphaの主な特徴を紹介します。 IE8のサポート終了、Sassに移行、CSSの単位はremとem採用など、かなり変更されています。 Bootstrap 4 alpha 上記の公式ブログに主な特徴が掲載されていたので、ざっと意訳しました。 LessからSassに移行 コンパイラにはlibSassを使用。 グリッドシステムの改善 モバイルデバイスへのターゲットをより良く新しいグリッドシステムを加え、mixinsを総点検しました。 オプトインでFlexboxをサポート Flexboxベースのレイアウトやコンポーネントが利用可能に。 新コンポーネント「Card」 Cardはwell, thumbnail, panelの代わりとなるBootstrapの新しいコンポーネントで、より使いやすいよう改善。 H
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
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
IE8以前でCSS3の表現を使うには
jQueryを利用するには、公式サイト（http://jquery.com/）から、jQueryファイルをダウンロードし、scriptタグから参照して利用するのが一般的です。あるいは、Google Code（http://code.google.com/intl/ja/apis/libraries/devguide.html#jquery）で提供されているjQueryファイルを利用する方法も普及しています。 ［リスト08］Google Codeで提供されているjQueryファイルを参照 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> それとは別に、自分のJSファイル（例ではmy.js）も次の書式で作成しておきましょう
IEに互換表示をさせないX-UA-Compatibleの指定 - loconoco
IEはバージョンごとに表示方法（レンダリング）がガッツリ変わると言う、とてもやっかいなブラウザです。 また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、ありがた迷惑この上ない機能が搭載されています。 このサイトのトップページをIE10で表示すると・・・ アドレスバーに紙が破けたようなアイコンが表示されます。そしてこのアイコンをクリックすると互換表示に切り替わり、再レンダリングがはじまります。 box-shadow、background-sizeなどのCSSが効かなくなってしまいました。 また同じアイコンをクリックすれば互換表示が通常表示に戻ります。もし通常表示に戻さなかったか場合、IEは設定を覚えてしまい、再度同じURLにアクセスすると、また互換表示になってしまいます。IEを終了して再起動しても戻りません。 新バージョンのIEを使用しているユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【朗報】IE があと 5か月で廃止、Windows Update で自動的に起動不能へ。→｢大混乱起きそう｣｢役所とか大丈夫なんですかね｣｢弊社…｣
「Internet Explorer 11」が無効化される前に知っておきたいこと／どのOSが対象？ IEでしか見られないページはどうすれば？ Windows 11ではどうなるの？【やじうまの杜】
Microsoft、「Internet Explorer 11」のサポート終了を発表、～猶予期間は約1年、2022年6月15日まで／Windows 7/8.1や一部法人向け製品は除く。MSHTML（Trident）エンジンも維持
Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
「企業内Web閲覧環境」調査2015年度版：IE 8の利用率は縮小するも、いまだ29％の企業が利用 | Web広告研究会セミナーレポート
