ホームページ > 記事 > ウェブフロントエンド > HTML5 および CSS3 とのブラウザ互換性の問題

HTML5 および CSS3 とのブラウザ互換性の問題

php中世界最好的语言オリジナル: 2017-12-02 13:45:232272ブラウズ

HTML5 と CSS3 は非常に使いやすく、強力な新しい属性です。唯一の大きな欠点は、多くの古いブラウザーが互換性がない可能性があることです。今日は、古いブラウザーと HTML5 と CSS3 の互換性の問題について説明します。

1. 古いブラウザに HTML5 をサポートさせましょう
HTML5 は私たちにとって多くのことを可能にします。最も便利なのはセマンティックタグの適用です。Chrome または HTML5 をサポートする他のブラウザで使用したことがある場合は、これは素晴らしいことです。 IE でも HTML5 を使用できるようになったので、この記事はきっと役立つはずです。

最初の方法: Google の html5shiv パッケージを使用します (推奨)

まず、Google から次の html5.js ファイルを引用する必要があります。メリットについては説明しません:

JavaScript コードを次の場所にコピーします。クリップボード

1.f4f271a6b5b020c407925bcf0f27c445 2.1822010e1f4416d044163a7cdfd88d1a/ script> 3.bd121e40e132cd2f69209d509c354edd
上記のコードを head 部分にコピーします。要素が解析される前に IE はこの要素を認識する必要があるため、この js ファイルは他の場所で呼び出すことはできません。そうでない場合は無効になります)

主なことは、これらの html5 タグを p のようなブロックにすることです。さて、シンプルに、一文でまとめましょう: html5.js を引用して html5 タグをブロックにします

2 番目の方法: JavaScript のコーディング

JavaScript コードの内容をクリップボードにコピーします

1.<!--[if lt IE9]>   
2.<script>   
3.   (function() {  
4.     if (!   
5.     /*@cc_on!@*/ 
6.     0) return;  
7.     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(&#39;, &#39;);  
8.     var i= e.length;  
9.     while (i--){  
10.         document.createElement(e[i])  
11.     }   
12.})()   
13.</script>  
14.<![endif]-->

ただし、上記のどれであっても構いませんHTML5 はデフォルトで

インライン要素

として動作するため、これらの要素をレイアウトするには、CSS を使用して手動でブロック要素に変換し、簡単にレイアウトする必要があります

XML/ HTML コードコンテンツをクリップボードにコピーします

1./*html5*/

2.article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

ただし、ie6/7/ の場合8 は無効になっていますスクリプトのユーザーにとっては、スタイルのない「ホワイトボード」Web ページになります。これを解決するにはどうすればよいでしょうか。Facebook のアプローチを参照して、ユーザーを「/?_fb_noscript=1」ページに誘導します。 noscript ロゴ。 html5 タグを html4 タグに置き換えることは、互換性を維持するために多くのハックを記述するよりも簡単です。

XML/HTML コードはコンテンツをクリップボードにコピーします

1.<!--[if lte IE 8]>   2.<noscript> 3.     <style>.html5-wrappers{display:none!important;}</style> 4.     <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.  5.     </p> 6.</noscript> 7.<![endif]-->

これにより、ユーザーはスクリプトを開くか、HTML4 タグ設計インターフェイスに直接ジャンプすることができます。

2. 古いブラウザを CSS3 と互換性を持たせる（不完全な互換性解決策）

Internet Explorer 8 の時点では、IE シリーズは CSS3 をサポートしていません。 IE でよく使用される効果 (角丸や影など) を実行するには、冗長で意味のない要素や画像を使用してこれらの効果を作成する必要があります。これらにうんざりした後、私はこれらの問題を解決するために、より簡潔で直接的で効果的な CSS3 スタイルの方法を使用することを考えました。幸いなことに、多くの批判を受けてきた Internet Explorer でさえ、それ自体で十分強力です。 IE の独自のテクノロジーにより、一部の CSS3 効果を非常にうまく実現できます。

不透明度の透明度

要素の透明度は、IE のフィルターを使用して簡単に実現できます。

CSS コードはコンテンツをクリップボードにコピーします

1.background-color:green;  2.opacity: .4;  3.filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

これが半透明の領域です

不透明度: .4;

filter:alpha(opacity=40);

border-radius/Box Shadow/Text Shadow Shadow

あなたVector Markup Language (VML) と JavaScript を使用して、IE でこれらの効果を実現できます。IE-CSS3 を参照してください。HTC ファイルを参照した後、これらの 3 つの CSS3 プロパティを

IE ブラウザ

で使用できます。

CSS コードはコンテンツをクリップボードにコピーします

1.-moz-border-radius: 15px; /* Firefox */ 
2.-webkit-border-radius: 15px; /* Safari 、Chrome */ 
3.border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/ 
4.-moz-box-shadow: 5px 5px 5px #000; /* Firefox */ 
5.-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */ 
6.box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */ 
7.behavior: url(ie-css3.htc); /*引用ie-css3.htc */

実際、IE にはシャドウとドロップシャドウ効果を実現するための独自のフィルターがあります

shadow は連続したグラデーションのシャドウを生成します

CSS コードはコンテンツをクリップボードにコピーします

1.filter: progid:DXImageTransform.Microsoft.Shadow(color=&#39;#000000&#39;, Direction=145, Strength=10);

CSS コードはコンテンツをクリップボードにコピーします

1.filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5" ,Positive="1");フィルターは既存の htc スクリプトと競合するようですが、機能と呼ぶこともできます。両方が要素で同時に有効になっている場合、フィルター効果はその子要素に転送されます

これらの事例を読んで、その方法をマスターしてください。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。