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

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

Feb 19, 2025 am 10:27 AM

現実世界の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&CSS3、第2版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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

静的フォームプロバイダーの比較 静的フォームプロバイダーの比較 Apr 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター 毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター Apr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

独自の非JavaScriptベースの分析をホストするためのオプション 独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

See all articles