問題タブ [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.
html - www.domain.comとdomain.comでサイトの幅が異なるのはなぜですか？
私のサイトの2つのバージョンを2つの異なるタブで開き、 www.compversions.comとcompversions.comにアクセスし、解像度が少なくとも1680 x 1050であると仮定すると、サイトは2つの異なるサイズでレンダリングされます。
プログレッシブエンハンスメントとして設計されていますが、「www」と、まったく同じ解像度のモニターでサイトのサイズが異なるドメインに「www」がないことの違いは何ですか？
どんな助けでも大歓迎です。
ありがとう。
編集1：元の問題はWindows 7、Chromeの最新ビルドで見られます。最新のSafariでMacでテストしましたが、問題はありません。ただし、TwitterカウンターとGoogle+カウンターには2つの異なる数値が表示されます。
これはcompversions.comのスクリーンショットです-ご覧のとおり、すべてがわずかに大きくなっています-特に白い中央部分です。
これはwww.compversions.comのスクリーンショットです。これは少し小さく、特に白い中央部分です。
jquery - Web ページ全体をフェードインする方法 -- アクセシブルに
クライアントは、ホームページを最初から空白 (ロゴと背景画像のみが表示される) にしてから、1 ～ 2 秒後にナビゲーションとコンテンツをフェードインするように依頼しました。
CSS で非表示にしたコンテンツから始めて、jQuery でフェードインすることもできます。残念ながら、これはプログレッシブ エンハンスメントに違反しています。アクティブなコードが実行されるまでサイトは完全に使用できず、視覚障害者がスクリーン リーダーを使用するなどの問題を引き起こします。
私が検討した 2 つの回避策は、Flash と<noscript>タグです。Flash は、サイトの他の場所では使用されていないため、やり過ぎのようです。また、ホームページはコンテンツが多く、常に更新される一連のニュース項目があり、軽いブログのようなものです。この <noscript>タグは、スクリーン リーダーを使用している視覚障害者には役に立ちません。通常、ブラウザーではスクリプトが有効になっているためです。
解決策がありませんか？それとも、これは良い考えではありませんか？
css - CSS3 複数の背景画像 - モバイル デバイスでのサポート?
メディア クエリを使用してサイトをモバイル最適化しています。モバイル向けに最適化されたバージョンで複数の背景画像を使用しても安全ですか? モバイルブラウザは一般的にかなり最新のものなので、これで問題ないと思っていたでしょう...ありがとう
javascript - プログレッシブ エンハンスメント / グレースフル デグラデーションにおける冗長性の役割にどのように対処すればよいですか?
この質問は、とのplaceholderテキストのベスト プラクティスに関する別の質問に答えようとしていたときに発生しました。inputstextareas
HTML5 を使用することplaceholderは確かに最適ですが、現時点では、古いブラウザー用に (javascript を使用して) 劣化したソリューションを追加する必要があるようです。
JsFiddleはこちら：http ://jsfiddle.net/leifparker/DvqYU/16/
問題は、どちらもほぼ同じことを達成しているのに、なぜわざわざ両方を含める必要があるのかということです。javascript のみのソリューションを利用して、(ほぼ) 広く受け入れられるまで HTML5 の実装を放棄しないのはなぜですか?
確かに、この特定の例では、HTML5placeholder属性とhasPlaceholderSupport()関数を追加することはかなり最小限の行 (4) の追加です。
双方に理由があると確信しており、それを聞いてみたいと思っています。
前もって感謝します！
javascript - HTML5とプレースホルダー：段階的に行う方法は？
placeholderHTML5の属性を使うことを考えています。ブラウザがHTML5をサポートしていない場合は、フォールバックとしてjQueryを使用できます。ただし、JSがオフになっている場合はどうなりますか？プログレッシブエンハンスメント哲学を使用してこれを処理するにはどうすればよいですか？
javascript - インライン編集とプログレッシブエンハンスメントの競合
プログレッシブエンハンスメントを備えたWebページがあります。スクリプトによってページにいくつかのフォーマットと要素が追加されます。
このページでは、インライン編集も可能です。
これが私の問題です。編集モードでは、プログレッシブエンハンスメントスクリプトがその役割を果たし、マークアップを追加します。一部のマークアップは編集可能な領域に入るので、ユーザーがページを保存すると保存されますが、これはもちろん望ましい動作ではありません。
インライン編集とプログレッシブエンハンスメントを同じページで機能させるためのクリーンな方法は何でしょうか？
javascript - JavaScript なしでカルーセルを開発する方法
jquery と javascript を使用せずにサイトを開発する方法を教えてください。
現在、jquery サイクル プラグインを使用して開発されたカルーセルがありますが、「Web for all、プログレッシブ エンハンスメントを使用する」と信じてサイトを実装する必要があるという考えを変更したため、良いように思えますが、どのように変更するのかわかりません。 JavaScript が無効になっている場合に実行する既存のカルーセルとアコーディオン。
これらのカルーセルとアコーディオンを JavaScript を使用せずに、または最小限の JavaScript を使用して実行する必要があります。css3 と html5 のみを使用しているため、javascript がオフの場合でもユーザーは表示できます。現在、javascript がないと、アコーディオンが壊れ、すべてのコンテンツが表示され、カルーセルが動かなくなります。
JS を使用せずに既存のカルーセル、アコーディオンを実行する方法について、いくつかのアイデアを探しています。
前もって感謝します。
あなたの答えを待っています。
jquery - 代替の img src... JavaScript なしで可能ですか?
一部のコンテンツをロードするために使用jQuery.loadしていますが、SEO および JavaScript が無効なブラウザーの場合は、プログレッシブ エンハンスメントを使用して、<a>タグを使用してコンテンツへの通常のリンクを作成し、JavaScript がコンテンツをロードするときに使用しました。
私の問題は、コンテンツが JavaScript を使用して読み込まれる場合、ページ/読み込まれたコンテンツの 1 つに画像がありますが、タグsrc="images/picture.png"を使用して読み込まれる場合は( に注意してください)。ロードされたページをファイルと同じフォルダーレベルに配置することでファイル構造を変更することでこれを修正できることはわかっていますが、これは、ルート/またはメインファイルが非表示になっているファイルのロードを意味し、面倒なことになりますそのページの URL。<a>src="../images/picture.png"../
画像の代替ソースを指定できるかどうか疑問に思っていました (もちろん、JavaScript を使用してこれを行うことはできません。純粋な HTML でなければなりません)。
そうです...私がそれを非常に明確にしたとは思わないでください..
変更する必要があるのは次のとおりです。
そのページが
<a>リンクからクリックされた場合、画像ソースはsrc="../images/picture.jpg"jQuery.load画像ソースを使用してコンテンツが読み込まれる場合は、src="images/picture.jpg"
これは、JS が機能していないか無効になっている場合のための JavaScript を使用して実現することはできません。
jquery - AJAX と DHTML を簡単にするために、Web アプリケーションをどのように構築しますか?
Websinte のこの構造を考えると
通常の Web ナビゲーションを使用すると、ページは完全に HTML でレンダリングされます。プログレッシブ エンハンスメント アプローチに従って、最後に特定の ID やクラスを探し、JavaScript と特に jQuery を使用して動的な動作を与えます。この拡張コードは、外部スクリプトがダウンロードされた後、本文の最後に発生します。
では#content、多くの jQuery AJAX インタラクションが発生し、サーバーから他の部分ビューを取得してページに挿入するものもありますが、それらの ID とクラスを再度探して、JavaScript オブジェクトをこの新しい要素にアタッチする必要があります。
コントローラー、イベント ハンドラーなどを、既にそれらを持っているオブジェクトに再適用したくないため、非常に面倒な場合があります。
これまでのところ、私が見つけた唯一の解決策は、私の部分的なビューに入れられています:
たとえば、必要に応じ$('input.date').datepicker()て新しい要素を動的に追加すると<input type="text" class="date"/>、jQuery文を再実行しない限り、新しい要素には日付ピッカーがありません。
たとえば、#content私が持っていることを考えると<input type="text" class="date"/>：
jQuery の datepicer を初めて機能させるには、外部宣言の後
$('input.date').datepicker()に , の最後で呼び出す必要があります。<body><script>ページが新しい要素である部分ビューをダウンロードする場合、
<input type="text" class="date"/>ajax 呼び出しのビューに初期化呼び出しを配置する必要があります。
したがって、コードの繰り返しで終わります。これは、C# のように簡単にコードをリファクタリングできない JS では特に望ましくありません。
これは、これを達成するためのより良い方法があるかどうか疑問に思って、先週私を夢中にさせているものです. より良いテクニック、または他の全体的なアプローチ?
Web アプリケーションをどのように構築しますか?
敬具。
PS:イベントに関連するだけでなく、.live()またはのようなものがあればいいですね。.delegate()DOM に何かが追加されるたびに jQuery/browser が発生させるイベントはありませんか?
javascript - このブラウザ技術に名前はありますか?
ブラウザーで開いているページを探索して特定のコンテンツを見つけて変更するこの手法の名前はありますか?
いくつかの例：
- Skype は、ページ上の電話番号を検索し、通話メニューを添付します。
- スクリプトは、ページ内のパーセンテージを見つけて、それらを小さなパイに置き換えます
- 広告エンジンがページ内のキーワードを見つけてハイパーリンクに変換します
- 別のドメインを指すページ上のすべてのハイパーリンクの横にアイコンを追加します
- 等
それが一種の漸進的強化であることは理解しています。しかし、私が特に興味を持っているのは、最初のステップであるコンテンツ発見プロセスです。ベスト プラクティスを提供する記事や、この手法の欠点を説明する記事に興味があります。
編集: この手法がテキスト ノードだけでなく、あらゆる種類の html コンテンツに適用できることを示す例を追加しました。