6

Web サイトをハイ コントラスト モードでアクセスできるようにしようとしています。ハイ コントラスト モードが有効になっていることを検出するために、背景画像が無効になっているかどうかを検出する JavaScript メソッドを作成しました。これは、ハイ コントラスト モードでは背景画像が無効になるためです。次に、ブラウザーがハイ コントラスト モードの場合は、CSS ファイルを追加して、ハイ コントラストで表示するための修正を行います。これは Firefox、Edge、および IE では正常に機能しますが、Chrome は独自の拡張機能を使用してハイ コントラストを作成し、背景画像を無効にしないため、Chrome ではハイ コントラスト用の CSS が追加されません。

検索の結果、ウェブサイトの色や画像自体を有効/無効/変更するのではなく、Chrome がウェブサイトにフィルターを追加することがわかりました。検索して検索しましたが、Chrome がハイ コントラスト モードを使用しているかどうかを確認するためにテストするものが見つかりません。どの拡張機能が使用されているかを検出する方法があれば、問題も解決しますが、それを行う方法を見つけることもできませんでした.

私のコードは実際には問題なく動作します。必要なのは、Chrome でハイ コントラスト モードを検出できることだけです。ハイコントラストモードをチェックするために私が使用する方法は次のとおりです。

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

4

3 に答える 3

4

Windows High Contrast Modeについて質問している場合、Chrome はそれがいつアクティブになるかを知りません。

一般に、Windows ユーザーがハイ コントラスト モードを有効にすることを選択した場合、そのユーザーは Microsoft Internet Explorer または Microsoft Edge (これらのブラウザーがサポートしているため) でサーフィンしています。どちらも独自の-ms-high-contrast @mediaルールをサポートしています。

欠落している背景画像をチェックすることは IE/Edge で機能する戦術ですが、メディア クエリを使用する方がより良い方法です。特に、Windows のハイ コントラスト モードでは、まもなく Edge で背景画像が使用できるようになります。

特定の拡張機能が Chrome で独自のハイ コントラスト モードを設定したことを検出したい場合は、どの拡張機能を知っていると役立ちます。

たとえば、ハイ コントラスト<html>拡張機能を使用すると、タグの次の属性を探すことができます: hc="a3"and hcx="3"(値は異なる場合がありますが、属性は一致する必要があります)。ブラウザ開発ツールを開くと、それが行う他のいくつかのことがわかります。しかし、これらの属性は DOM の最高レベルにあり、おそらく最も安全に使用できます。

Chrome for Android について質問している場合、それも別のプロセスです。

于 2016-07-21T16:09:34.740 に答える
1

Chrome 拡張機能は、ハイコントラスト LAF を生成するコードを挿入します。

インジェクションのために setTimeout が必要になる場合があります。私の場合は必須でした。

これは私のために働いた：

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);
于 2016-07-20T23:17:47.090 に答える