Modernizr_html5 チュートリアルスキルに基づくエレガントな Web サイトの劣化の分析-H5 チュートリアル-php.cn

Modernizr_html5 チュートリアルスキルに基づくエレガントな Web サイトの劣化の分析

WBOY

リリース： 2016-05-16 15:49:38

オリジナル

1266 人が閲覧しました

現在、Web ページに表示されるコンテンツはますます豊富になり、HTML5 や CSS3 の機能効果も含まれています。したがって、クライアントのブラウザが HTML5 をサポートしている場合。ページアクセスは問題なく非常にうまく機能します。 HTML5 がサポートされていない場合、または IE6、7、8 などのブラウザの場合はどうなりますか?この時間は、フロントエンドスタッフにとって、互換性という点で非常に頭の痛い問題となることがよくあります。

現時点では互換性があります。これは、ユーザーがすべてのブラウザーで可能な限り一貫してそれを表示および使用できるようにすることに他なりません。ただし、このページでは HTML5 タグと CSS3 スタイルが使用されています。クライアントのブラウザが HTML5 をサポートしていない場合はどうすればよいですか? この問題については、できる限りのサポートしかできません。サポートできない場合は、フレンドリーなヒントや提案を提供してください。ユーザーがブラウザの新しいバージョンにアップグレードできるようにします。したがって、コーディングプロセス中に、いくつかの機能テストを実行する必要があるとします。 CSS3を使うとHTML5はとても便利です。

<スタイル>
記事
{
背景:ライトブルー;
マージン: 20px;
padding: 5px;
幅: 350px;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
article h1 { font-size: 12px; }
スタイル >
<記事>
<ヘッダー><h1>タイトルh1>ヘッダー>
<p >ここはコンテンツですp>
記事>

効果は期待通りです

クライアントのブラウザが HTML5 をサポートしていない場合はどうすればよいですか? IE の F12 ツールを使用してテストしてみましょう

注: ブラウザモードとドキュメントモードの両方を選択する必要があります

HTML5 をサポートしていないブラウザでは、ページ効果は非常に残酷です

私たちはこの問題を解決しなければなりません。したがって、HTMl5 をサポートしていないブラウザに対してはさらなる作業が必要です。このような角丸効果の互換性を解決するにはどうすればよいでしょうか? HTMl5をサポートしていないブラウザでの判断となります。 HTML5 の角丸がサポートされていない場合は、サードパーティの角丸 JS を使用してサポートされます。問題は再び起こりますか？このような角丸関数はどうやって判定するのでしょうか？この時、彼はまた躊躇した。 HTML5 用のより効率的で包括的かつ簡潔な関数判定 js はありますか?

http://modernizr.com/ Modernizr は、HTML5 機能検出プラグインです。

上部の丸い角の効果はそのままですが、わずかに変更されています

注: pie.js はサードパーティの角丸プラグインです

効果を見てみましょう: HTML5 をサポートするブラウザ

次に、HTML5 をサポートしていないブラウザである IE7 をテストします

したがって、HTMl5 ページの関数検出を行うために Modernizr を使用すると非常に便利です。しかし、まだ問題がありますか? リッチなキャンバス特殊効果を作成する場合、どのように互換性を持たせるか?このとき、冒頭の文に戻り、機能はダウングレードし、サポートできる範囲でサポートし、サポートできない場合は親切にヒントを提供します。私たちは、開発者がそのような苦痛を被らないように、国内ユーザーがすぐに HTML5 をサポートするブラウザにアップグレードすることを願っています。