現実世界のHTML5＆CSS3、第2版

キーテイクアウト

• HTML5およびCSS3は、古いブラウザとの逆方向の互換性を確保するように設計されています。つまり、マークアップの変更はレイアウトの問題やエラーを引き起こしません。古いブラウザが新機能を完全にサポートしていなくても、ページを壊したり、目に見える問題を引き起こしたりしません。
HTML5とCSS3は、多くのモバイルWebブラウザーによくサポートされており、急速に成長するモバイル市場に最適です。 HTML5やCSS3で導入されたいくつかの新しいテクノロジーは、オフラインのWebアプリやWebストレージなど、モバイルデバイスを念頭に置いて特別に設計されています。
• HTML5およびCSS3により、強力で将来の将来のWebページを作成できます。古いブラウザが使用されなくなると、開発者は単にフォールバックやポリフィルを削除し、最新のブラウザを対象としたコードベースを残す必要があります。

以下は、Alexis Goldstein、Louis Lazaris、およびEstelle Weylが執筆した本、Real World、第2版のhtml5＆css3の抽出物です。コピーは世界中の店舗で販売されているか、ここで電子書籍形式で購入できます。 HTML5はコンテンツのマークアップ方法に大幅な変更を示していますが、これらの変更が古いブラウザが窒息したり、レイアウトの問題やページエラーを引き起こすこともないことに注意する価値があります。 これが意味することは、有効なHTML4またはXHTMLマークアップを含む古いプロジェクトを取得できるということです。DoctypeをHTML5（第2章で説明します）に変更すると、ページはブラウザと同じように表示されます。前に。 HTML5の変更と追加は、古いバージョンのインターネットエクスプローラーでさえ、古いブラウザーとの逆向きの互換性を確保するような方法で言語に実装されています！もちろん、これは新機能が機能するという保証ではなく、単にページを壊さず、目に見える問題を引き起こさないことを意味します。 より複雑な新機能（APIなど）に関しても、開発者は、HTML5とCSS3が提供するエキサイティングな新しい可能性を採用しながら、サポートしないブラウザーに同等のエクスペリエンスを提供するさまざまなソリューションを考え出しました。 。これは、ネイティブビデオサポートなしでフラッシュビデオプレーヤーなどのブラウザにフラッシュビデオプレーヤーなどのフォールバックコンテンツを提供するのと同じくらい簡単な場合があります。ただし、スクリプトを使用して新しい機能のサポートを模倣する必要がありました。

これらの「ギャップを埋める」手法は、ポリフィルと呼ばれます。ネイティブ機能をエミュレートするためのスクリプトに依存することは、高性能のWebアプリを構築するときに常に最良のアプローチではありませんが、この本で議論するような新しい機能強化や機能を含めるために進化するため、必要な成長の痛みです。 。幸いなことに、執筆時点では、HTML5とCSS3の多くの新機能をサポートできないInternet Explorer 6〜9などの古いブラウザは、今日のWeb訪問者の10％未満で使用されています。ますます多くの人々が常緑のブラウザと呼ばれているものを使用しています。つまり、自動的に更新するブラウザです。これは、古いブラウザの共有が衰えているため、新機能はより多くの視聴者にとって、そして最終的にはすべての人にとって機能的であることを意味します。 この本では、ブラウザの互換性のギャップを接続するために、フォールバックオプションまたはポリフィルを勧めることがあります。また、これらのオプションを使用することに関連する潜在的な欠点や落とし穴を警告する際に最善を尽くします。 もちろん、フォールバックやポリフィルがまったく必要な場合があることは注目に値します。たとえば、CSS3を使用してデザインの箱に丸い角を作成する場合、代わりに正方形の箱を見る本当に古いブラウザのユーザーに害はありません。サイトの機能には劣化がなく、それらのユーザーは、欠けているものについて賢明ではありません。

レッスンを進めて新しい科目を紹介するとき、これらのいずれかをプロジェクトで使用する予定がある場合は、前述のようなブラウザーサポートリファレンスを参照することを強くお勧めします。フォールバックまたはポリフィルを提供する方法とかどうかを知っています。必要に応じて、サポートしないブラウザが許容できる経験を確保できるようにする方法を時々議論しますが、良いニュースは、時間が経つにつれてますます少なくなっていることです。

成長するモバイル市場

今日、HTML5とCSS3の学習と使用を開始するもう1つの説得力のある理由は、爆発的なモバイル市場です。ある情報源によると、2009年には、すべてのWeb使用量の1％未満がモバイルデバイスとタブレットにありました。 2014年半ばまでに、その数は35％以上に上昇しました！それは5年以上の驚くべき成長率です。それで、これはhtml5とcss3を学習している人にとって何を意味しますか？

HTML5、CSS3、および関連する最先端のテクノロジーは、多くのモバイルWebブラウザーで非常によくサポートされています。たとえば、iPhoneやiPad、Opera Mobile、Androidブラウザー、UCブラウザーなどのiOSデバイス上のモバイルSafariはすべて、強力なレベルのHTML5およびCSS3サポートを提供します。これらのブラウザの一部でサポートされる新機能とテクノロジーには、CSS3アニメーション、CSS Flexbox、Canvas API、Webストレージ、SVG、オフラインWebアプリなどがあります。

実際、この本で紹介する新しいテクノロジーのいくつかは、モバイルデバイスを念頭に置いて特別に設計されています。オフラインのWebアプリやWebストレージなどのテクノロジーは、モバイルデバイスを備えたWebページにアクセスする人の数が増えているため、一部は設計されています。このようなデバイスは、多くの場合、オンラインデータの使用に制限がある可能性があり、したがって、オフラインでWebアプリケーションにアクセスする機能から大きな恩恵を受けます。

第11章の科目や、本の過程で他の科目に触れ、さまざまなデバイスやプラットフォーム用のWebページを作成するために必要なツールを提供します。

実際のものに

新しいテクノロジーに進み、ブラウザのレベルのみのページとアプリを執筆することを期待するのは非現実的です。現実の世界、そしてHTML5とCSS3がさらに進出することを望んでいる世界では、さまざまな景観を越えて機能するページを開発する準備を整える必要があります。そのランドスケープには、最新のブラウザ、残りの古いバージョンのインターネットエクスプローラー、モバイルデバイスの爆発市場が含まれます。

はい、ある意味では、さまざまなユーザーエージェントに異なる一連の手順を提供することは、乱雑なブラウザのスニッフィングとコードフォーキングを備えたWebの初期の日に似ています。しかし、今回は、新しいコードがはるかに将来的には困難です。古いブラウザが一般的に使用されなくなったとき、あなたがする必要があるのは、フォールバックやポリフィルを削除し、最新のブラウザを対象としたコードベースのみを残すことだけです。

HTML5とCSS3は、はるかにエキサイティングなWebページオーサリングの世界を案内してきた主要なテクノロジーです。すべての最新のブラウザは、多数のHTML5およびCSS3機能に優れたレベルのサポートを提供しているため、強力で維持されないシンプルな将来のWebページを作成することはこれまで以上に簡単です。

それで、「なぜ」については、「方法」を掘り始めましょう！

HTML5およびCSS3

に関するよくある質問 ​​

HTML5とCSS3はどちらもWeb開発に不可欠なツールですが、さまざまな目的を果たしています。 HTML5は、Web上でコンテンツの構造化と提示に使用されるマークアップ言語です。最新のWebサイトでの典型的な使用を反映する新しい要素と属性を導入します。一方、CSS3は、HTMLで記述されたドキュメントの外観とフォーマットを説明するために使用されるスタイルシート言語です。丸い角、影、グラデーション、トランジション、アニメーションなどなどの新しい機能を紹介します。 HTML5およびCSS3。 Codecademy、Udemy、Khan AcademyなどのWebサイトでは、インタラクティブなコースを提供しています。また、オンラインドキュメントやチュートリアルを参照することもできます。練習はこれらの言語の習得の鍵ですので、独自の言語を作成したり、既存の言語を改善してください。

HTML5とCSS3を使用する利点は何ですか？

HTML5とCSS3にはいくつかの利点があります。よりクリーンで効率的なコーディング、パフォーマンスの向上、およびより良いアクセシビリティを可能にします。また、より高度な機能と、Webサイトの設計とカスタマイズに柔軟性を高めることもできます。さらに、それらはすべての最新のブラウザーによってサポートされています。

モバイルWeb開発にHTML5とCSS3を使用できますか？ビューポートのサイズとスケールを制御できるViewport Metaタグや、コンテンツレンダリングが画面解像度などの条件に適応できるようにするなどの機能を提供します。また、モバイルインターフェイスに不可欠なタッチイベントもサポートしています。

HTML5およびCSS3を操作する際の一般的な課題は何ですか？

いくつかのベストプラクティスには、より良いアクセシビリティとSEOのためにHTML5のセマンティック要素を使用することが含まれます。 、CSS3コードを乾燥させ（繰り返さないでください）、読みやすく維持できるようにコードを整理します。また、コードが有効でエラーがないことを常に確認してください。

他のプログラミング言語でHTML5およびCSS3を使用できますか？ JavaScript、PHP、Rubyのように。それらはコンテンツの構造とスタイルに使用されますが、他の言語はWebサイトの機能と動作を処理します。 CSS3のメディアクエリを使用して、ウェブサイトが応答します。これらを使用すると、デバイスの画面サイズに応じてさまざまなスタイルを適用できます。また、柔軟なレイアウトと柔軟な画像を使用して、コンテンツのスケーリングと正確なサイズを確保することもできます。マルチメディア、描画用のキャンバス要素、およびデートピッカー、カラーピッカー、スライダーなどのコントロールを形成します。 CSS3は、トランジションやアニメーション、グラデーション、2D/3D変換などの機能を紹介します。

以上が現実世界のHTML5＆CSS3、第2版の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。