[Blogger #021] IE対応…を、真面目にやらずに済ます方法

先日、ふじやんさんから、ご指摘頂きました。なんと、Internet Explorer でみると、真っ白でした。こんな感じ。

こいつは、CSSのカスタムプロパティにIE側が対応できてないからです。色関係の設定を調整するのに、カスタムプロパティをつかったので、こうなりました。WebサイトのIE対応は、世間でもWebデザイナーなかせのようですね。

ぶっちゃけ、ちょっとググっただけでも、様々な問題点があるようで、全く対応する気になれないです。ということで、IE でアクセスされたときに、モダンブラウザでアクセスするよう促すような対応をしました。こんな感じで、未対応アピールを5秒ほどするようにしました。

その後、さらに、ふじやんさんより、IE11の時だけ Polyfill を発動させる方法を教わりましたので、対応。案の定、まだまだ、形が崩れたりしてるのですが、色はつきました。どうも、イメージ引っ張ってくるところ、サイズ指定方法によって、表示のされ方が違う模様です。やっぱり全部対応してられないので、アラート表示はそのままいきます。

とはいうものの、赤が、ちょっとどぎついよねってご指摘も頂きましたので、OUTLOOK色に変えて、最終形は、こんな感じになりました。

実施内容

さて、まずは、IE11用のPolyfill 対応に、この1行。

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

これをHead 内に組み込みます。エスケープしてないので、//<![CDATA[　~　 //]]>でくくっとかないといけませんが、エスケープをちゃんとしたバージョンをふじやんさんが呟いてくれてましたので、そちらをつかわせてもらいました。これです。

<script>window.MSInputMethodContext &amp;&amp; document.documentMode &amp;&amp; document.write(&#39;&lt;script src=&quot;https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js&quot;&gt;&lt;\/script&gt;&#39;);</script>

アラート表示追加は、以下のＨＴＭＬを body の最後に追加。

  <script type='text/javascript'>
 //<![CDATA[
 function isIE(){
 	var userAgent = window.navigator.userAgent.toLowerCase();
   if ( userAgent.indexOf( 'msie' ) !== -1 || userAgent.indexOf( 'trident' ) !== -1 ) {
       return true;
   }
 	return false;
 }
 document.addEventListener("DOMContentLoaded", function () {
	if ( isIE() ) {
     var footer = document.getElementById('footer');  //アラート表示を挿入する場所
     var ieDiv = document.createElement('div');      //div要素の生成
     ieDiv.classList.add('ie_alert');                //クラス名付与
	
     var ieAlert = '<span>Internet Explorer、未対応!</span>';
     ieAlert += '<p><br>さーせん、<b>Internet Explorer</b> つかってますよね。<br>';
     ieAlert += '対応すんの、スゲー大変なんで、<br>最新のモダンブラウザ（EdgeやFirefox、Google Chrome）使って、<br>';
     ieAlert += '見てもらっていいっすか？<br></p>';
     ieAlert += '<a href="https://www.google.co.jp/chrome/index.html">Google Chromeをダウンロード</a>';
     ieDiv.innerHTML = ieAlert;
     footer.appendChild( ieDiv );    //HTMLの追加
	}
 });
//]]>
</script>

CSSは、こんな感じ。IE だし、Outlook ブルーにしました。

/****************************************
          ie 警告用
 *****************************************/
 .ie_alert{
   position: fixed;
   top: 5%;
   left: 5%;
   width: 90%;
   height: 90%;
   background: rgb(0, 120, 212); /* rgba未対応の古いIE用 */
   background: rgba(0, 120, 212, 0.9);
   text-align: center;
   padding: 10% 0;
   color: #fff;
   z-index: 1000;
   -webkit-animation: byeShutter 5.0s forwards;
         animation: byeShutter 5.0s forwards;
 }
 .ie_alert span{
   display: block;
   font-size: 40px;
 }
 .ie_alert p{
   font-size: 15px;
 }
 .ie_alert >a{
   display: inline-block;
   font-size: 16px;
   margin-top: 20px;
   padding: 8px 80px;
   border: solid 1px #fff;
 }
 .ie_alert >a:hover{
   background: rgba(255,255,255,0.1);
 }
 @keyframes byeShutter {
 	70% {
   	  opacity: 1;
 	}
 	100% {
   	  opacity: 0;
   	  display: none;
   	  z-index: -1;
 	}
 }

そして、今日も、記事は一つも増えず、箱だけが整備されていきました。。。

 ​