Teknologi baru untuk penggantian gambar: metode domain negara

Pengembang yang akrab dengan CSS harus mengetahui teknologi penggantian gambar dan signifikansinya. Dave Shea telah membuat ringkasan rinci tentang ini di salah satu artikelnya. Lihat ringkasan luar biasa Dave Shea Paul Young menganalisis semua metode yang ada , sebuah metode baru diusulkan dan diberi nama "Metode Negara". Artikel ini akan memperkenalkan prinsip metode ini secara rinci:

Kerugian dari metode yang ada:

1. Kegagalan mudah terjadi, misalnya: gambar dinonaktifkan atau gambar pengganti berisi area transparan;
2. Terlalu rumit untuk dieksekusi dengan cepat dan andal;
3. Melintasi pohon dokumen melalui js, kedipan yang terjadi saat halaman dimuat tidak memuaskan;
4. Mungkin tidak kompatibel dengan beberapa browser

Metode penggantian gambar baru:

Teknologi penggantian gambar baru perlu diimplementasikan dengan bantuan js, tetapi penerapannya mudah. ​​Anda hanya perlu memasukkan sebagian kecil js ke dalam head. Setelah js dijalankan, ".image-on" akan ditambahkan ke aturan respons. Selama gambar klien tidak dinonaktifkan, aturan tersebut akan berlaku. Berikut ini adalah pernyataan yang diterapkan pada "metode bidang status" h1:

Aturan pertama selalu berlaku, aturan kedua hanya berlaku bila gambar tidak dinonaktifkan. "text-indent" membuat teks diimbangi di luar layar. "overflow:hidden" terutama digunakan untuk menempatkan titik jangkar di bawah FF sehingga fokusnya diimbangi di luar layar saat diklik.

Aturan kedua dibungkus dalam layar @media dan terutama digunakan untuk memastikan bahwa penggantian gambar hanya terjadi di pembaca layar dan bukan dalam kondisi pencetakan. Jika hal ini tidak dilakukan, saat halaman dicetak, sebagian besar pengguna akan melihat celah yang besar, bukan teks yang bermakna.

Teknologi ini cepat untuk dilakukan. Karena teks diimbangi dari layar, gambar dapat berisi elemen transparan sehingga Anda tidak dapat melihat teks apa pun melalui gambar itu sendiri. Eksekusi Js sangat cepat, hampir seketika, dan memanfaatkan sepenuhnya karakteristik browser itu sendiri.

Analisis metode

"Metode bidang keadaan" adalah metode untuk membuat aturan CSS dengan cepat berlaku dalam keadaan diasumsikan, dengan latar belakang konteks menjadi dokumennya, sehingga menghindari browser melintasi pohon DOM. Ada dua alasan untuk menerapkan "pendekatan domain negara":

1. Menanggapi reaksi pengguna, beberapa konten pada halaman diformat ulang;
2. Menambahkan gaya tambahan berdasarkan browser klien, perangkat, dan kondisi lainnya.

"Metode bidang status" menambahkan kelas ke html dengan menggunakan skrip berikut.

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 "), "");
};

Ada masalah kecil dengan js ini, fungsi peralihan tidak berpengaruh pada halaman contoh.

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);
};

Metode hasClass, addClass, dan deleteClass di atas meminjam metode yang disediakan oleh "Teknik Pro JavaScript". Jika Anda sudah menggunakan jquery, caranya akan lebih sederhana.

"Bidang status" dapat dialihkan melalui metode berikut:

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

Jika "bidang status" adalah "aktif", nama bidang status akan ditambahkan ke pemilih aturan. Aturan berikut akan mengubah warna jangkar menjadi biru jika kondisinya benar.

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

Seperti yang Anda duga, teknik penggantian gambar domain negara bekerja dengan memeriksa apakah gambar tersebut dinonaktifkan. Jika tidak dinonaktifkan, bidang status "gambar aktif" akan diaktifkan, dan ini sangatlah mudah.

jam1 {
lebar: 100 piksel;
tinggi: 50 piksel;
}

@layar media {
.gambar-di h1 {
indentasi teks: -10000px;
gambar latar belakang: url(gambar.png);
meluap: tersembunyi;
}
}