すべての Web ブラウザ (Google Chrome を含む) 間で一貫した形式、機能を実現するための最良のテクニックは何ですか?

https://stackoverflow.com/questions/45239

09-06-2019
|

質問

短縮版：Web 開発者と Web 開発者のエンドユーザーの両方が使用するすべてのブラウザーで一貫したプレゼンテーションと AJAX 機能を実現するための、最もクリーンでメンテナンス可能な手法は何ですか?

IE6、7、8
Firefox 2、3
サファリ
グーグルクローム
オペラ

ロングバージョン:私は、他の Web 開発者を対象とした Web アプリ. 。私のアプリでは、プレゼンテーションと AJAX 動作の両方で主要な Web ブラウザー (および Google Chrome) をサポートしたいと考えています。

私は Firefox/Firebug から始めて、IE 6 と 7 で一貫したスタイルを保つために条件付きコメントを追加しました。次に、驚いたことに、IE では jQuery が同じように動作しないことがわかりました。だから私は FF と IE で移植できるように Javascript を変更しました条件分岐とあまり純粋ではない jQuery を使用します。

今日、Webkit と Google Chrome でテストを開始したところ、スタイルが FF と IE の両方で一貫していないだけでなく、おそらく構文エラーまたは解析エラーが原因で Javascript がまったく実行されていないことがわかりました。CSS の作業も期待していましたが、Javascript のデバッグをさらに行う必要があります。この時点で、あらゆる状況に対する特別なケースを山ほど書く前に、一歩下がって考えてみたいと思います。

私は 特効薬を探しているのではなく、ベストプラクティスを探しているだけです 物事をできるだけ理解しやすく、保守しやすい状態に保つためです。私は、これがサーバー側のインテリジェンスなしで動作することを好みます。ただし、たとえば、ユーザーエージェントをチェックして、異なるファイルを異なるブラウザに返すという利点がある場合は、Web アプリの全体的な理解性と保守性が低くても問題はありません。皆さん、本当にありがとうございました！

解決

私も同様の状況にあり、IT プロフェッショナルを対象とした Web アプリに取り組んでおり、Opera を除いた同じブラウザーのセットをサポートする必要があります。

これまでに学んだ一般的なことは次のとおりです。

できるだけ多くの対象ブラウザで、頻繁にテストしてください。開発スケジュールにこのための時間を必ず確保してください。
ツールキットを使用すると、クロスブラウザーのサポートの一部を実現できますが、最終的には一部のブラウザーでは何かが失われることになります。特定のブラウザのデバッグと修正の調査に時間を計画してください。
ツールキットにないものが必要で、無料のコードスニペットが見つからない場合は、時間をかけてブラウザ依存の動作をカプセル化するユーティリティ関数を作成してください。
ブラウザの既知のバグについて学び、それらを回避して実装を進めることができます。

私が学んだより具体的なことは次のとおりです。

「同じ」ブラウザの世代が異なると機能が異なる可能性があるため、ユーザーエージェントに基づく条件付きコードは最後の手段としてのみ使用してください。代わりに、最初に標準に準拠した動作をテストします。例: if(node.addEventListener)..., 、次に一般的な非標準関数 — 例: if(window.attachEvent)..., 次に、必要に応じて、特定のブラウザの種類とバージョン番号のユーザーエージェントを調べます。
DOM がスクリプトアクセスの「準備ができた」時期を知ることは、ほぼすべてのブラウザーで異なります。優れたツールキットはこれを抽象化します。
イベントハンドラーは、ほぼすべてのブラウザーで異なります。優れたツールキットはこれを抽象化します。
DOM 要素、特にフォームコントロールや属性を持つ要素の作成は、document.createElement と element.setAttribute を使用すると難しい場合があります。標準ではありませんが (そしてちょっと面倒ですが)、HTML の一部を含む文字列で node.innerHTML を使用することは、ブラウザの種類を問わずより信頼性が高いようです。element.setAttribute を使用して IE のフォーム要素に「名前」を追加できるツールキットをまだ見つけていません。
CSS の違い (およびバグ) は、JS の違いと同じくらい重要です。
Javascript の「コア」機能 (String、Date、RegExp、Array 関数) は、特に DOM/CSS/Window 関数に関して、ブラウザ間でかなり信頼性が高く、一貫性があるようです。プラットフォームごとに言語が完全に異なるわけではないという事実には、小さな喜びもあります。:-)

実際に Chrome 固有の JS バグに遭遇したことはありませんが、常に最初にテストするブラウザの 1 つです。

HTH

他のヒント

Chrome は実際には Safari とは少し異なり、まったく異なる JavaScript 実装を使用しており、プロトタイプと jquery の両方で問題が報告されています。現時点ではあまり心配する必要はありません。ブラウザはまだ初期のベータ版であり、そのような不一致はおそらくバグとして扱われるでしょう。こちらがバグレポート.

あなたが頼ることを検討できる「特効薬」の 1 つは、 Google ウェブツールキット (GWT).

これは、興味のあるすべてのブラウザをサポートしており、Eclipse などの Java 互換 IDE で UI をコーディングできると思います。この利点は、コード補完とコンパイル時のエラーチェックに IDE ツールを使用できることで、大規模な UI プロジェクトの開発が大幅に向上します。

GWT UI コンポーネントを使用すると、ブラウザ固有の多くの厄介な問題を処理する必要がなくなりますが、コンパイルすると、ブラウザプラットフォームごとにコンパクトなデプロイファイルが作成されます。こうすることで、Firefox でアプリを表示している場合に IE 固有のコードをダウンロードする必要がなくなります。また、適切にコンパイルされた JS バンドルをロードするクライアント側のスタブも生成されます。さらに有利なのは、これらのファイルはキャッシュ可能であるため、通常、再訪問者にとって知覚されるパフォーマンスが向上します。

ランドスケープは、クロスブラウザー開発に対応するために大幅に進化しました。 jQuery, プロトタイプ クロスブラウザ Javascript 用の他のフレームワークも存在します。 CSS のリセット すべてのブラウザで共通の空のキャンバスから始めるのに適しています。 ブループリント そして 960 どちらも、レイアウトを支援するための CSS フレームワークです。 CSS グリッドレイアウト 最近非常に人気が高まっているテクニック。

さまざまなブラウザー間での他の CSS の癖については、ここに聖杯はなく、唯一の選択肢は、さまざまなブラウザー間で Web サイトをテストし、これを使用することです。素晴らしいリソース時間を節約するために必ずメーリングリストに参加してください。

大規模な実稼働サイトで作業している場合は、最終的にbrowsercam.comのようなサービスを使用して、一部のブラウザでサイトがひどく壊れないようにできます。

最後に、サイトがどのブラウザーでも同じように見えるようにしようとしないでください。主要な設計は IE/FF をターゲットにする必要があり、他の設計については合理的な妥協を許容する必要があります。使用 段階的なブラウザチャート ブラウザのサポートを絞り込みます。

ベストプラクティスとしては、白紙のワイヤーフレームまたは次のようなサービスの使用を開始します。 バルサミクのモックアップ. 。ワイヤーフレームではなくエディターから始める開発者がいかに多いかには今でも驚いていますが、私はそれがどれだけ時間の節約になるかを理解するまで、1 年前に切り替えたばかりでした。レイアウト (HTML)、プレゼンテーション (CSS)、および動作 (JavaScript) を明確に分離します。HTML にはスタイル要素を含めてはならず、JavaScript にはプレゼンテーションを含めてはなりません ( .addClass('highlight') の代わりに .css({'background-color': 'red'});).

この投稿の太字の用語に馴染みがない場合は、それらをグーグルで検索することは、Web 開発のキャリアと生産性にとって有益であるはずです。

基本リセットまたはフレームワークから開始し、IE を考慮したにもかかわらず、依然として不安定な場合は、次の点を再確認してください。

すべてが検証されますか？CSSとHTML?
含まれているファイル (js、css など) への壊れたリンク。Chrome/Safari では、スタイルシートのリンクが無効になると、すべてのリンクが赤くなる可能性があります。(デフォルトの 404 スタイルと関係があると思います)
使用している js プラグインに奇妙な要件はありますか?(jquery.thickbox のように、css ファイルは js ファイルの前に来る必要がありますか?)

UIについては、こちらをご覧ください内線.

これはスタンドアロンライブラリとしても優れていますが、jQuery、YUI、Prototype、GWT とともに使用することもできます。

サンプル: http://extjs.com/deploy/dev/examples/samples.html

JavaScript アプリケーションの開発に役立つことが 4 つあります。

特徴検出
図書館
仮想化を使用した反復開発
JavaScript:決定版ガイド、ダグラス・クロックフォード & ジョン・レジグ

特徴の検出

リフレクションを使用して、ブラウザーが目的の機能をサポートしているかどうかを確認します。ブラウザーがサポートするイベント処理を知りたい場合は、W3C 準拠の場合は if(el.addEventHandler)、IE タイプの場合は if(el.attachEvent) を使用し、最後に el.['onSomeEvent'] にフォールバックできます。

大きなことが 1 つあります。

ブラウザーは、サポートしている機能について嘘をつくことがあります。思い出せませんが、Firefox が DOM 機能を実装していても、その機能をテストすると false が返されるという問題に遭遇しました。

図書館

すでに jQuery を使っているので、説明は省略します。ただし、問題が発生した場合は、ブラウザ間の互換性が優れている YUI を検討してください。彼らは一緒に仕事をすることもあります。

仮想化による反復開発

おそらく私の最良のアドバイスは次のとおりです。すべてのテスト環境を一度に実行します。Linux ディストリビューション、Compiz Fusion、および大量の RAM を入手してください。VMWare の VMWare Server または Sun の Virtual Box のコピーをダウンロードし、いくつかのオペレーティングシステムをインストールします。Windows XP、Windows Vista、Mac OS X 用のイメージを入手します。

基本的な考え方は次のとおりです。Compiz Fusion では、キューブにマップされた 4 つのデスクトップが提供されます。これらのデスクトップのうちの 1 つは Linux コンピュータ、次のデスクトップは仮想 Windows XP ボックス、その次のデスクトップは Vista、最後の Mac OS X です。コードを書いた後、Alt キーを押しながら Tab キーを押して仮想コンピューターにアクセスし、作業内容をチェックアウトします。さらに、見た目も素晴らしいです。

JavaScript:決定版ガイド、ダグラス・クロックフォード & ジョン・レジグ

これら 3 つのソースは、JavaScript 開発に関するほとんどの情報を提供します。The Definitive guide はおそらく JavaScript の最良の参考書です。

Douglas Crockford は、Yahoo の JavaScript の第一人者 (この言葉は嫌いです) です。彼のシリーズ「Douglas Crockford Theory of the DOM」、「Douglas Crockford Advanced JavaScript」、「Douglas Crockford Theory of the Dom」、および「Douglas Crockford The Good Parts」を Yahoo! で検索してください。動画。

John Resig (ご存知のとおり) は jQuery を書きました。ejohn.org にある彼の Web サイトには豊富な JavaScript 情報が含まれており、Google で調べてみると、彼が防御的な JavaScript テクニックについて多数のプレゼンテーションを行っていることがわかります。

...幸運を！

Chrome は Safari と同じレンダリングエンジンを使用しているので、心配するブラウザが 1 つ減ります。したがって、Safari で動作する場合は、Chrome でもまったく同じように動作するはずです。

見るこの郵便受けマット・カッツのブログで。

Google Chrome は、Apple の Safari ブラウザと同じレンダリングエンジンである WebKit をレンダリングに使用するため、サイトが Safari と互換性がある場合、Chrome で問題なく動作するはずです。

アップデート：どうやらこれは古い情報のようです。この回答に対する Vox のコメントを参照してください。

リストされているすべてのブラウザ上で差異なく正確に一貫したプレゼンテーションを行うことが最優先事項である場合は、おそらく AS3 と Flex を検討する必要があります。

個人的に私が使っているのは、ムーツールシンプルで軽量な JavaScript フレームワークとして。使い方は簡単で、上記のすべてのブラウザをサポートしています (Chrome を除きますが、私の知る限りではそれも機能するようです)。

また、ブラウザ間での一貫性を確保するために、機能/スタイル/動作などを取得します。最初に 1 つのブラウザ (通常は firebug を備えた Firefox 3) で動作し、その後すぐに他のすべてのブラウザで動作することを確認します (IE6 は最後に残します)。そうでない場合は、すぐに修正するために時間を投資します。そうしないと、後で時間がなくなることがわかっているからです (私の経験では、クロスブラウザーで動作させるのに開発の約 50% がかかります)。時間 ;-））

「適切な部分」とブラウザをオンにして JavaScript を検証する JsLint.com FF、Safari などで JavaScript が異なる動作をする可能性が低くなります。

それ以外の場合 - 標準を使用し、コードを検証し、jQuery などの既存の技術に基づいて構築すれば、IE を除くすべてのブラウザでサイトが同じように動作するはずです。IE に魔法のレシピはありません。どこにでもバグがあるだけです...

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow