画像置換の新技術：ステートドメイン法

CSS に精通している開発者は、Dave Shea が、既存のすべての方法の長所と短所を分析した優れた要約を記事で詳しく説明しています。では、新しい方法が提案され、「State Method」と名付けられています。この記事では、この方法の原理を詳しく紹介します。

既存の方法の欠点:

1. たとえば、画像が無効になっているか、置換画像に透明な領域が含まれているなど、失敗しやすいです。
2. 複雑すぎて迅速かつ確実に実行できません。
3. js を介してドキュメント ツリーを移動すると、ページがロードされるときに発生するちらつきは満足のいくものではありません。
4. 一部のブラウザでは互換性がない可能性があります

新しい画像置換方法:

新しい画像置換テクノロジーは js を使用して実装する必要がありますが、実装は簡単です。js の一部を head に導入するだけです。 js が実行されると、クライアントのイメージが無効になっていない限り、「.image-on」が応答ルールに追加されます。次のステートメントは h1「ステータス フィールド メソッド」に適用されます。

最初のルールは常に有効ですが、2 番目のルールはイメージが無効になっていない場合にのみ有効です。 「text-indent」はテキストを画面外にオフセットします。「overflow:hidden」は主にアンカーポイントをFFの下に配置し、クリックしたときにフォーカスが画面外にオフセットされるようにするために使用します。

2 番目のルールは @media screen にラップされており、主に画像の置換が印刷状態ではなくスクリーン リーダーでのみ発生することを保証するために使用されます。これを行わないと、ページを印刷すると、ほとんどのユーザーには意味のあるテキストではなく、大きな空白が表示されます。

このテクノロジーは高速に実行されます。テキストは画面からオフセットされているため、画像には透明な要素が含まれており、画像自体を通してテキストが見えないことがあります。 Js の実行は非常に高速でほぼ瞬時に実行され、ブラウザ自体の特性が最大限に活用されます。

メソッド分析

「状態フィールド メソッド」は、コンテキストの背景がドキュメントである想定された状態で CSS ルールを迅速に有効にし、ブラウザが DOM ツリーを走査することを回避するメソッドです。 「ステート ドメイン アプローチ」を適用する理由は 2 つあります。

1. ユーザーの反応に応じて、ページ上の一部のコンテンツが再フォーマットされました。
2. クライアントのブラウザ、デバイス、その他の条件に基づいて追加のスタイルを追加します。

「状態フィールド メソッド」は、次のスクリプトを使用して html にクラスを追加します。

document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp(" \b " + scope + " \b "), "");
};

このjsには小さな問題があり、サンプルページでは切り替え機能が有効になりませんでした。コードを次のように修正しました。

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};

上記の hasClass、addClass、removeClass メソッドは、「Pro JavaScript Techniques」によって提供されるメソッドを借用しています。 jqueryを使用したことがある場合は、方法はより簡単になります。

「ステータスフィールド」は以下の方法で切り替えることができます。

if (condition == true) {
document.enableStateScope("myScope", true);
}

「状態フィールド」が「オン」の場合、状態フィールドの名前がルールのセレクターに追加されます。次のルールは、条件が true の場合にアンカーの色を青に変更します。

a { color: red; }
.myScope a { color: blue; }

ご想像のとおり、ステート ドメイン イメージ置換技術は、イメージが無効になっているかどうかを確認することで機能します。無効になっていない場合は、「image-on」ステータス フィールドが有効になりますが、これは簡単です。

h1 {
幅: 100ピクセル;
高さ: 50ピクセル;
}

@メディア画面 {
.images-on h1 {
テキストインデント: -10000px;
背景画像: url(image.png);
オーバーフロー: 非表示;
}
}