逆方向に互換性のあるHTML5を書き込む方法は？
https://stackoverflow.com/questions/2674655
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
HTML5の基本機能の使用を開始したいと思いますが、同時に、コードを古いブラウザーと互換性のあるコード（Graceful degradation）と互換性があるようにします。たとえば、丸い角を作るためにクールなCSS3プロパティを使用したいと思います。優雅に分解可能なHTML5を書くための利用可能なチュートリアルはありますか？
さらに、アプリをサポートするブラウザー。訪問者の少なくとも95％が機能しますか？これらのブラウザを痛みなくテストする方法は何ですか？
解決
HTML5またはCSS3について話すときは、次のことを確認する必要があります。
ご覧のとおり、私たちはまだそれを使用することから遠く離れています。
また、ブラウザの古いバージョンはHTML5またはCSS3をサポートしていないため、次のことを行うことができます。
ここにいくつかのリソースもあります：
- HTML5サイトのギャラリー （あなたは彼らから学び、アイデアを得ることができます）
- HTML5とCSS3を使用して最新のWebサイトを作成します
他のヒント
ブラウザは、世界の95％を集合的にカバーしています。Firefox、Chrome、IE6/7/8。それらをテストする最良の方法は、それらをコンピューターにインストールすることです。
モバイルブラウザーと互換性のあるHTMLタグとCSSを使用する必要があります。
CSS3は何でも条件付きJavaScriptでラップします。私は常にデバイスの幅が少なくとも240pxであることを確認しますが、それ以下のものは古い、くだらない、モバイルの外観です。
CSS用の小さなモバイルボイラープレートを使用して、使用する基本タグをリセットできます（異なるブラウザーで同じように見せます）。他のボイラープレートと同様に、CSSを見て、それがやり過ぎるかどうかを確認する必要があります。
包括的なガイドについては、W3モバイルCSS2ガイドラインをご覧ください。 http://www.w3.org/tr/2000/wd-css-mobile-20001013
もう1つの優れたリソースは、この互換性テーブルです。 http://www.quirksmode.org/m/css.html
優雅な劣化とは、妥協することです。下位バージョンですべてを実行できれば、おそらくそうするでしょう。あなたが引用する丸い角の例を選ぶために、あなた（またはあなたのクライアント）がそれらなしで生きることは許容されるかもしれません。 http://www.ipswich-angle.com/ たとえば、私はそれを処理します）。画像を含む他のオプションがありますが、それはあなたとあなたのクライアントが喜んで作る妥協点に大きく依存しています。
のようなサービス browshots.org サイトがさまざまなブラウザやオペレーティングシステムでどのようにレンダリングするかを確認するのに非常に便利です。しばらくの間、キューで待つ必要がありますが、それをする価値があります。
私はこれをコメントにするつもりでしたが、それから私は夢中になりました。
w3schools サイトでセマンティックWeb要素を使用するための提案があります。 JavaScriptライブラリを使用することをお勧めします html5shiv.js IE8以下にスタイリングサポートを追加して、HTML5に組み込まれている特定の機能をエミュレートするJavaScriptファイルを見つけることができます json2.js と webforms2.js.
ついに この記事 新しい属性/機能の多くを使用してHTML5フォームをエミュレートする完全な例を示します。
サイトの構築に関しては、最初にセマンティック要素を自由に（HTML5SHIVで）自由に使用してHTML4サイトを構築し、IE7でテストすることをお勧めします。次に、新機能を必要とするサイトの一部を構築するときに、同じ機能を古いブラウザに提供するJavaScriptファイルを調査する例：最初の丸いコーナーまたはグラデーションを追加する時が来たときかもしれません。 css3pie. 。あなたのボックスモデルを常に覚えておいてください。 Border-RadiusとGradientsはWebKitおよびMozillaのAPIでサポートされています。
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
残念ながら、WebKit/Mozilla APIがHTML5機能とどのように比較されるかについての良いリソースはありません。
私が見つけるのに苦労している唯一の機能は、古いブラウザーのCSS3セレクターのサポートです。多くの場合、これで逃げることができます。ブラウザiMhoをアップグレードしない場合は、二重厚さの境界線や代替の欠落で生きることができます。テーブルの行のスタイリング。
たぶん、いつかあなたのコードをアップロードできるサイトがあります。 -webkit-border-radius サポートを追加するには、「しかし、それまでは、事実が複雑なサイトではほぼ不可能になる後に後方互換性を追加します。
