タグ: InternetExplorer

SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ

IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。

これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。

サンプルソース※IEで表示すると症状が再現します

.pattern {
	width: 100vw;
	height: 10vw;
	background: url('dot.svg');
	background-size: 5vw;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>

Internet Explorer 11の開発者ツールでウィンドウサイズ指定

InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。

意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。

調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。

前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。

“Internet Explorer 11の開発者ツールでウィンドウサイズ指定” の続きを読む

Internet Explorer では HTML5の main タグが使えない

極論から。
InternetExplorerではHTML5の<main>タグは使えません。

検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…

main {
	display: block;
}

そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン！

“Internet Explorer では HTML5の main タグが使えない” の続きを読む

IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考：
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0

InternetExplorerでinputにつく×は::-ms-clearでスタイル適用

InternetExplorer10以上で、１行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。

ie-input-text-clear-button

これを押すと、入力されている内容をクリアできるのですが
お客さんから、違和感があるから消してほしいと要望があったり
テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと
初期設定のままでは何かと使いにくい場面の多い機能です。

このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。

“InternetExplorerでinputにつく×は::-ms-clearでスタイル適用” の続きを読む

Internet Explorer 8では使えないCSS

Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが
プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾
そして
対応してなかったのをうっかり忘れがちな便利要素
を中心にピックアップしてみました。

便利な装飾プロパティ

  • 角丸のborder-radiusが使えない
  • 色と不透明度を同時に指定できるrgbaが使えない
  • 影をつけるbox-shadowとtext-shadowが使えない

レスポンシブデザイン対応

  • media max-width min-width が使えない

疑似クラス

  • :last-child が使えない
  • :nth-child() が使えない

擬似要素

  • 擬似要素を::after(または::before)の書式で書けない
  • 擬似要素にz-indexがきかない
  • 擬似要素にfilterがきかない

“Internet Explorer 8では使えないCSS” の続きを読む

Internet Explorer 11の開発者ツールで旧バージョン表示を確認する場所

Windows7のInternetExplorer11正式版がリリースされたので
ReleasePreview版のときに変更できなくなっていたドキュメントモード機能を確認してみました。

F12で開発者ツールを起動して確認してみると、無事に復活していました！
これで、従来版の表示を手軽に見られる。

InternetExplorer11正式版の開発者ツール

“Internet Explorer 11の開発者ツールで旧バージョン表示を確認する場所” の続きを読む

initialとautoでmin-width,max-width(height)をリセット

スタイルシートの、最大の幅や高さ、最小の幅や高さを指定する
max-width、max-height、min-width、min-height をリセットするときは
initialとautoを併用します。

アスペクト比（縦横比）を維持したまま200×200の枠内に収まるよう画像を縮小する設定と
それをリセットするスタイルのサンプルです。

.thumbnail img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
}
.free .thumbnail img {
	max-width: initial;
	max-width: auto;
	max-height: initial;
	max-height: auto;
}

initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです。
併記しているautoはinitialに対応していないInternetExplorerのための設定です。
（IE10でもinitial表記が効かなかった…IE遅れてる…）

そもそも、いったん設定したものをリセットしなきゃいけない構造にするなってはなしですが、
継ぎ足しながら運用されてきた1000行ちかいCSSを突貫で直さなければいけないときや、他のベンダーと同時進行でCSS構築しなければならないスケジュールのときなど
やむを得ないケースもでてくるので、こいつはmax、min系以外でも活躍しそう。

参考：
テキストをスタイルシート適用前の状態に戻す方法

IE8以上対応のページ作成で互換モードを予防する

2013年4月に、WindowsXPのサポート終了期限について公式アナウンスがでたこともあって
WEB屋さんの案件でも、IE8以上対応の案件も少しずつ増えてきました。
作る側の本音をいうと9以上のほうが個別対応が減ってコスト削減できるのですが
お客様としては、サポートが終わってもWindowsXPユーザが減るかどうかわからないので考慮したい背景があっての8だとか。

そんなわけで、喜んでIE7未対応で8から対応しているCSSを使用したページを作ったのですが
確認したパソコンのIE8が互換モードになっていて、意図した表示にならないケースが発生。
たしかに、コーディングの知識がない一般のInternetExplorerユーザは
アドレスバーの横にある紙が破けているアイコンが何なのかわからないわ。間違えて押す可能性もあるわ。

そこで、無用なトラブルを予防する工夫として
IEのレンダリングモードを標準準拠（つまりIE8なら8標準モード）にデフォルト設定するmetaタグを使ってみました。
これで、IE8のアドレスバーの横にある互換モードボタンも非表示になるので
互換モードで表示崩れになるトラブルも、いくらか予防できます。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

headの直後に入れるのがベストらしいです。

参考サイト：
IE8のレンダリングモードに関するまとめ