私は Web デザインを始めたばかりで、自分の Web サイトにいくつか問題があります。まず、クロスブラウザー対応の Web サイトではありません。そのようにしたいのですが、これを行う方法がわかりません。これに関するいくつかの記事を読みましたが、何の助けにもなりませんでした。クロスブラウザのウェブサイトをデザインする方法を教えてください。
次に、Web サイトの CSS ファイルを検証したところ、次のエラーが表示されました。
218 .box Property border-radius does not exist in CSS level 2.1 but exists in : 6px 6px 219 .box Property -moz-border-radius does not exist : 6px 6px 220 .box Property -webkit-border-radius doesn'存在する : 6px 6px.
しかし、これを解決する方法もわかりません。
border-radiusは CSS3 プロパティであるため、CSS2 として検証している場合、エラーが報告されます。
-moz-border-radiusおよび-webkit-border-radius同じプロパティの「ベンダー接頭辞付き」バージョンです。ベンダー プレフィックスは、ブラウザ メーカーが実装しているが、まだ標準化されていないか、実装がまだ完了していない機能に付けられます。いずれにせよ、正式に準備が整う前に、サイト デザイナーが機能を使用できるようになります。
クロスブラウザー サイトを設計している場合は、どのブラウザーを含めるかを検討する必要があります。たとえば、非常に古いバージョンのブラウザー (おそらくもう誰も使用していない) で動作するようにするのに時間がかかりますか? サポートする古いバージョンを決定する必要があります。
これはborder-radius、現在のバージョンの Firefox、Chrome、および Safari がすべてborder-radiusベンダー プレフィックスなしでサポートされているためです。実際、いくつかのバージョン、特に Webkit ブラウザーでは、ベンダー プレフィックスは必要ありません。したがって、これらのプレフィックス付きの宣言を削除することは完全に正当化される場合があります。どのブラウザーのどのバージョンがそれらを必要としているかを確認し、それらのブラウザーをサポートするかどうかを決定する必要があります。
考慮すべきもう 1 つの要因は、ごく最近まで IE がborder-radiusベンダー プレフィックスを含めてもまったくサポートしていなかったことです。IE9 はそれをサポートしていますが、ほとんどの IE ユーザーはまだ IE8 を実行しています。
IE で働きたい場合border-radiusは、いくつかのハックを行う必要があります。現時点でこれに最適なオプションはCSS3Pieです。もう 1 つのオプションは、それを無視して IE ユーザーに四角い角を残すことです。これはサイトのユーザビリティには影響しないため、これが最も簡単なオプションであると判断できます。
すべてのブラウザーとブラウザーのバージョンには、サポートする機能の独自の組み合わせがあります。CanIUse.comのようなサイトは、特定の機能を使用するかどうかを判断するのに非常に役立ちます。どのブラウザーとバージョンがその機能をサポートしているかを示しており、使用するかどうかについて十分な情報に基づいた決定を下すことができます。
最後に、サイトのクロスブラウザーを作成するための最も重要なアドバイスは、すべてのブラウザー、およびサポートしたいすべてのブラウザーバージョンでテストすることです。(あるバージョンのブラウザーで動作する場合、他のバージョンでも動作すると仮定しないでください。すべてをテストする必要があります)。
ウェブサイトのウェブサイトのクロスブラウザを修正するには、これを念頭に置いて開始し、開発を段階的に進めて、各ブラウザに違いがないかどうかを確認し、クロスブラウザの解決策を見つけてください。完成したウェブサイトでもそれを達成することができますが、もちろんそれははるかに困難です。特定の質問がある場合は、stackoverflow.comを使用して、プログラミングの問題を解決できます。
発生するエラーについては、css3ファイルをcss2.1標準で検証しようとしているためです。http://jigsaw.w3.org/css-validator/#validate_by_uri+with_optionsにアクセスし、プロファイルレベル3でcssを選択して、css3を検証します。
調べるのに良いことは、jquery の丸みを帯びた角です。それはかなり単純で、css3 border-radius が行うほとんどすべてのことを行います。欠点は境界線を作成することです。1px の境界線が必要な場合は、ターゲット div を別の div でラップし、外側を 1 px のパディングに設定する必要があります。
サイトは次のとおりです: http://plugins.jquery.com/project/corners zip パッケージをダウンロードして、デモを表示します。
これは、すべてのブラウザーと IE6+ で機能します。また、そのブラウザーに適切な css プロパティが存在する場合は、それらを適応させます。