Internet Explorer の今後について
(※ 2018 年 7 月 18 日に Japan IE Support Team Blogに公開した情報をアーカイブする目的で、Microsoft 社員にて改めて公開しております。) こんにちは。Microsoft Edge / Internet Explorer サポート チームです。 以前に「Internet Explorer および Microsoft Edge での Flash の今後の対応予定について」という記事を公開しましたが、「Internet Explorer」自体の今後の予定についてお問い合せをいただくこともありましたので、今回はそのお話をします。 2014 年の 8 月 7 日に Internet Explorer のサポート ポリシー変更を発表しました。この変更により、2016 年 1 月 12 日をもって各 OS 上で動作する最新バージョンの Internet E
視野が広がるCSSの妙 〜object-fit 編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。毎日ソファで寝る男、フロントエンドエンジニアのザワです。 この度、知らなければ損をしている、知っておけば得しかない、視野が広がるCSSの妙シリーズを開始する運びになりました。 今回は、object-fit編です。 はじめに object-fit、みなさんはバリバリ使いこなしていますか？ 私はというと、バリバリ使っています。それこそ、レガシーなCSSやっちゃってるんじゃないの！？ SEOで画像検索に注目が高まっているのにbackgroundやっちゃってるの！？ なんて上から目線で言いたくなってしまいます。だって、object-fitを知っているから。 じゃあobject-fitって何ができるの！？ 美味しいの！？ ってな具合に気になってしまいますよね。そうでしょう。 ざっくり説明すると、background-sizeプロパティでcoverやらcontainやらで、諸々やっていたこ
【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに… at softelメモ
問題 特定のブラウザのみにスタイルシートを適用したいです。 IE10、IE11では条件付きコメントが効かないので別な方法が必要なのですが。 答え それぞれ以下のようにすると可能。 IEのみに適用 @media all and (-ms-high-contrast: none) { /* ここに書く */ span { color:#c00; } } Firefoxのみに適用 @-moz-document url-prefix() { /* ここに書く */ span { color:#0c0; } } Chromeのみに適用 @media screen and (-webkit-min-device-pixel-ratio:0) { /* ここに書く */ span { color:#00c; } } Safariのみに適用 ::-webkit-full-page-media, :futu
IE11でもobject-fitを使う一番簡単な方法
CSSのobject-fitプロパティって便利ですよねぇ。 画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。 がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。 そもそもobject-fitって何？ 例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。 幅200pxで揃えたら上下にデコボコになりますし、 高さ200pxで揃えると大きさが不揃いになりますし、 幅200px 高さ200pxを指定すると被写体が歪んでしまいます。 左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？ これを解決してくれるのが object-fit:cover; です。 こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。 ■objec
IEでもobject-fitを使えるようにするスクリプト「fitie」 | TechMemo
fitieは、IEでもobject-fitを使えるようにするためのスクリプトです。いわゆるポリフィル(Polyfill)というやつですね。 object-fitは、画像や動画を簡単にトリミングすることができる便利なCSSプロパティですが、IEには対応していません。 fitieを導入することで、他のブラウザと同じようにIE8～11でもobject-fitが使えるようになります。 fitieの使い方 GitHubからfitieをダウンロードします。distフォルダ内にあるfitie.jsをサーバーにアップして、スクリプトを読み込みます。 <script src="fitie.js"></script> あとは、通常通りCSSでobject-fitを指定してあげるだけです。 img.cover, video.cover { object-fit: cover; } あとがき スクリプトを読み込ん
IEでSVGファイルが豆粒みたいになる現象を回避する | GRAYCODE HTML&CSS
IE11以前のブラウザでIllustratorなどから書き出したSVGファイルを正しく表示する方法を解説します。 この記事のポイント IE11以前のブラウザでSVGファイルを正しく表示する SVGファイルに横幅と高さを指定する IE11以前のブラウザでSVGファイルが極端に小さくなる AdobeのIllustratorから書き出したSVGファイルをIE11で表示すると、次のように正しく表示されないことがあります。 SVGファイルが正しく表示されない例 今回の場合、正しい表示は次のようになります。 正しい表示 表示確認すると、EdgeやChrome、Firefox、Safariなど他のブラウザは正常に表示されます。 しかしなぜかIE11以前のブラウザだけ…。 原因は、SVGファイルにwidth属性とheight属性が指定されていないことです。 コード例 まず、IE11で正常に表示されないSV
IEだけSVGが表示されない！
症状 imgタグにSVGを使うが、IEだけ表示されない。SafariやChromeなどは問題無し。 原因 IEの場合「width」「height」をSVGファイル内に記述しておかないとダメみたい。 イラレや書き出しソフトの設定によっては省略される場合があるので注意！ 対策 SVGファイルをテキストエディタで開いて「width」「height」を追記する。 <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″> ↓ <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”100″ height=”100″> SVGを書き出すときの設定をwidth、heightをありに変更しておくと^^ イラレの設定方法はこちら 追記 CSSでサイズを変更する
[SVG] viewBoxについての考察 - Qiita
まずベースとなるサンプルを用意しておきます 200*200のサイズで、背景をグレイにして真ん中にオレンジの円をおきます。芸術的です。 左上に青い円も添えます。 <svg width="200" height="200" viewBox="0 0 200 200" style="background: #ddd"> <circle cx="100" cy="100" r="50" fill="orange" /> <circle cx="0" cy="0" r="10" fill="blue" /> </svg> 基本的なこと まず外側の<svg width="200" height="200"の部分の200*200がビューポート（描画エリア）のサイズです。 viewBox="0 0 200 200"が考察したいviewBoxですが、これの意味するところは。 「vievBox="x y wi
![[SVG] viewBoxについての考察 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2a7c0bdf73d45f743e90095250d5645172e4ae1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCU1ZHJTVEJTIwdmlld0JveCVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiVFMyU4MSVBRSVFOCU4MCU4MyVFNSVBRiU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWVlMmQzYzllZGE4ODg4MGI3OGRjMDVkYzY0YjA2YjQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbW9jaGl6dWtpa290YXJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MDJlZDc5NzE4MWM3ZDQ0YmIxOTMyMzFiMGU2MzVkOA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dfcae3d0538222e85fbd505318f53303e)
IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ
IEのバグで背景画像に指定しているSVG画像（SBGアイコンなど）がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。 IEのバグで背景画像に指定しているSVG画像（SBGアイコンなど）がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。 svg画像内の<svg>タグ内に、以下のコードを追記。 preserveAspectRatio=”xMinYMid” 例： <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20.8 41.6" style="enable-background:n
IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
返せ、工数！コーダー泣かせの☓☓☓☓――IE11対応まとめ | yanagi's memo
IEにSVGが負けない呪文