تقنية جديدة لاستبدال الصور: طريقة مجال الحالة

يجب على المطورين الذين هم على دراية بـ CSS أن يعرفوا تقنية استبدال الصور وأهميتها، وقد قدم Dave Shea ملخصًا مفصلاً لذلك في أحد مقالاته، راجع ملخص Dave Shea الممتاز الذي يقوم بتحليل جميع الطرق الموجودة ، تم اقتراح طريقة جديدة وأطلق عليها اسم "طريقة الحالة" وستقدم هذه المقالة مبدأ هذه الطريقة بالتفصيل:

مساوئ الأساليب الحالية:

1. من السهل أن تفشل، على سبيل المثال: الصورة معطلة أو أن الصورة البديلة تحتوي على مناطق شفافة؛
2. معقدة للغاية بحيث لا يمكن تنفيذها بسرعة وبشكل موثوق؛
3. عند اجتياز شجرة المستندات عبر js، يكون الوميض الذي يحدث عند تحميل الصفحة غير مرضٍ؛
4. قد يكون غير متوافق مع بعض المتصفحات

طريقة جديدة لاستبدال الصورة:

يجب تنفيذ تقنية استبدال الصور الجديدة بمساعدة js، ولكن من السهل تنفيذها، ما عليك سوى إدخال قطعة صغيرة من js في الرأس. بمجرد تنفيذ js، سيتم إلحاق ".image-on" بقاعدة الاستجابة طالما لم يتم تعطيل صورة العميل، سيتم تفعيل القاعدة فيما يلي عبارة مطبقة على "طريقة حقل الحالة" h1:

تسري القاعدة الأولى دائمًا، بينما تسري القاعدة الثانية فقط عندما لا يتم تعطيل الصورة. تعمل "مسافة بادئة للنص" على إزاحة النص خارج الشاشة. ويتم استخدام "التجاوز: مخفي" بشكل أساسي لوضع نقطة الربط أسفل FF بحيث يتم إزاحة تركيزها خارج الشاشة عند النقر عليها.

يتم تضمين القاعدة الثانية في شاشة @media ويتم استخدامها بشكل أساسي للتأكد من أن استبدال الصورة يحدث فقط في قارئ الشاشة وليس في حالة الطباعة. إذا لم يتم ذلك، عند طباعة الصفحة، سيرى معظم المستخدمين فجوة كبيرة بدلاً من نص ذي معنى.

التكنولوجيا سريعة الأداء. ونظرًا لإزاحة النص عن الشاشة، يمكن أن تحتوي الصورة على عناصر شفافة بحيث لا يمكنك رؤية أي نص من خلال الصورة نفسها. يعد تنفيذ Js سريعًا جدًا، ويكاد يكون فوريًا، ويستفيد بشكل كامل من خصائص المتصفح نفسه.

تحليل الطريقة

"طريقة حقل الحالة" هي طريقة لجعل قواعد CSS سارية المفعول بسرعة في حالة مفترضة، مع كون خلفية السياق هي المستند، وبالتالي تجنب المتصفح من اجتياز شجرة DOM. هناك سببان لتطبيق "نهج مجال الدولة":

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 المذكورة أعلاه الأساليب التي توفرها "تقنيات JavaScript الاحترافية". إذا كنت قد استخدمت jquery، ستكون الطريقة أبسط.

يمكن تبديل "حقل الحالة" من خلال الطرق التالية:

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

إذا كان "حقل الحالة" في وضع التشغيل، فسيتم إلحاق اسم حقل الحالة بمحدد القاعدة. ستغير القاعدة التالية لون المرساة إلى اللون الأزرق عندما يكون الشرط صحيحًا.

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

كما قد تتوقع، تعمل تقنية استبدال صورة مجال الحالة عن طريق التحقق لمعرفة ما إذا كانت الصورة معطلة. إذا لم يتم تعطيله، فسيتم تنشيط حقل حالة "الصورة قيد التشغيل"، وهو أمر واضح ومباشر.

ح1 {
العرض: 100 بكسل؛
الارتفاع: 50 بكسل؛
}

@شاشة الوسائط {
الصور على h1 {
المسافة البادئة للنص: -10000 بكسل؛
صورة الخلفية: url(image.png);
الفائض: مخفي؛
}
}