問題タブ [progressive-enhancement]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 特定のJavaScriptイベントのサポートを検出していますか？
JavaScript hashchangeイベントを使用して、URLのフラグメント識別子の変更を監視することに興味があります。私はReallySimpleHistoryとこのためのjQueryプラグインを知っています。ただし、私の特定のプロジェクトでは、別のJSファイルのオーバーヘッドを追加する価値はないという結論に達しました。
代わりに私がやりたいのは、「プログレッシブエンハンスメント」ルートを取ることです。つまり、hashchangeイベントが訪問者のブラウザーでサポートされているかどうかをテストし、利用可能な場合はコア機能ではなく拡張機能として使用するコードを記述します。IE 8、Firefox 3.6、およびChrome 4.1.249はこれをサポートしており、これが私のサイトのトラフィックの約20％を占めています。
それで、ええと...ブラウザが特定のイベントをサポートしているかどうかをテストする方法はありますか？
javascript - クラスベースの Javascript インジェクションに欠点はありますか?
私がますます目にする現象は、要素の種類や UI パターンに結び付けられるのではなく、特定のページの特定の要素に結び付けられる Javascript コードです。
たとえば、ページにいくつかのアニメーション メニューがあるとします。
これら 2 つのメニューは、同じページまたは異なるページに存在する可能性があり、一部のページにはメニューがない場合があります。
次のような Javascript コードをよく見かけます (これらの例では、jQuery を使用しています)。
問題に気づきましたか？
Javascript は、UI パターン自体ではなく、UI パターンの特定のインスタンスに密接に結合されています。
代わりにこれを行う方がはるかに簡単 (かつクリーン) ではないでしょうか? -
次に、「dropdown-menu」クラスを次のようにリストに配置できます。
この方法には、次の利点があります。
- より単純な Javascript -クラスに1 回アタッチするだけで済みます。
- 特定のページに存在しない可能性のある特定のインスタンスを探すことは避けています。
- 要素を削除すると、その要素のアタッチ コードを見つけるために Javascript を探し回る必要がなくなります。
これに似た手法は、alistapart.com の特定の記事によって開拓されたと思います。
これらの単純な手法がいまだに広く採用されていないことに驚いています。また、UI パターンではなく UI インスタンスを直接参照する「ベスト プラクティス」のコード サンプルや Javascript フレームワークを今でも目にします。
これには何か理由がありますか？今説明した手法に、私が気付いていない大きな欠点はありますか?
html - Ext JSまたは同様のツールを使用するときにプログレッシブエンハンスメントを実行するにはどうすればよいですか？
アプリ用に2つのほぼ別々のフロントエンドを開発する必要がありますか？1つはExt JSを使用し、もう1つはJSをまったく使用しませんか？
javascript - プログレッシブエンハンスメントとグレースフルデグラデーションは、実際には同じものですか？
プログレッシブエンハンスメントとグレースフルデグラデーションは基本的に同じものですか？
flash - JSP を使用して Flash の可用性を判断する
基本的に、ユーザーが JSP フォームをインストールしている場合は、JSP フォームを Flash フォームと交換する必要があります。JavaScript のオプションがあることは知っていますが、Flash は持っているが JavaScript を持っていない人を除外するので、これを使用したくありません。
オンラインで何かを見つけることができません。それほど難しくないと思いますが、何かアイデアはありますか? 可能であれば、一部のコードはジャブリーになります:)
dry - プログレッシブエンハンスメントでDRYを維持
新しいページに移動することなく、ページに何かを追加するためだけに (お問い合わせフォームなど)、非常に少量の Javascript を使用して Web サイトを構築しています。
とにかく連絡先ページを作成し (ユーザーが JavaScript をオンにしていない場合に備えて)、JavaScript を使用する必要があることを理解しています。
では、フォームの HTML を 2 つの場所に配置したくない場合は、どこに HTML を保存すればよいでしょうか。
（普段はそんなにうるさいわけではないのですが、これは気になります。）
javascript - プログレッシブエンハンスメントはもはや現在の問題ですか？
プログレッシブエンハンスメントを擁護するために私が聞いたことがいくつかあります。
Javascript がオフになっているか、使用できません。W3School の Javascript 統計によると、95% が 2008 年 1 月 (2.5 年前) に Javascript を有効にしていました。これらの統計に基づく傾向は、Javascript 対応ブラウザーが増加しているようです。AJAX の大量採用により、おそらくユーザーはより迅速に有効化するようになりました。テキストのみまたはアクセシビリティをサポートすることは、おそらくトラフィックの 1% 未満しか占めないため、ビジネスの観点からはあまり意味がありません。
モバイル ブラウザは動作しません。画面サイズが限られていることと、モバイル デバイスでのブラウジング エクスペリエンスがまったく異なることから、いずれにしてもサイトのモバイル バージョンを作成します。スクリーン リーダーやモバイル デバイスに別の CSS を使用することを主張する人もいるかもしれませんが、モバイル デバイスの外観をいくらきれいにしても、それほど多くの情報を表示することはできません。
元の説明は、Android や iPhone などの新しい世代のモバイル デバイスには当てはまりません。これらは合計で1 日のアクティブ化率が 200,000 を超えています。さらに、ほとんどの Javascript の見栄え (jQuery UI など) はあまり意味がありません。モバイル デバイスでの Web サイトのエクスペリエンスは大きく異なる (マウス ホバーがないなど) からです。モバイル デバイスは、カスタマイズされたバージョンの Web サイトを必要とする独自のプラットフォームであると考えています。もう 1 つのトレンドは、Web サイト/サービスの「ネイティブ アプリ」バージョンを作成することです。
クモは這うことができなくなります。これも真実ではありません。DOM を Javascript のデータ コンテナーとして使用することができます (div/input タグにエンティティを設定します)。また、Google はAJAX ウェブサイトをクロール可能にする努力をしてきました。
類似のスレッド:
興味深いリンク:
jquery - jquery-プログレッシブエンハンスメントとajax
だから今、私はいくつかのフォームを持っています。1つが送信されると、モーダルで別のフォームを取得します。だから今、私は最初のモーダルを開くexample.com/modal/1へのリンクを持っているかもしれません。ただし、JavaScriptが有効になっていない場合（つまり、ブラウザーが実際にリンクをたどる場合）、一部のhtmlが表示されます（取得される予定のhtml）。これをスタイリングできるようにしたいので、スタイルシートとすべてを使用してhtmlページ全体を作成する必要があると思いますが、これが私が疑問に思っていることです。
jqueryを使用すると、リクエストが返すものを解析するload()ような要素IDを選択して、＃form要素を使用できることを私は知っています。'#form'そんなものが使えるようになりたいのですが、post()機能を使っています。
これを行う方法についてのアイデア？
javascript - プログレッシブ エンハンスメントと初期表示状態
具体的な例がありますが、一般的な答えも探しています。JavaScript が有効になっている場合、最初は非表示にしたいページ要素があります。
例:
- トグルするフォームのセクション
- セレクトボックス「ジャンプフォーム」の送信ボタン
ページの読み込み後に要素が非表示になっているときに、「コンテンツのフラッシュ」を回避しようとしています。
解決
後世のためにここに完全なソリューションを入れています。
<head>セクションで呼び出される JavaScript ファイル:document.documentElement.className = 'js';
最初に非表示または表示される要素を許可するスタイル:
html - スクリプトなしのシナリオで、jQuery UIによってオーバーライドされるデフォルトのCSSスタイルを提供するための最良の方法は何ですか？
例：<< 1 2 3 4 5 6 7 8 >>ページにポケットベルがあり、すべてのナビゲーション要素が通常のHTMLリンクです。JSが有効になっている最新のブラウザーの場合、 jQueryの.button（）を使用してそれらを美化したいと思います。しかし、私はNoScriptシナリオのために何かを持っていたいです。明らかに、リンクにCSSスタイルを追加する必要がありますが、カスタムCSSがjQueryのスタイルを台無しにしないことをどうやって知ることができますか？
これは不必要な懸念ですか？jQueryは、要素の以前のスタイルをクリアするための関数を提供しますか？