ホームページ > 記事 > ウェブフロントエンド > Modernizr_html5 チュートリアル スキルに基づくエレガントな Web サイトの劣化の分析
Modernizr_html5 チュートリアル スキルに基づくエレガントな Web サイトの劣化の分析
- WBOYオリジナル
- 2016-05-16 15:49:381192ブラウズ
現在、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 はサードパーティの角丸プラグインです
<スタイル>
記事
{
背景: ライトブルー;
マージン: 20px;
padding: 5px;
width: 350px ;
border-radius: 10px;
ボックス-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
article h1 { font-size: 12px; }
スタイル>
<記事>
<ヘッダー>h1>我的标题h1>ヘッダー>
<p>私の内容p>
記事>
<スクリプト>
Modernizr.load([{
load: 'Scripts/jquery-1.6.1.min.js'、
complete: 関数 () {
if (! window.jQuery) {
Modernizr.load('Scripts/jquery-1.6.1.min.js');
}
}
},
{
test: Modernizr.borderradius || Modernizr.boxshadow,
いいえ: 'Scripts/PIE.js',
コールバック: 関数 () {
$('記事').each(関数 () {
PIE.attach(this);
🎜>
<
スクリプト>
