古いIEのブラウザにネガティブな消極的な対応することで問題を解決する

Tweet

238

WEB政策の宿敵 古いバージョンの Internet Explorer 略称：IE
この古いIE 主にIE8以下はWEB制作する上でとても邪魔な存在なんですね

動作にバグがあったり、そもそもCSS2、CSS3に対応していないので デザインが崩れまくりなときがあります
一掃のこと、崩れてしまうところは 消しちゃおうという発想

WEBサイト上 そんなに重要じゃないけどユーザービリティを高める為に追加した機能が
オールドブラウザで動かないことはとても多いんですよ

ユーザービリティを高めるようなものってのはCSS3を使うことが多いのでそんな事態になります

IE8以下では非表示にしてしまう 方法

IE用にHTMLで条件分岐させてHTMLに書かれたものを表示するかしないかすることが出来ます

それを使って、IE8以下に特別なstyleを用意して、display:none;で表示させないようにしてしまう

HTML

<!--
  
DEMO 表示
  
  
  
>
<style>
.test {display:; none}
</style>
<![endif]-->

このようにコメントで条件分岐出来ます

これは もし IE9未満なら 中身を実行する という内容です

つまりIE8以下に対して実行するということですね
今回はCSSですが、古いIEでHTML5に対応させるためのプラグインを読み込ませるためにも使ったりします

他の条件分岐

IEだった場合に実行する

<!--
  
DEMO 表示
  
  
  
>

<![endif]-->

IEでなかった場合に実行する(ちょっと特殊)

<!--
  
DEMO 表示
  
  
  
><!-->

<!--<![endif]-->

特定のIEの場合に実行する

<!--
  
DEMO 表示
  
  
  
>
IE9でのみ実行する内容
<![endif]-->

IEで●●未満だった時に実行する(上で使ったもの)

<!--
  
DEMO 表示
  
  
  
>

<![endif]-->

IEで●●以上の場合に実行する

<!--
  
DEMO 表示
  
  
  
>

<![endif]-->

ポジティブな対応もこの条件分岐をうまく使えば出来ます

Tweet

短縮URL:

2014年04月04日 WEB制作系 HTML