10

短いバージョン:Web開発者とWeb開発者のエンドユーザーの両方が使用するすべてのブラウザーで一貫したプレゼンテーションとAJAX機能を実現するための最もクリーンで保守しやすい手法は何ですか?

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

ロングバージョン:他のWeb開発者向けのWebアプリを作成しました。私のアプリは、プレゼンテーションとAJAXの動作の両方で主要なWebブラウザー(およびGoogle Chrome)をサポートする必要があります。

Firefox / Firebugから始めて、IE 6および7で一貫したスタイルを設定するための条件付きコメントを追加しました。次に、驚いたことに、jQueryがIEで同じように動作しないことを発見しました。そこで、条件付きで純粋性の低いjQueryを使用して、JavascriptをFFとIEで移植できるように変更しました。

今日、私はWebkitとGoogle Chromeでテストを開始し、スタイルがFFとIEの両方と矛盾しているだけでなく、おそらく構文エラーまたは解析エラーが原因でJavascriptがまったく実行されていないことを発見しました。CSSが機能することを期待していましたが、今ではJavascriptのデバッグが増えています。この時点で、私は一歩下がって、あらゆる状況に対応する特別なケースの山を書く前に考えたいと思います。

私は特効薬を探しているのではなく、物事を可能な限り理解し、維持できるようにするためのベストプラクティスを探しています。これがサーバー側のインテリジェンスなしで機能する場合は、私が好みます。ただし、たとえば、ユーザーエージェントを確認してから、さまざまなファイルをさまざまなブラウザーに返すという利点がある場合は、Webアプリの全体的な理解度と保守性が低い場合は問題ありません。どうもありがとうございました!

4

11 に答える 11

14

私は同様の状況にあり、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

于 2009-03-25T02:19:42.190 に答える
5

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

于 2008-09-05T12:09:29.360 に答える
4

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

さまざまなブラウザーでの他の CSS の癖については、ここに聖杯はありません。唯一のオプションは、さまざまなブラウザーで Web サイトをテストし、この素晴らしいリソースを使用して、間違いなくメーリング リストに参加して時間を節約することです。

大量生産サイトで作業している場合は、エンド ゲームで browsercam.com のようなサービスを使用して、一部のブラウザでサイトがひどく壊れないようにすることができます。

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

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

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

于 2009-03-27T18:52:46.517 に答える
3

ベースリセットまたはフレームワークから始めて、IEを考慮していて、それでもすべて気紛れな場合は、次のことを再確認することをお勧めします。

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

UI については、Extを確認してください。

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

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

于 2008-09-05T05:14:26.787 に答える
2

JavaScript アプリケーションの開発に役立つ 4 つのことがわかりました。

  • 特徴検出
  • ライブラリ
  • 仮想化を使用した反復開発
  • JavaScript: The Definitive Guide、Douglas Crockford & John Resig

特徴検出

リフレクションを使用して、ブラウザが目的の機能をサポートしているかどうかを尋ねます。ブラウザーがサポートするイベント処理を知りたい場合は、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: The Definitive Guide、Douglas Crockford & John Resig

これら 3 つの情報源は、JavaScript 開発に関する私の情報のほとんどを提供します。Definitive ガイドは、おそらく 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 テクニックに関するプレゼンテーションが数多く行われていることがわかります。

... 幸運を!

于 2009-03-29T04:49:14.140 に答える
1

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

MattCuttsのブログの この投稿を参照してください。

Google ChromeはレンダリングにWebKitを使用します。これはAppleのSafariブラウザと同じレンダリングエンジンであるため、サイトがSafariと互換性がある場合は、Chromeでうまく機能するはずです。

更新:これは現在、古い情報のようです。この回答に関するVoxのコメントを参照してください。

于 2008-09-05T04:47:36.757 に答える
0

JsLint.comの「良い部分」とブラウザで JavaScript を検証すると、FF や Safari などで JavaScript の動作が異なる可能性が低くなります。

それ以外の場合 - 標準を使用してコードを検証し、jQuery などの既存の手法に基づいて構築することで、IE を除くすべてのブラウザーでサイトが同じように動作するようにする必要があります。

于 2009-03-29T08:29:22.643 に答える
0

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

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

于 2009-03-27T19:07:54.250 に答える
0

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

于 2009-03-27T18:57:55.990 に答える